vue——内置指令、自定义指令

最新推荐文章于 2023-02-03 20:14:49 发布

h_jQuery

最新推荐文章于 2023-02-03 20:14:49 发布

阅读量316

点赞数

本文链接：https://blog.csdn.net/h_jQuery/article/details/119871880

版权

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

Vue

86 篇文章 0 订阅

订阅专栏

es6

73 篇文章 0 订阅

订阅专栏

内置指令

前面学过的：

指令	作用
v-model	双向数据绑定
v-bind	单向绑定解析表达式，可简写为 :xxx
v-for	遍历数组/对象/字符串
v-on	绑定事件监听，可简写为@
v-if	条件渲染（动态控制节点是否存在）
v-eles	条件渲染（动态控制节点是否存在）
v-show	条件渲染（动态控制节点是否展示）
v-text	向其所在的节点插入文本内容，不解析html标签；与插值语法，v-text会替换掉节点中的内容，{{}}则不会
v-html	向指定节点中渲染包含html的内容，替换掉节点中所有的内容，{{xx}}则不会，可以识别html结构
v-cloak	本质是一个特殊属性（没有值），Vue实例创建完毕并接管容器后，会删除掉v-cloak属性，使用css配合v-cloak可以解决网速慢时，页面展示出{{xxx}}(为渲染的效果)的问题
v-once	所在节点在初次动态渲染后，就视为静态内容（不再渲染了）；过后数据的改变不会引起其所在的结构的更新，可以用于优化性能
v-pre	跳过其所在节点的编译过程，可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

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

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

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在vue实例为创建成功时，具有 v-cloak属性的标签都不会显示，在vue实例创建成功那一瞬间， v-cloak属性就会被移除掉 */
        
        [ v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="root">
        <p>{{text}}</p>
        <!--text的内容会将标签内原有的内容覆盖掉  -->
        <p v-text="text">hello</p>
        <!-- 不会解析html标签，直接输出 -->
        <p v-text="str">hello</p>
        <!-- 会解析html标签 -->
        <p v-html="str">hello</p>
        <!-- 当网速慢时，js文件未加载成功时,插值表达式里面的内容没有渲染 -->
        <p v-cloak>{{text}}</p>
        <p v-cloak>{{str}}</p>
        <!-- v-once：没有值，初次渲染过后，就视为静态内容，不会改变了 -->
        <p v-once>初始化的n值：{{n}}</p>

        <p>当前的n值：{{n}}</p>
        <button @click='n++'>n+1</button>
        <p v-pre>早上好，干饭人</p>
        <p v-pre>早上好，干饭人</p>
    </div>
    <!-- js文件放在这 -->
    <script src="../js/vue.js"></script>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            text: '早上好，打工人',
            str: '<p>hello，world</p>',
            n: 1
        }
    })
</script>

</html>

cookie

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q6WpGgFD-1629706476864)(C:\Users\ltting\AppData\Roaming\Typora\typora-user-images\image-20210823110759743.png)]

自定义指令

一、定义语法：

1.1 局部指令： new Vue({ directives:{指令名：{配置对象}}})或者new Vue({directives:{指令名(){}} })

1.2 全局指令：Vue.directive(指令名，配置对象)或Vue.directive(指令名，回调函数)

二、配置对象中常用的3个问题：

2.1 .bind：指令与元素成功绑定时调用。

2.2 .inserted：指令所在元素被插入页面时调用

2.3 .update：指令所在模板结构被重新解析时调用

三、备注：

3.1 指令定义时不加v-，但使用时要加v-；

3.2 指令名如果是多个单词，要使用kebab-case命名方式，不要用nameClass命名

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <p>当前的n值是：{{n}}</p>
        <p>放大十倍后的n：<span v-big='n'></span></p>
        <button @click="n++">n++</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>
    <div id="app">
        <input type="text" v-fbind:value="num">

    </div>
    <script>
        Vue.directive('fbind', {
            // 指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value;
            },
            // 指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus()

            },
            // 指令所在的模板被重新解析时
            updated(element, binding) {
                element.value = binding.value;
            },
        })
        new Vue({
            el: '#root',
            data: {
                n: 1
            },
            // 局部自定义指令：只能在当前vm实例中使用
            directives: {
                // 方式一
                /* big: {
                    k1:v1,
                    k2:v2,
                } */
                // big函数何时调用？：1.指令与元素成功绑定时；2.指令所在的模板被重新解析时
                // 方式二
                // 第一个参数：自定义指令所绑定的真实DOM，第二个参数是指令绑定的相关信息
                big(element, binding) {
                    // console.log(element);
                    // true，说明参数是一个真的DOM
                    // instanceof：判断谁是否是谁的实例
                    // console.log(element instanceof HTMLElement);
                    // console.log(binding);
                    element.innerText = binding.value * 10
                },
                // 用函数形式时，只有在两种情况下才会被调用，所以这个focus效果无效
                /* fbind(element, binding) {
                    element.value = binding.value;
                    element.focus()
                } */
                /* fbind: {
                    // 指令与元素成功绑定时（一上来）
                    bind(element, binding) {
                        element.value = binding.value;
                    },
                    // 指令所在元素被插入页面时
                    inserted() {
                        element.focus()

                    },
                    // 指令所在的模板被重新解析时
                    updated() {
                        element.value = binding.value;
                    },
                } */
            }
        })
        new Vue({
            el: '#app',
            data: {
                num: 5
            }
        })
    </script>
</body>

</html>

         } */
        }
    })
    new Vue({
        el: '#app',
        data: {
            num: 5
        }
    })
</script>

```

h_jQuery

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue——内置指令、自定义指令

内置指令前面学过的：指令作用v-model双向数据绑定v-bind单向绑定解析表达式，可简写为 :xxxv-for遍历数组/对象/字符串v-on绑定事件监听，可简写为@v-if条件渲染（动态控制节点是否存在）v-eles条件渲染（动态控制节点是否存在）v-show条件渲染（动态控制节点是否展示）v-text向其所在的节点插入文本内容，不解析html标签；与插值语法，v-text会替换掉节点中的内容，{{}}则不会v-
复制链接

扫一扫