vue的常用属性-filters、watch、computed和ref

1、过滤器

组件过滤器filters

1、作用:对当前数据添油加醋
2、语法：声明在组件内使用filters对象，返回一个函数，函数一定要有返回值
3、调用：template中调用过滤器：数据属性|过滤器名字

var Content = {
     template: `
         

         
         
{{msg|RmbData}}
         
     `,
     data(){
         return{
            msg:10
         }
     },
     filters:{
         RmbData(value){
            return '$'+value
         }
     }
 }

全局过滤器filter

语法：Vue.filter(过滤器名字,回调函数)
过滤器传参：
默认第一个参数是管道符前的数值,调用的时候不需要传进去

2、监听器watch

一次只能监听一个属性
基本数据类型-简单监听
复杂数据类型-深度监听

3、计算属性computed

可以同时监听多个属性
默认只有getter
对象返回一个函数

setter的实现

和methods比较

1、计算属性有缓存，methods 没有
2、计算属性直接绑定属性不需要调用，methods要通过事件去调用

4、获取DOM元素

作用：通过 ref 这个属性为子组件赋予一个 ID 引用，可以操作原生dom（建议少用，因为vue操作的虚拟dom ）
使用：1、template中标签通过 ref="XXX"绑定属性
2、js中通过：this.$refs.XXX调用
返回结果的两种情况：
1、如果在组件内部标签绑定ref属性，使用$refs.xxx获取到的是原生jsdom对象
2、如果是组件绑定ref属性，那么this.$refs.xxx获取的是组件对象

5、$nextTick方法

作用：$nextTick方法是在更新循环结束后执行延迟回调，在修改数据之后使用$nextTick方法可以在回调中获取更新后的DOM
动态操作DOm的时候会用到该方法
例子：