指令、修饰符

指令：

以 v- 开头的就是指令

指令语法：

v- 指令名:参数 = 值 eg. v-on:click = add

• 如果值里没有特殊字符，则可以不叫引号
• 有些指令没有参数和值，如 v-pre (不被编译)
• 有些指令没有值，如 v-on:click.prevent

自定义指令:

声明一个全局指令

// Vue.directive('x',directiveOptions) 任何组件里用 v-x
Vue.directive('x',{
    inserted:function(el){
        el.addEventListener('click',()=>{console.log('x')})
    }
})

声明一个局部指令

new Vue ({
    ...,
    directives:{
        'x':directiveOptions
    }
}) //这时v-x只能在该实例中使用

directiveOptions

五个函数属性

bind(el,info,vnode,oldVnode) -- 类似 created
inserted(参数同上) -- 类似 mounted
update(参数同上) -- 类似 update
unbind(参数同上) -- 类似 destroyed

v-on2 实现一个简化版的 v-on

new Vue({
    directives:{
        on2:{
            inserted(el,info){
                el.addEventListener(info.arg,info.value)
            },
            unbind(el,info){
                el.removeEventListener(info.arg,info.value)
            }
        }
    }
})

指令的作用：

• 用于DOM操作
  Vue实例/组件用于数据绑定、事件监听、DOM更新（监听器更新）
  Vue指令主要目的就是原生DOM操作（通过DOM API 进行操作）
• 减少重复
  如果某个DOM操作比较经常使用，就可以封装成指令
  如果某个DOM操作比较复杂，也可以封装成指令

常用修饰符：

• @click.stop = "XXX" // 阻止事件传播/冒泡
• @click.prevent = "XXX" // 阻止默认动作
• @keypress.enter = "XXX" // 键盘按下enter事件
• :money.sync = "total" // 语法糖见下文

父子组件传值规则：

1. 组件不能修改props外部数据。
2. $emit 可以触发事件，并传参。
3. emit 的参数。

App.vue

Child.vue

.sync 修饰符：

一个编译时的语法糖。它被扩展为一个自动更新父组件属性的 v-on 监听器
即 等价于