指令、修饰符

指令：

以 v- 开头的就是指令

<div v-text="x"></div>
<div v-html="xx"></div>

指令语法：

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

<template>
    <div class="app">
        班级人数 {{total}}
        //<Child :number="total" v-on:addPeople="total = $event"/>
        <Child :number="total" v-on:update:number="total = $event"/>//推荐用法
        <Child :money.sync="total"/> //vue封装的一个修饰符，等同于上面的语法
    </div>
</template>
<script>
    import Child from "./Child.vue"
    export default{
        data(){
            return {total:50};
        },
        components:{Child}
    }
</script>

Child.vue

<template>
    <div class="child">
        {{number}}
        //<button @click="$emit('addPeople', number+1)">
        <button @click="$emit('update:number', number+1)">//推荐用法
            来了一个插班生
        </button>
    </div>
</template>
<script>
    export default {
        props: ["number"]
    }
</script>

.sync 修饰符：

一个编译时的语法糖。它被扩展为一个自动更新父组件属性的 v-on 监听器
即<Child :number="total" v-on:update:number="total = $event"/> 等价于 <Child :money.sync="total"/>