Vue-监听使用方法和过滤器

​

前言

• 今天是自学VUE整理知识点的第四天呢，今天整理一下过滤器，watch监听的知识点~~~~
• 继续加油冲冲冲

过滤器

• 过滤器的作用:为页面中数据进行添油加醋
• 有两种: 局部过滤器 全局过滤器
• 格式：

• 1.声明过滤器
• 2.{{数据|过滤器的名字}}

局部过滤器代码

• 局部⾃定义过滤器：关键用到的是使⽤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.filter('myReverse',function(value){
      return value.split('').reverse().join('');
      
    });`      

watch监听

• 基本的数据类型

• 基本的数据类型 简单监听
• 复杂的数据类型 深度监听

简单监听

• 通过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);
            }
          }
        }