vue笔记（二）Vue-class与style、事件、计算属性、数据监听、自定义指令、过滤器、v-cloak
vue官网
一 、class、style操作
二、事件
三、计算属性
四、数据监听、观测
五、自定义指令
六、过滤器
七、v-cloak
一 、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}"
2. style使用：
（1）:style=“数据” 数据类型：字符、对象、数组；
（2）:style="‘background:red;width:100px’"
（3）:style="[{css属性名:‘值’},{css属性名小驼峰:‘值’}]"
（4）:style="{css属性名1:‘值’,css属性名2:‘值’}"
二、事件 官网
1. 模板绑定行间事件：
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. 计算属性是一个函数，当它 所依赖的元数据变化 时，就会再次执行；
2. 使用
{{计算属性}}
computed:{
计算属性:函数:function(){
return 返回值;
}
}
3. 基础例子
4. 计算属性 vs 方法
（1）计算属性是基于它们的响应式依赖进行缓存的。 只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 原数据 还没有发生改变，多次访问 computed 中命名的计算属性名，计算属性会立即返回之前的计算结果，而不必再次执行函数。
（2）每当触发重新渲染时，调用方法将总会再次执行函数。
（3）methods： 大部分都是事件绑定时用到；computed： 不污染模板，也不修改原数据时使用，原数据发生改变，数据重新计算，页面响应式渲染。
（4）计算属性的性能高，适合做筛选；方法适合在列表渲染中使用，强制渲染执行；
（5）计算属性需要 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属性；
2. 比较 v-show 和 v-if
| 区别 | v-show=“布尔” | v-if=“布尔” |
|---|---|---|
| 操作对象 | 操作css | 操作dom |
| 场景 | 适合频繁切换 | 适合不频繁切换 |
| 性能 | 初始渲染消耗 | 频繁切换会有消耗 |
3. 自定义指令： 指令是个函数/对象，用来操作 dom ，里面的 this，返回 window
（1）全局：
Vue.directive('不带v-的指令名',function(el,binding))
el ---- 使用指令的 DOM 元素
binding ---- 是个对象，含有传入的参数(binding.value)
（2）局部
directives:{
不带v-的指令名: function(el,binding){}
}
（3）传参
在标签中使用： v-指令名="'参数'"；注意引号。
（4）使用
在标签中使用： v-指令名
（5）自定义指令的钩子函数 官网
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置（此时还未获取到真实 dom ）。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。
简写时的效果 = bind + update;
（6） demo
//全局
<h2 v-color="'red'">标题</h2>
Vue.directive('color',function(el,binding) {
el.style.background = binding.value || 'red';
})
//局部（这里演示的是需要钩子函数的情况）
directives:{
focus:{
inserted: function(el,binding){
el.focus();
}
}
}
注意： 指令在模板中使用，传参时记得要用 单引号 引起来，否则会报错。报错信息如下：
5. v-model 和 v-bind
（1）双向绑定：v-model ，通常用在能生产数据的表单元素，如： input、radio、select等，绑定的时表单元素的 value 值；
（2）单向绑定：v-bind:value="属性"、:checked="..."；
（3）单向绑定模拟双向绑定：
:value="..."，model -> view
@input="fn($event.value)"， 输入时把事件对象的 value 携带到方法中，方法修改 model 。
（4）示例：
<!-- 不传参默认参数为事件对象 -->
<input type="text" :value="ipt" @input="checkIpt($event)"/>
methods:{
checkIpt:function(e){
this.ipt = e.srcElement.value;
}
}
六、过滤器 官网
1. 全局（在 main.js 中）：
Vue.filter('过滤器名称',函数(要过滤的元数据,参数))
2. 局部：
（1）不带参数：
filters:{
过滤器名称(){
//...
return ...
}
}
（2）带参数：
filters:{
过滤器名称(要过滤的元数据,参数) {
//...
return ...
}
}
3. 使用：
{{数据名 | 过滤器名(参数1,参数2)}}
v-xxx="数据名 | 过滤器名(参数1,参数2)"
:属性="数据名 | 过滤器名(参数1,参数2)"
4. 示例：
七、v-cloak 官网
这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none;
}
//给父元素添加
<div v-cloak>
{{ message }}
</div>
下一篇——vue笔记（三）生命周期、组件（嵌套）、数据传递