一，内置指令

1.v-text

v-bind:，单向绑定解析表达式

v-model :双向数据绑定

v-for:遍历数组/对象/字符串

v-on :绑定事件监听,可简写为@

v-if :条件渲染(动态控制节点是否存存在)

v-else :条件渲染(动态控制节点是否存存在)

v-show:条件渲染(动态控制节点是否展示)

<body>
        <div class="user">
            <h4>{{name}}</h4>
            <div v-text = 'name'></div>
        </div>
        <script>
        const vm = new Vue({
            el:'.user',
            data:{
                name:'山鱼'
            }
        })
        </script>
</body>

2.v-html

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

2.与插值语法的区别:

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

(2)v- html可以识别htm1结构。

3.注意: v-htm有安全性问题

(1)如果在网站上动态渲染html，很容易收到xss攻击

(2)v-html一般只用在可信的地方使用

<body>
        <div class="user">
            <div v-html = 'name'></div>
        </div>
        <script>
        const vm = new Vue({
            el:'.user',
            data:{
                name:'<h1>我是山鱼<h1>'
            }
        })
        </script>
</body>

3.v-cloak

1，没有值，只是一个单纯的属性，当vue实例接管后就会消失

2，作用是，当网速过慢时，不让未解析的页面展示出来

<body>

    <div id='root'>
        <h2 v-cloak>{{name}}</h2>
    </div>

</body>
<script>
    new Vue({
        el: '#root',
        data: {
            name: '山鱼学院'
        }
    })
</script>

4.v-once

v-once所在节点在初次动态渲染后，就视为静态内容了(只进行一次渲染，就像是一次性用品)

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

<body>
    <div id='root'>
        <h2 v-once>初始化的n为：{{n}}</h2>
        <h2>当前的n为：{{n}}</h2>
        <button @click="n++">n+1</button>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            n: 1,
        }
    })
</script>

5.v-pre

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

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

<body>
    <div id='root'>
        <h2 v-pre>山鱼很简单</h2>
        <h2>当前的n为：{{n}}</h2>
        <button @click="n++">n+1</button>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            n: 1,
        }
    })
</script>

二，自定义指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义</title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
    需求1:定义个v-big指令， 和v-text功能类似，但会把绑定的数值放大10倍。
    需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。 
-->

<body>
    <div id='root'>
        <h2>当前的n值为：{{n}}</h2>
        <!-- <h2>n值放大10倍 <span v-big='n'></span> </h2> -->
        <h2>n值放大10倍 <span v-big-number='n'></span> </h2>
        <button @click='n++'>点我＋1</button>
        <input type="text" v-fbind:value='n'>
    </div>
</body>
<script>
    // 全局自定义指令（对象式也这么写）
    Vue.directives('big', function (element, binding) {
        console.log('big', this)//注意此处的this是window
        element.innerText = binding.value * 10;
    })
    new Vue({
        el: '#root',
        data: {
            n: 1,
        },
        directives: {
            //big函数何时会被调用? 
            //1.指令与元素成功绑定时。
            //2.指令所在的模板被重新解析时
            // 函数式
            big: function (element, binding) {
                console.log('big', this)//注意此处的this是window
                element.innerText = binding.value * 10;
            },
            'big-number': function (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;
                },
            }
        }
    })
</script>

</html>