局部⾃定义过滤器:关键用到的是使⽤filters属性,第⼀种和第⼆种声明⽅式都可以去实现。
Vue.component('myLi',{ template:` ` }); var App={ data(){ return{ price:0, msg:'hello filter' } }, template:` <div> <input type='number' v-model='price' /> <h3>{{price | myCurrentcy}}</h3> <h4>{{msg |myReverse }}</h4> </div> `, filters:{ // 声明过滤器 myCurrentcy:function(value){ return "¥"+value } } }; new Vue({ el:'#app', components:{ App, }, template:`<App/>` })
优点:在项目中经常使用过滤器对数据进行格式化后显示在页面上,比如日期格式转化,数值转换成状态文字等过滤器,如果在每个.vue页面都复制同一个过滤器进行使用,虽然是没问题,但是如果过滤器方法中,需要追加新的情况判断或出现Bug时就要将每个.vue内的过滤器进行修改,既费时又费力,所以为了项目维护,可以优先考虑定义全局过滤器
全局过滤器代码:
Vue.filter('myReverse',function(value){ return value.split('').reverse().join(''); });`
vue提供了侦听属性watch,可以很好的观察和侦听vue实例响应数据的变化。
基本的数据类型:
通过watch方法:方法里有(新值,旧值)用来监听 也可添加条件,当新值等于一个值时,输出其他值。*
<input type="text" v-model="msg"> <h3>{{msg}}</h3> new Vue({ el:'#app', data(){ return{ msg:'', stus:[{name:'jack'}] } }, watch:{ msg:function(newV,oldV){ console.log(newV,oldV); if(newV ==='sir'){ console.log('sir来了') } }
对于复杂的监听事件 使用stus进行深度监听*
<button @click="stus[0].name='rose'">改变 </button> <h4>{{stus[0].name}}</h4> new Vue({ el:'#app', data(){ return{ msg:'', stus:[{name:'jack'}] } }, // 监听复杂数据类型 object array 深度监听 stus:{ deep:true,//深度监听 handler:function(newV,oldV){ console.log(newV[0].name); } } }