内置指令

常用的

v-bind：单向绑定解析表达式，可简写 :xxx

v-model：双向数据绑定

v-for：遍历数据 / 对象 / 字符串

v-on：绑定事件监听，可简写为@

v-if：条件渲染（动态控制节点是否存在）

v-else：条件渲染（动态控制节点是否存在）

v-show：条件渲染（动态控制节点是否展示） 

v-text指令

1. 作用：向其所在的节点中渲染文本内容。

2. 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html指令

1. 作用：向指定节点中渲染包含html结构的内容。

2. 与插值语法的区别

    v-html会替换掉节点中所有的内容，{{xx}}则不会。

    v-html可以识别html结构。

3. 严重注意：v-html有安全性问题！！！

    在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

    一定要在可信的内容上使用v-html，永不要在用户提交的内容上！

v-cloak指令（没有值）

1. 本质是一个特殊属性，Vue示例创建完毕并接管容器后，会删掉v-cloak属性。

2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

<style>
  [v-cloak]{
    display: none;
  }
</style>
<h2 v-cloak></h2>

v-once指令（没有值）

1. v-once所在节点在初次动态渲染后，就是为静态内容。

2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令（没有值）

1. 跳过其所在节点的编译过程。

2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

示例：

<!-- 
  需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
  需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
 -->
<!-- 准备好一个容器 -->
<div id="root">
    <h2>当前的n值是： <span v-text="n"></span> </h2>
    <h2>放大10倍后的n值是： <span v-big="n"></span> </h2>
    <button @click="n++">点我n+1</button>
    <hr/>
    <input type="text" v-fbind>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            n: 1
        },
        directives: {
            // big函数何时被调用？1.指令与元素成功绑定时。2.指定所在的模板会被重新解析时。
            big(element, binding) {
                element.innerText = binding.value * 10;
            },
            fbind: {
                // 指令与元素成功绑定时（以上来）
                bind(element, binding) {
                    element.value = binding.value;
                },
                // 指令所在元素**入页面时
                inserted(element, binding) {
                    element.focus();
                },
                // 指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                    element.focus();  
                }
            }
        }
    })
</script>

扩展Vue中的事件修饰符

1. prevent：阻止默认事件（常用）

2. stop：阻止事件冒泡（常用）

3. once：事件只触发一次（常用）

4. capture：使用事件的捕获模式

5. self：只有event.target是当前操作的元素时才触发事件

6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<button @click.stop=""></button>