一、过滤器
1、简介：在vue对象内自定义的，用于控制数据输出。
2、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <div>{{name|upper}}</div> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: { name: 'tom' }, filters: { upper: function (x) { // 定义过滤器 return x.toUpperCase() // 返回过滤结果 } } }) </script> </body> </html>
3、全局过滤器，在实例化vue对象之前，可以用vue的类方法：Vue.filter(全局过滤器名, function(形参){return}。
二、计算属性
1、简介：将data属性中的数据进过计算后输出。
2、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <div>第一个数：<input type="text" v-model="num1"></div> <div>第二个数：<input type="text" v-model="num2"></div> <div>结果：<input type="text" v-model="sum" disabled></div> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: { num1: 0, num2: 0 }, computed: { sum: function () { return Number(this.num1) + Number(this.num2) } } }) </script> </body> </html>
三、监听属性
1、简介：给一个数据绑定监听属性，一旦该数据发生变化，捕获其变化前后的值，并按照定义好的方法输出。
2、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <div>修改前：{{old_num}}</div> <div>修改后：{{new_num}}</div> <input type="button" @click="num++"> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: { num: 0, old_num: null, new_num: null }, watch: { num: function (old_v, new_v) { this.old_num = old_v this.new_num = new_v } } }) </script> </body> </html>
四、vue对象生命周期与钩子函数
1、生命周期：vue对象从初始化创建到销毁，会经过若干个阶段，这些阶段合起来就是生命周期。
2、钩子函数：在生命周期的各个阶段的固定节点，有内置的的函数，可以自定义这些函数的输出格式。
3、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: {}, beforeCreate: function () { }, // vue对象即将创建 created: function () { }, // vue对象创建完成，已经绑定好标签 beforeMount: function () { }, // 准备同步data数据 mounted: function () { }, // data数据已同步到页面 beforeUpdate: function () { }, // 某个data数据即将更新 updated: function () { }, // data数据的更新结果已同步到页面 beforeDestroy() { }, // vue对象即将销毁 destroyed() { } // vue对象已销毁 }); </script> </body> </html>
五、事件冒泡
1、定义：父子标签的事件响应区域重叠导致的连锁触发。
2、坏处：可能会发生功能或数据错乱。
3、好处：正确使用这个机制，可以实现事件委托，提高性能。
4、阻止事件冒泡，实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <div style=" 100px; height: 100px; border: red 5px solid" @click="alert(1111)"> <div style=" 30px; height: 30px; border: red 5px solid" @click.stop="alert(2222)"></div> </div> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: {}, }) </script> </body> </html>
5、事件委托，实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <div style=" 150px; height: 150px; border: red 5px solid" @click="func1"> <div style=" 30px; height: 30px; border: red 5px solid">222</div> <div style=" 30px; height: 30px; border: red 5px solid">333</div> <div style=" 30px; height: 30px; border: red 5px solid">444</div> </div> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: {}, methods: { func1: function (tri) { var self = tri.target // 获取原始触发标签 alert(self.innerText) } } }) </script> </body> </html>
六、默认事件
1、定义：某些标签如果触发了一个事件后会额外执行默认的响应，如button按钮的默认刷新页面。
2、阻止默认事件，实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <form action=""> <input type="text"> <button @click.prevent="alert(11111)">提交</button> </form> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: {}, }) </script> </body> </html>
3、阻止冒泡事件和阻止默认事件的方法可以链式使用。