属性监听器、自定义指令

一、属性监听器

watch:{} 

它与data:{}平级。

监听器属性：必须和data里面的数据源同名。 

 <div id="app">
            <button @click="change">修改obj</button>
            <p>{{obj.age}}</p>
        </div>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    obj:{
                        age:"20"
                    }
                },
                methods:{
                    change(){
                        // this.obj.age="1111"//修改的是数据源中的属性值，页面会重新渲染，但watch不触发
                        this.obj={age:"222"}//修改的是数据源，页面会重新渲染，watch也会触发
                        
                    }
                },
                watch:{
                    obj(){
                        console.log("改变了obj,watch触发了")
                    }
                }
            })
                
            
        </script>

 this.obj.age="1111"点击结果：

 this.obj={age:"222"}点击结果：

 当然也不是不可以写obj.age，只不过在watch里加上deep:true

  watch:{
                    obj(){

                        deep:true
                        console.log("改变了obj,watch触发了")
                    }
                }

 注意：只有过滤器和属性监听器没有被劫持

 二、自定义指令

自定义指令要在directives里面写，它与data平级。

什么是指令？

在Vue中，在标签中v-xxx就是指令：directives:{xxx:{}}--------在标签上绑定v-xxx。它在Vue运行以后就具有封装好了的功能。例如：

<div v-focus>hello</div>

....

directives: {
                    focus:{
                        inserted(el){
                            el.focus()
                        }
                    }