Vue：内置指令、自定义指令-程序员文哥

内置指令

v-bind 单向数据绑定，简写为 ":"

动态地绑定一个或多个HTML属性到Vue实例中的数据属性

<button v-bind:disabled="isDisabled">点击我</button>

v-model 双向数据绑定（一般用于表单控件）

v-model指令可以实现双向数据绑定，即将表单元素的value属性绑定到Vue实例中的数据属性，并在表单元素的值发生变化时更新Vue实例中的数据属性。

<input v-model="message" placeholder="请输入内容" />
<p>您输入的内容是：{{ message }}</p>

v-for 循环渲染（支持：数组/对象/字符串）

循环渲染一个列表或数组。它可以将每个元素的数据绑定到模板中，并动态地生成重复的DOM元素

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

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

绑定一个或多个事件监听器到HTML元素上。它可以根据触发事件的类型调用Vue实例中的方法或表达式，并将事件对象作为参数传递给方法或表达式。

<button v-on:click="handleClick">点击我</button>
<button @click="handleClick">点击我</button>

v-show 显示或隐藏（原理是css中: display控制）

<div v-show="isVisible">代码可见，页面不可见</div>

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

v-if、v-else-if和v-else指令可以根据一个表达式的值来动态地添加或删除DOM元素。它们可以实现条件渲染，即根据不同的条件显示不同的内容。

<div v-if="isFirst">第一步</div>
<div v-else-if="isSecond">第二步</div>
<div v-else>第三步</div>

v-text 将一个表达式的值作为纯文本插入到元素中

v-text指令可以将Vue实例中的数据属性动态地绑定到HTML元素的文本内容上。
它可以替代双括号语法{{ }}，并且可以避免在页面加载时出现闪烁的问题
底层如：document.createElement('div').textContent = 'Hello world!';

<div v-text="message"></div>

v-html 将一个表达式的值作为HTML插入到元素中

v-html 替换节点中所有内容（innerHTML）。
v-html可以用于渲染任意 html
v-html要注意安全性问题（XSS攻击）。

<div v-html="message"></div>

v-cloak 用于在Vue实例加载之前隐藏未编译的模板内容

v-cloak指令可以用于解决在页面加载时出现闪烁的问题。
将带有v-cloak属性的元素隐藏起来(通过css)，直到Vue实例完成了编译和渲染。

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

<div v-cloak>{{ message }}</div>

v-once 一次性地渲染元素和其子节点，不再进行更新

v-once指令可以将一个元素和它的子元素标记为静态内容，并只渲染一次。
它可以提高性能，但会导致元素失去响应式能力。

        <div>你好</div>
        <div v-once>你好</div>
        <div v-once>{{title}}</div>
        <div>{{title}}</div>

以下是四个示例的性能对比，性能用1-100表示，数字越大性能越好：

示例	描述	性能
`<div>你好</div>`	直接渲染静态文本内容，不需要根据任何动态数据进行更新	100
`<div v-once>你好</div>`	直接渲染静态文本内容，使用`v-once`指令将其标记为静态内容	95
`<div v-once>{{title}}</div>`	使用动态数据绑定来渲染元素，需要根据`title`属性进行更新	80
`<div>{{title}}</div>`	使用动态数据绑定来渲染元素，需要根据`title`属性进行更新	6

作用场景：页面标题、页脚、版权信息等不会随着用户交互而发生变化的内容

v-pre 保留元素的原始文本内容，而不进行编译

跳过 v-pre 所在节点的编译过程
利用他跳过：没有使用指令语法、没有使用插值语法节点，会加快编译

        <div v-pre>你好</div>
        <div v-pre>{{code}}</div>
        <div>{{code}}</div>

自定义指令（directives）

局部指令

new Vue({ directives:{ 指令名:配置对象 } })
new Vue({ directives:{ 指令名:回调函数 } })

    <div id="app">
        <p>
            <span v-text="number"></span>
            放大10倍：<span v-big="number"></span>
        </p>

        <p>
            <input type="text" v-text-focus:value="number">
        </p>

        <button @click="number++">修改</button>
    </div>
 
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                number: 1
            },

            //指令中的this 是 window
            directives: {
                /*
                * 将绑定的数值放大10倍
                * el:元素
                * binding:绑定对象
                */
                big(el, binding) {
                    //简写  bind
                    // 将绑定的数值放大10倍
                    el.innerHTML = binding.value * 10
                },
                focus(el, binding) {
                    //简写  bind
                    // 将绑定的数值放大10倍
                    el.value = binding.value;
                    el.focus();
                },
                //默认获取焦点
                'text-focus': {
                    //默认bind
                    bind(element, binding) {

                        // 指令与节点绑定成功时（创建元素，绑定数据，等待渲染）
                        console.log("bind")
                        element.value = binding.value;
                    },
                    inserted(element, binding) {
                        // 绑定指令的这个节点被渲染到页面上时 （渲染页面，把元素插入页面）
                        console.log("inserted")
                        element.focus();
                    },
                    update(element, binding) {
                        // 指令所在的模板被重新解析时(修改的时候触发)
                        console.log("update") 
                        element.value = binding.value;
                        element.focus();
                    }
                },
            }
        }) 
    </script>

全局指令

Vue.directive(指令名, 配置对象) 
Vue.directive(指令名, 回调函数)

    <script>
        // 定义全局指令
        Vue.directive('big', function (element, binding) {
            // 🔴注意此处的 this 是 window
            console.log('big', this);
            element.innerText = binding.value * 10;
        })

        Vue.directive('text-focus', {
            // 指令与元素成功绑定时（一上来） 
            bind(element, binding) {
                element.value = binding.value
            },
            // 指令所在元素被插入页面时 
            inserted(element, binding) {
                element.focus()
            },
            // 指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value
                element.focus()
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {
                number: 1
            }
        }) 
    </script>

钩子函数

bind：指令与元素成功绑定时调用(只调用一次，在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：指令所在模板结构被重新解析时调用
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

规则

指令定义时不加v-，但使用时要加v-;
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

Vue：内置指令、自定义指令