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 方法
四、数据监听、观测 官网 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
(2) v-model 和 v-bind
(3)v-html 和 v-text 的区别:
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笔记(三)生命周期、组件(嵌套)、数据传递