上篇：VUE从入门到入坑—02.了解生命周期，小练习：对数组的增删改查 / 轮播图
下篇：VUE从入门到入坑—04.v-model指令 / 事件绑定指令 / 修饰符 / 深度响应式
1、样式绑定：
v-bind 在处理 class 和 style 时, 表达式的结果类型除了字符串之外,还可以是对象或数组。
1.绑定单个样式
<style>
.list li.active{
background-color: tomato;
color: white;
}
</style>
<div id="app">
<ul class="list">
<!-- index===activeIndex判断结果为true时，添加active选择器 -->
<li :class="{active:index===activeIndex}" v-for="(item, index) in citys" :key="index" @click="activeIndex=index">{{item}}</li>
</ul>
</div>
new Vue({
el:"#app",
data:{
activeIndex:0,
}
})
2.绑定多个样式。
.bgColor{
background-color: skyblue;
}
.textColor{
color: white;
}
.borderColor{
border: 2px sienna solid;
}
<div id="app">
<div>
<button @click="bgColor=true">添加背景颜色</button>
<button @click="textColor=true">添加文本颜色</button>
<button @click="borderColor=true">添加边框</button>
<!-- 绑定class,对象的属性名就是指定类的名称，属性值是true和false -->
<div class="box1" :class="{bgColor:bgColor,textColor:textColor,borderColor:borderColor}">好好学习</div>
</div>
new Vue({
el:"#app",
data:{
//是否添加背景颜色
bgColor:false,
//是否添加文本颜色
fontColor:false,
//是否显示边框
border:false,
}
})
3.绑定表达式
绑定的三元表达式条件为true时，添加选择器；条件为false则不添加。
3-1.直接绑定一个表达式
<div id="app">
<div class="box1" :class=" bgColor?'bgColor':'' ">好好学习</div>
</div>
3-2. 通过数组绑定多个表达式
<div id="app">
<div class="box1" :class="[bgColor?'bgColor':'',textColor?'textColor':'',borderColor?'borderColor':'']">好好学习</div>
</div>
4.:style 内联绑定样式
:style通常也是绑定一个对象，对象的属性名是原生CSS的属性名（要使用小驼峰命名法），属性值是具体的CSS样式值。
<div class="box1" :style="{backgroundColor:bgc,color:fc}">好好学习Vue
<p>背景色：<input type="text" v-model="bgc"></p>
<p>文本色：<input type="text" v-model="fc"></p>
</div>
new Vue({
el:'#app',
data:{
//定义背景颜色
bgc:'orangered',
//定义文本颜色
fc:'white'
}
})
效果：改变输入框的值，可以改变背景色和文本颜色.
二、计算属性
1.普通方法
当页面数据发生变化时，所有的方法都要重新执行。
在下面的代码中，当地址改变时，姓名方法也需要重新执行。
<div id="app">
<p>姓：<input type="text" v-model="firstName"></p>
<p>名：<input type="text" v-model="lastName"></p>
<p>地址：<input type="text" v-model="address"></p>
<p>方法返回姓名：<input type="text" :value="fullName2()"></p>
</div>
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '杰',
address: '成都',
},
methods: {
fullName2() {
console.log('我是方法');
return this.firstName + '.' + this.lastName
},
},
})
- computed 计算属性
计算属性的优势是：有缓存。只有当计算属性用到的数据发生变化时，计算属性才会重新执行。计算属性本质上其实是方法，只不过这方法在模板中，可以当做属性来使用。
<p>计算属性返回姓名：<input type="text" :value="fullName"></p>
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '杰',
address: '成都',
},
用于定义计算属性
computed: {
在这里面定义的是方法，计算属性默认情况下只能读，不能改
fullName() {
console.log('我是计算属性');
return this.firstName + '.' + this.lastName
}
}
})
注意：计算属性默认情况下只能读，不能改；如果需要修改计算属性的值，需要定义完整结构的计算属性，并且使用v-model绑定计算属性。用法如下所示：
<p>计算属性返回姓名：<input type="text" v-model="fullName"></p>
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '杰',
address: '成都',
},
//用于定义计算属性
computed: {
// 定义完整结构的计算属性
fullName:{
//get方法，用于返回计算属性的值
get(){
return this.firstName+'.'+this.lastName
},
//set方法，用于修改计算属性的值
set(val){
let arr = val.split('.')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
三、数据侦听器 watch
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：侦听器。也就是说，当vue实例数据发生变动，watch属性可以快速检测到改变的数据。
1.监听数据
要侦听哪个属性，就以那个属性的名称为方法名，定义一个方法, 当属性的值发生变化时，该方法就会执行。该方法，有两个参数，第一个参数是最新值，第二参数是旧值。
<div id="app">
<p>姓名：<input type="text" v-model="name"></p>
</div>
new Vue({
el:'#app',
data:{
name:'张三'
},
//数据侦听器
watch:{
// 侦听name
name(nval,oval){
可以在侦听到name属性值发生变化时，进行一些操作。例如重新发送ajax请求获取新的数据
console.log(nval,oval);
}
}
})
2.监听对象
如果要实现深度侦听对象的变化（也就是对象具体属性的变化），就需要使用完整的写法，定义一个对象。
deep属性：在对象中，通过deep属性设置深度监视。
immediate属性：如果希望页面加载完成时，先运行一次监视器（注意：这种情况下，旧值是undefined），需要设置immediate:true。
handler：通过handler定义监视器的方法。
注意：开启深度监视后，旧值已经没有意义。因为对象是引用类型，对象的属性值已经改了，就没有旧的属性值。
<div id="app">
<button @click="resetStudent">修改学生对象</button>
<p>姓名：<input v-model="student.name" ></p>
<p>年龄：<input v-model="student.age" ></p>
<p>性别：<input v-model="student.sex" ></p>
</div>
new Vue({
el:'#app',
data:{
student:{
name:'李四',
age:20,
sex:'女'
}
},
methods: {
resetStudent(){
this.student = {
name:'王五',
age:22,
sex:'男'
}
}
},
//数据侦听器
watch:{
// 侦听对象，需要开启深度监视
student:{
// 开启深度监视
deep:true,
// 页面加载完成时，先运行一次
immediate:true,
//定义监视的函数
handler(nval,oval){
console.log(nval,oval);
}
}
}
})
3.通过计算属性实现监听
当计算机属性里面用到的数据发生变化时，会重新执行计算属性。只是计算属性必须要在模板中使用（也就是说需要在容器中调用，不调也用不了对不对）。*
<div id="app">
<p>年龄：<input type="text" v-model="age">{{MyAge}}</p>
</div>
new Vue({
el:'#app',
data:{
age:20
}
//计算属性，也有监视的能力
computed:{
MyAge(){
// 当前计算机属性里面用到数据发生变化时，会重新执行计算属性
// 只是计算属性必须要在模板中使用
console.log(this.age);
return this.age
}
}
})
四、过滤器
每个过滤器其实也是一个方法。该方法接收一个参数，对参数进行过滤，然后重新返回。过滤器只能在插值表达式 和 v-bind表达式中使用。通过管道符 | 指定使用具体的过滤器。原理就是将“管道符”左边的值传给“管道符”右边的方法去处理，并返回处理过后的结果。
过滤器可以链式调用，就是之前已经过滤完成的结果，继续传给下一个过滤器，注意顺序。
定义过滤器有两种方式：局部过滤器，全局过滤器。当全局过滤器和局部过滤器冲突时，优先级更高的是局部过滤器。
1.局部过滤器
局部过滤器（Vue实例内部定义的过滤器），只有当前Vue实例可以访问。在filters中定义过滤器。
<div id="app">
<p>商品名称：{{goods.name}}</p>
<p>商品价格：{{goods.price | toFixed2}}</p>
<!-- 通过管道符| 调用过滤器，其实就是调用那个方法，将值传进去，再返回新的值 -->
<p>商品价格(人民币)：{{goods.price | toFixed2 | toRMB}}
<input type="text" :value="goods.price | toFixed2">
</p>
<!-- 过滤器可以链式调用，就是之前已经过滤完成的结果，继续传给下一个过滤器，注意顺序 -->
<p>商品价格(美元)：{{goods.price | toFixed2 | toUS}}</p>
</div>
new Vue({
el:'#app',
data:{
goods:{
name:'小米手机',
price:1999.22222
}
},
// 定义过滤器
filters:{
// 过滤在模板中通过管道符 | 的方式来调用
toFixed2(val){
return val.toFixed(2)
},
//返回人民币数据
toRMB(val){
return '￥'+ val
},
//返回美元数据
toUS(val){
return '$'+ (val/6.5).toFixed(2)
}
}
})
2.全局过滤器
在创建 Vue 实例之前定义的全局过滤器，所有的Vue实例都可以访问。
<!-- app 和 app2容器都可以使用全局过滤器toFixed2、toRMB -->
<div id="app">
<p>商品名称：{{goods.name}}</p>
<p>商品价格：{{goods.price | toFixed2 | toRMB}}</p>
</div>
<div id="app2">
<p>商品名称：{{goods.name}}</p>
<p>商品价格：{{goods.price | toFixed2 | toRMB}}</p>
</div>
Vue.filter("toFixed2", function (val) {
return val.toFixed(2);
});
Vue.filter('toRMB', function(val){
return '￥'+ val
})
new Vue({
el:'#app',
data:{
goods:{
name:'小米手机',
price:1999.22222
}
}
})
new Vue({
el:'#app2',
data:{
goods:{
name:'华为手机',
price:2999.33333
}
}
})
