1.过滤器
前台通过后台传值，要对后台传过来的变量进行特殊处理，比如根据id转成中文等；
1.1 局部过滤器
局部过滤器只针对一个Vue实例
默认将|左侧count传递给右侧方法
{{count|filterFunc}}
可以传多个参数
{{count|filterFunc("test")}}
func:function(value,test){
}
<body> <div id="app"> {{count|change('百分比')}} {{status|changeStatus}} </div> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ msg:'test', count:19, status:1 }, filters:{ change:function (value,flag) { console.log('value:',value) console.log('flag:',flag) return value+'%' }, changeStatus:function (status) { if(status==1){ return '成功' }else if(status==2){ return '失败' } } } }) </script> </body>
显示结果如图所示：
19% 成功
1.2 全局过滤器
全局过滤器可以针对所有的vue，只要引用都可以使用
Vue.filter('allNumber',function (value) { return value + '&' }) new Vue({ el:'#app', data:{ msg:'test', count:19, status:1 } }) <div id="app"> <div>{{count|allNumber}}</div> </div>
2.vue的生命周期
vue的生命周期：是指vue实例化到页面经历了哪些步骤
钩子函数：预留了几个特殊的方法
<body> <!--vue的生命周期：是指vue实例化到页面经历了哪些步骤--> <!--钩子函数：预留了几个特殊的方法--> <div id="app"> {{msg}} </div> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ msg:'' }, beforeCreate:function () { //实例化后，数据还没有初始化 console.log('beforeCreate') }, created:function () { //数据初始化后 console.log('created') }, beforeMount:function () { //未和标签进行关联前 console.log('beforeMount') }, mounted:function () { //实例和标签进行关联后 //可以用来获取后台列表数据 this.msg='获取后台列表数据' console.log('mounted') }, beforeUpdate:function () { //数据更新前 console.log('beforeUpdate') }, updated:function () { //数据更新后 console.log('updated') } }) </script> </body>
3.$refs
this.$refs.test // 获取到标签 可以理解为 document.getElementbyID 获取的是标签对象
<body> <div id="app"> <!-- 需求：点击子组件的数字，自增1,点击test按钮，父组件的值等于子组件的值相加--> <test ref="a"></test> <test ref="b"></test> <div>父组件--<span>{{count}}</span></div> <input type="button" value="test" @click="change"> </div> <script src="js/vue.js"></script> <script> Vue.component('test',{ template:'<div>子组件--<span @click="add">{{number}}</span></div>', data:function () { return{ number:0 } }, methods:{ add:function () { this.number++ } } }) new Vue({ el:'#app', data:{ count:0 }, methods:{ change:function () { //this.$refs.a = document.getElementById('a') this.count = this.$refs.a.number+this.$refs.b.number } } }) </script> </body>
4.组件（复用代码，抽象公用代码）
组件：将公用的功能抽离出来，形成组件
目的：复用代码
4.1 全局组件
<body> <div id="app"> <!-- 引用组件--> <demo></demo> <demo></demo> <demo></demo> </div> <script src="js/vue.js"></script> <script> Vue.component('demo',{ template:'<h1 @click="change">{{msg}}</h1>', data:function () { //组件中的data，必须是个方法 //如果引用了demo这个组件，就可以使用它的变量，如果是map形式的，改变了变量msg的值，其他组件的msg的值也会跟着该笔爱 //如果是data是一个方法，msg只作用域data这个方法，如果改变msg的值，其他组件的msg变量不会跟着改变 return { msg:'msg' } }, methods:{ change:function () { this.msg = 'test' } } }) new Vue({ el:'#app' }) </script> </body>
4.2 局部组件
<body> <div id="app"> <!-- 引用组件--> <demo></demo> <demo-key></demo-key> </div> <script src="js/vue.js"></script> <script> Vue.component('demo',{ template:'<h1 @click="change">{{msg}}</h1>', data:function () { //组件中的data，必须是个方法 //如果引用了demo这个组件，就可以使用它的变量，如果是map形式的，改变了变量msg的值，其他组件的msg的值也会跟着该笔爱 //如果是data是一个方法，msg只作用域data这个方法，如果改变msg的值，其他组件的msg变量不会跟着改变 return { msg:'msg' } }, methods:{ change:function () { this.msg = 'test' } } }) new Vue({ el:'#app', components:{ "demo-key":{ template:'<h1 @click="change">{{count}}</h1>', data:function () { return{ count:0 } }, methods:{ change:function () { this.count++ } } } } }) </script> </body>
4.3 is规避错误
多层标签封装为组件时，不能直接使用，要用is来规避组件渲染的错误
<body> <div id="app"> <table border="1px"> <thead> <th>id</th> </thead> <tbody> <!-- 多层标签封装为组件时，不能直接使用，要用is来规避组件渲染的错误--> <tr is="tr-demo"></tr> <!-- <tr-demo></tr-demo>--> </tbody> </table> </div> <script src="js/vue.js"></script> <script> Vue.component('tr-demo',{ template:'<tr><td>1111</td></tr>' }) new Vue({ el:'#app' }) </script> </body>