嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信号: yk2012yk2012，微信公众号：ykyk2012]

「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战 (opens new window)」

今天我们主要来学习Vue中的指令，除了那些内置指令，我们也可以自定义一些指令~

# 1. 常用内置指令

v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定

v-text : 更新元素的 textContent

作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，则不会。

v-html : 更新元素的 innerHTML

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别： (1). v-html会替换掉节点中所有的内容，则不会。 (2). v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！ (1). 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 (2). 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-once指令：

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令：

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

ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出的问题。

[v-clock] {
	display: none;
}

<body>
    <div id="demo">
        <p ref="content">baidu.com</p>
        <button @click="hint">提示</button>
        <p v-cloak>{{msg}}</p>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#demo",
            data: {
                msg: "YK菌"
            },
            methods: {
                hint(){
                    alert(this.$refs.content.textContent);
                }
            }
        })
    </script>
</body>

在这里插入图片描述

# 2. 自定义指令

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

# 2.1 定义语法

(1) 局部指令

new Vue({
    directives:{指令名:配置对象}	
})

或

new Vue({
    directives{指令名:回调函数}
})

例子

directives : {
    'my-directive' : {
        bind (el, binding) {
            el.innerHTML = binding.value.toupperCase()
        }
    }
}

(2) 全局指令

Vue.directive(指令名,配置对象)

或

Vue.directive(指令名,回调函数)

例子

Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
})

# 2.2 配置对象中常用的3个回调

bind：指令与元素成功绑定时调用。
inserted：指令所在元素被插入页面时调用。
update：指令所在模板结构被重新解析时调用。

# 2.3 备注

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

# 2.4 使用指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>自定义指令</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">
            <h2>{{name}}</h2>
            <h2>当前的n值是：<span v-text="n"></span> </h2>
            <!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
            <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
            <button @click="n++">点我n+1</button>
            <hr/>
            <input type="text" v-fbind:value="n">
        </div>
    </body>
	
    <script type="text/javascript">
        Vue.config.productionTip = false

        //定义全局指令
        /* Vue.directive('fbind',{
            //指令与元素成功绑定时（一上来）
            bind(element,binding){
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value = binding.value
            }
        }) */

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷',
                n:1
            },
            directives:{
                //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
                /* 'big-number'(element,binding){
                        // console.log('big')
                        element.innerText = binding.value * 10
                    }, */
                big(element,binding){
                        console.log('big',this) //注意此处的this是window
                        // console.log('big')
                        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>

在这里插入图片描述

最后，欢迎关注我的专栏，和YK菌做好朋友

过滤器组件