Collection
Collection
1、将vue.js正确引入到项目中;
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
点击 "运行实例" 按钮查看在线实例
2、问答:什么是vue.js中的模型对象，本质是什么，如何在实例中声明的？
（1）实例: Vue.js本身就是一个构造函数,可以用来创建对象,使用Vue第一步,就是要创建一个Vue实例:new Vue();
（2）实例参数: Vue()接受一个js字面量对象做为参数,所有的功能,都以对象属性的方式进行设置;
（3）挂载点: Vue实例的作用域,本质上就是通过css选择器获取到的页面元素;
（4）模板: 带有html标签的字符串;
（5）值/变量: 挂载点中的文本内容;
（6）属性: 描述模板或html标签;
（7） 事件: 模板或元素上发生的系统或用户事件,例如点击,移动等;
3、实例演示: v-text,v-html变量渲染时的区别；
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<title>Vue</title>
</head>
<body>
<div id="box">
<!--以插值的方式显示内容-->
{{message1}}
<br>
{{message2}}
<p v-text="message2"></p>
<p v-html="message2"></p>
</div>
<script>
new Vue({
//绑定挂载点
el:'#box',
data:{
message1:'Vue.js开发基础',
message2:'<h3 style="color:red">php中文网</h3>'
}
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、属性绑定v-bind和事件绑定v-on的使用方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<title>Vue</title>
</head>
<body>
<div id="box">
<!--1、模板绑定-->
<h3>{{message}}</h3>
<!--2、属性绑定-->
<h3 style="color:red">{{message}}</h3>
<h3 :style="style+'font-size:2rem;'">{{message}}</h3>
<!--3、事件绑定-->
<!--v-on-->
<!--事件对应的方法必须写到Vue实例中的methods属性中-->
<h3 v-on:click="showDesc">{{message}}</h3>
<h3 @click="changeText">{{message}}</h3>
</div>
<script>
new Vue({
//绑定挂载点
el:'#box',
//template:'<h3 style="color:red">《JavaScript权威指南最新》</h3>',
data:{
message:'《JavaScript权威指南》',
style:'color:blue;'
},
methods:{
changeText:function(){
this.message="《Vue.js权威指南》";
}
}
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5、双向数据绑定的原理与实现: v-model指令
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<title>双向数据绑定</title>
</head>
<body>
<div id="box">
<!--双向绑定：模型中的数据由页面中的数据决定-->
<input type="text" v-model="info">
<h3>{{info}}</h3>
</div>
<script>
new Vue({
//绑定挂载点
el:'#box',
//template:'<h3 style="color:red">《JavaScript权威指南最新》</h3>',
data:{
info:''
}
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6、观察者/侦听器的实现机制与实例演示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<title>侦听器</title>
</head>
<body>
<div id="box">
<!--双向绑定：模型中的数据由页面中的数据决定-->
用户名：<input type="text" v-model="username"><br>
<h3>{{length}}</h3>
<h3 v-show="isShow" :style="warning">{{message}}</h3>
</div>
<script>
new Vue({
//绑定挂载点
el:'#box',
data:{
username:'',
length:0,
message:'用户名太短',
isShow:false,
warning:'color:red'
},
watch:{
// 侦听器:实时监测页面中数据的变化,实时更新数据模型中的属性,并完成指定的动作
// Vue是面向数据编程,侦听器当然也是面数据,所以watch中侦听的属性必须是页面中的变量
username:function(){
this.length++;
if(this.length<6){
this.isShow=true;
}else{
this.isShow=false;
}
}
}
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例