vue官网
一 、class、style操作
二、事件
三、计算属性
四、数据监听、观测
五、指令+自定义指令
六、过滤器
一 、class、style操作 官网
1. class使用：
（1）v-bind:class=“数据|属性|变量|表达式”
（2）v-bind:class=“数据” 数据类型：字符、对象、数组；
（3）v-bind:class="[‘class名1’,‘class名2’]"
（4）v-bind:class="[{class名1:true},{class名2:false}]"
（5）v-bind:class="{class名1:true,class名2:false}" 布尔值决定样式是否使用。
<style>.box1{background:red;}.box2{width:500px;height:20px;}
</style>
<div id="app"><p :class="css">（1）v-bind:class="数据|属性|变量|表达式"</p><p :class="'box1 box2'">（2）v-bind:class="数据" 数据类型可以是：字符、对象、数组</p><p :class="['box1','box2']">（3）v-bind:class="['class名1','class名2']"</p><p :class="[{box1:true},{box2:false}]">（4）[{class名1:true},{class名2:false}]"</p><p :class="{box1:true,box2:false}">（5）v-bind:class="{class名1:true,class名2:false}"</p>
</div>
<script>let vm = new Vue({el: "#app",data: {css: "box1 box2"}});
</script>
2. style使用：
（1）:style="‘数据’" 数据类型：字符、对象、数组；
（2）:style="’[‘css属性名1: 值’, ‘css属性名2: 值’]’"； 这种方法现已不支持使用
（3）:style="[{css属性名:‘值’},{css属性名小驼峰:‘值’}]"；
（4）:style="{css属性名1:‘值’,css属性名2:‘值’}"；
<div id="app"><p :style="'background:red;width:500px'">（1）:style="数据" 数据类型：字符、对象、数组；</p><p :style="['background:red','width:500px']">（2）:style="'['css属性名1: 值', 'css属性名2: 值']'"</p><p :style="[{background:'red'},{width:'500px'}]">（3）:style="[{css属性名:'值'},{css属性名小驼峰:'值'}]；</p><p :style="{background:'red',width:'500px'}">（4）:style="{css属性名1:'值',css属性名2:'值'}；</p>
</div>
<script>let vm = new Vue({el: "#app"})
</script>
二、事件 官网
1. 模板绑定行间事件： <xx v-on:事件名="方法名($event,参数)">
<xx @事件名="方法名($event,参数)">
2. 绑定自定义事件：
（1）定义： vm.$on( '自定义事件名'|['自定义事件名1','自定义事件名2'],回调函数(参数) )；
（2）销毁： vm.$off( '自定义事件名'|['自定义事件名1','自定义事件名2'],回调函数(参数))；
（3）触发： vm.$emit(自定义事件名,参数)
（4）示例
let vm = new Vue({...})
vm.$on('myEvent',(arg) =>{console.log('定义一个事件',arg);//vm.$off('myEvent'); //销毁事件
} );
vm.$emit('myEvent','我要传参数')//结合 dom 开始
<button @clik="show">按钮</button>methods:{this.$emit('myEvent','aaa');this.$off('myEvent');
}vm.$on('myEvent',(arg) =>{console.log('定义一个事件',arg);//vm.$off('myEvent'); //销毁事件
} );
//结合 dom 结束
3. 事件对象： 事件对象可以不传递，需要传递的场景：传参数同时使用事件对象时。例如： show($event,参数)
4. 解决事件冒泡和默认行为：
（1）利用 $event ：
e|event.cacelBubble = true;ev.stopPropagation();
e|event.preventDefault();
（2）利用事件：
@click.stop()
@事件.prevent()
5. 修饰符 官网
（1）事件修饰符
（2）按键修饰符
（3）系统修饰符
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。模板表达式中不适合写太多逻辑，此时我们可以使用函数和计算属性（函数无法响应式）。
三、计算属性 官网
【使用计算属性的好处】
- 不想使用原数据，因为原数据可能是从库中读取出来的，但是原数据放在页面（或者模板）中不合适，想要对原数据进行修改、重新计算。处理之后再模板中使用该计算属性。
- 模板尽量少使用业务逻辑处理。当遇到需要处理的数据，此时可以使用计算属性。
1. 计算属性是一个函数，当它 所依赖的元数据变化 时，就会再次执行；
- 应用场景： 比如，当在输入框中输入数据时，希望这个数据可以影响 Model 层的变化，此时会用到 v-model 指令，接着可以把 被依赖、变化 的数据用计算属性重新计算。 这样可以根据输入的内容来修改原数据，从而影响接下来的某些变化。常用于搜索。
2. 使用
模板中使用：{{计算属性}}
computed:{计算属性1:函数:function(){return 返回值;},计算属性2:函数:function(){return 返回值;},
}
3. 案例
（1）官网例子；
（2）输入框检索
- 当在输入框中输入数据时，可以将在输入框中输入的数据检索出来。
<div id="app"><input type="text" v-model="ipt"><ul><li v-for="(val, id) in list" :key="id">{{val}}</li></ul>
</div>
<script>let vm = new Vue({el: "#app",data: {ipt: "",list: ["apple", "balana", "orange", "peat"]}})
</script>
- 此时循环中不应该是依赖原数据，而是经过计算后的数据。
//模板中修改
<li v-for="(val,id) in resultList" :key="id"></li>computed: {//计算原数据list，对list进行逻辑处理resultList: function(){let result = [];let that = this;that.list.forEach(function(val){if(val.indexOf(that.ipt) !=-1){result.push(val);}});return result;}
}
4. 计算属性 vs 方法
| 序号 | 计算属性 computed | 方法 methods |
|---|---|---|
| 1 | 计算属性是响应式的。只有所依赖的元数据发生改变，数据才会重新计算、求值，页面响应式渲染； | 大部分都是事件绑定时用到，需要调用； |
| 2 | 计算属性的性能高，适合做筛选； | 方法适合在列表渲染中使用，强制渲染执行； |
| 3 | 计算属性需要 return 返回值，且要在模板中使用。 |
四、数据监听、观测 官网 api具体使用
1. 使用
watch:{//第 1 种方式双向绑定的字段(currentVal,oldVal){ //逻辑},//第 2 种方式 将业务逻辑放到方法中双向绑定的字段:"方法名",//第 3 种方式 深度观测（所观测的数据是对象）双向绑定的字段:{handler: function (currentVal,oldVal){/*...*/},deep:true //开启深度检测},//第 4 种 在侦听开始之后被立即调用（一上来就有数据）双向绑定的字段:{handler: function (currentVal,oldVal){/*...*/},immediate:true //首次执行},
}
2. 数据观测 vs 计算属性
（1）当你想要在数据变化响应时，执行 异步操作 或开销较大的操作用 watch 比 computed 会更好。（ 在 computed 中请求数据，可能会一直重复请求 ）
（2）计算属性需要在模板中使用；
（3）数据观测和计算属性都可以响应式渲染，但方法不可以。
五、指令 + 自定义指令
1. 指令： 扩展了html语法功能，区别了普通的html属性；
（1） 比较 v-show 和 v-if
| 区别 | v-show=“布尔” | v-if=“布尔” |
|---|---|---|
| 操作对象 | 操作css | 操作dom |
| 场景 | 适合频繁切换 | 适合不频繁切换 |
| 性能 | 初始渲染消耗 | 频繁切换会有消耗 |
（2） v-model 和 v-bind
| 序号 | v-model | v-bind |
|---|---|---|
| 使用方法： | v-model = "属性" | v-bind:value="属性"、:checked="..." |
| 绑定： | 通常用在能生产数据的表单元素，如： input、radio、select等，绑定的时表单元素的 value 值； | 单向绑定，绑定一个变量。 |
| 响应： | 双向绑定时响应式的 | 非响应式。单向模拟双向：输入时把事件对象的 value 携带到方法中，方法修改 model 。@input="fn($event.value)" |
（3）v-html 和 v-text 的区别：
| 名称 | v-html | v-text |
|---|---|---|
| 区别 | 不仅可以渲染数据，而且可以解析标签 | 和{{}}渲染数据效果相同，不解析标签。 |
| 示例 | v-html=“msg”，msg=“< strong>Hello</ strong> Vue!”，结果为：Hello Vue！ | v-text=“msg”，msg=“< strong>Hello</ strong> Vue!”，结果为：< strong>Hello</ strong> Vue! |
v-html： 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
（4）v-cloak： 这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {display: none;
}
//给父元素添加
<div v-cloak>{{ message }}
</div>
（5）单向绑定模拟双向绑定
在单向绑定中，由model层 -> view层的方式： :value="..."。然后输入时把事件对象上的 value 携带到方法，方法修改model。v-on:input="fn($event, value)"
<div id="app"><input type="text" :value="msg" @input="checkIpg($event)">
</div>
<script>
let vm = new Vue({el: "#app",data: {msg: ""},methods: {checkIpg: function (e) { this.msg = e.srcElement.value;}}
})
</script>
2. 自定义指令： 指令是个函数/对象，用来操作 dom ，里面的 this，返回 window。
在vue中尽量不要操作真实DOM，因为操作真实DOM消耗性能大，而指令就是用来操作DOM的。
- 使用
（1）全局：
Vue.directive('不带v-的指令名',function(el,binding))
el ---- 使用指令的 DOM 元素
binding ---- 是个对象，含有传入的参数(binding.value)
（2）局部
directives:{不带v-的指令名: function(el,binding){}
}
（3） 指令是个函数，也可以是个对象（此时有自定义指令的钩子函数）。
（4）使用
在标签中使用： v-指令名；
在标签中使用： v-指令名="'参数'"；注意引号。
-
自定义指令的钩子函数 官网
简写时的效果 = bind + update;
（1）bind: function(el, binding)：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置（此时还未获取到真实 dom ）。
（2）inserted: function(el, binding)：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
（3）update: function(el, binding)：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
（4）componentUpdated: function(el, binding)：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
（5）unbind: function(el, binding)：只调用一次，指令与元素解绑时调用。 -
案例
（1）自定义指令 给指定元素添加背景色：
<!---- 全局---- 要放在new实例的上面 ---->
<div id="app1"><p v-red>app1自定义指令-不传参数</p><p v-color="'green'">app1自定义指令-传参数</p>
</div>
<div id="app2"><p v-red>app2自定义指令-不传参数</p><p v-color="'green'">app2自定义指令-传参数</p>
</div><script>Vue.directive('red', (el, binding)=>{el.style.background = "red";});Vue.directive('color', (el, binding)=>{el.style.background = binding.value || 'red';});let vm = new Vue({el: "#app1"});let vm2 = new Vue({el: "#app2"});
</script><!---- 局部 ---->
<script>let vm = new Vue({el: "#app1",directives: {red: function(el, binding){console.log(el,binding);el.style.background = "red";},color: function(el, binding){console.log(el,binding);el.style.background = binding.value;}}});
</script>
注意： 指令在模板中使用，传参时参数还要用 单引号 引起来，否则会报错。报错信息如下：
- 输入框自动聚焦
<div id="app"><input type="text" v-focus>
</div>
<script>let vm = new Vue({el: "#app",directives: {focus: {inserted: function(el, binding){el.focus();}}}})
</script>
六、过滤器 官网
1. 全局（）：
（1）直接在 main.js 文件中写：Vue.filter('过滤器名称',函数(要过滤的元数据,参数))；
（2）新建一个 filters 文件夹，并在该文件夹下新建 index.js 文件，在 main.js 中注册：import 'filters文件夹所在位置'
2. 局部：
（1）不带参数：
filters:{过滤器名称(){//...return ...}
}
（2）带参数：
filters:{过滤器名称(要过滤的元数据,参数) {//...return ...}
}
3. 使用：
{{数据名 | 过滤器名(参数1,参数2)}}
v-xxx="数据名 | 过滤器名(参数1,参数2)"
:属性="数据名 | 过滤器名(参数1,参数2)"
4. 示例：
上一篇： Vue笔记（一）基本使用、数据检测
下一篇： vue笔记（三）生命周期、组件（嵌套）、数据传递
