首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue内置指令自定义指令

Vue中内置指令与自定义指令语法详解

2023-08-31 14:41:05 作者：你怀中的猫

这篇文章主要为大家介绍了Vue中内置指令与自定义指令语法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一、内置指令

1、v-text指令：向标签中添加文本

2、v-html指令：向指定恒点中渲染包含html结构的内容。

2-1、与插值语法的区别:

(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。

2-2、严重注意: v-html有安全性问题！！！

(1).在网站上动态演染任查HTML是非常危险的，容易导致XSS攻击。
(2).定要在可信的内容上使用v-html.永远不要用在用户提交的内容上!

3、v-cloak指令：本质是一个特殊属性。Vue实侧创建完毕并接管容器后。会制掉v-cloak属性，使用css配合v-cloak间以解决网速设时页面展示出{{xxx}}的问题

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

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

二、自定义指令

1、定义语法

(1).局部指令:

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

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

(2).全局指令:

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

Vue.directive(指令名回调两数)

2、配置对象中常用的3个回调

(1)、bind:指令与元素成功绑定时调用。

(2)、inserted:指令所在元素被插入页面时调用.

(3)、update:指令所在模板结构被重新解析时调用。

3、备注

1.指令定义时不加v-。但使用时要加v-;

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

<div id="root">
        <h1>正常值 : <span v-text="num"></span></h1>
        <h1>放大10倍 : <span v-big="num"></span></h1>
        <button @click="num++">点我num+1</button>
        <hr />
        <input type="text" v-bind:value="num" />
        <input type="text" v-fbind:value="num" />
    </div>
<script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    // 全局指令
    Vue.directive("fbind", {
        // 指令与元素成功绑定时
        bind(element, binding) {
            console.log("bind");
            element.value = binding.value;
        },
        // 指令所在元素插入页面时
        inserted(element, binding) {
            console.log("inserted");
            element.focus();
        },
        // 指令所在模板被重新解析时
        update(element, binding) {
            console.log("ipdate");
            element.value = binding.value;
        },
    });
    //创建Vue实例
    const vm = new Vue({
        //ViewModel
        el: "#root",
        data: {
            num: 1,
        },
        methods: {},
        directives: {
            // big何时会被调用？ 1、指令与元素成功绑定时；2、指令所在的模板被重新解析时
            big(element, binding) {
                element.innerText = binding.value * 10;
                console.log(element, binding.value, this);
                // !!!注意  此处的this指向 window
            },
             fbind:{
                 // 指令与元素成功绑定时
                 bind(element,binding){
                     console.log('bind');
                     element.value = binding.value;
                 },
                 // 指令所在元素插入页面时
                 inserted(element,binding){
                     console.log('inserted');
                     element.focus();
                 },
                 // 指令所在模板被重新解析时
                 update(element,binding){
                     console.log('ipdate');
                     element.value = binding.value;
                 }
             }
        },
    });
    // console.log(vm);
</script>

以上就是Vue中内置指令与自定义指令语法详解的详细内容，更多关于Vue内置指令自定义指令的资料请关注脚本之家其它相关文章！