Vue 核心之内置指令、自定义指令

云夕々

已于 2022-11-01 10:35:58 修改

阅读量443

点赞数 1

分类专栏：内置指令自定义指令 Vue2 文章标签： vue.js 前端 javascript

于 2022-11-01 10:34:17 首次发布

本文链接：https://blog.csdn.net/k010107/article/details/127625985

版权

Vue2 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

内置指令

1 篇文章 0 订阅

订阅专栏

自定义指令

1 篇文章 0 订阅

订阅专栏

一、内置指令

复习一开始学习 Vue 的指令：

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

v-model 双向数据绑定

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

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

v-show 条件渲染（动态控制节点是否展示）

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

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

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

下面开始学习新的指令

1、v-text 指令

作用：向所在的节点中渲染文本内容

插值语法区别：v-text 会替换掉节点中的内容，{{xxx}} 不会，更加灵活

<!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>v-text指令</title>
</head>
<body>
    <div id="app">
        <div>你好,{{name}}</div>
        <div v-text="name1"></div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;//阻止开发环境提示
    new Vue({
        el:"#app",
        data:{
            name:"web前端",
            name1:"<h3>web前端</h3>"
        }
    })
</script>

2、v-html 指令

作用：向指定节点中渲染包含 html 结构的内容

插值语法区别：

1.v-html 会替换掉节点中所有的内容，{{xxx}}不会

2.v-html 可以识别 html 结构

注 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>v-html指令</title>
</head>
<body>
    <div id="app">
        <div>你好,{{name}}</div>
        <div v-html="name1"></div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;//阻止开发环境提示
    new Vue({
        el:"#app",
        data:{
            name:"web前端",
            name1:"<h3>web前端</h3>"
        }
    })
</script>

3、v-cloak 指令

v-cloak 指令（没有值）

1.是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性

2.使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}} 的问题

<!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>v-cloak指令</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 v-cloak>{{name}}</h2>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;//阻止开发环境提示
    new Vue({
        el:"#app",
        data:{
            name:"web前端"
        }
    })
</script>

4、v-once 指令

1.v-once 所在节点在初次动态渲染后，就视为静态内容了

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

<!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>v-once指令</title>
</head>
<body>
    <div id="app">
        <h2 v-once>初始化name的值是:{{name}}</h2>
        <h2>当前name的值是:{{name}}</h2>
        <button @click="name++">点击name+1</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;//阻止开发环境提示
    new Vue({
        el:"#app",
        data:{
            name:1
        }
    })
</script>

5、v-pre 指令

1.跳过 v-pre 所在节点的编译过程

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

<!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>v-pre指令</title>
</head>
<body>
    <div id="app">
        <h2 v-pre>Vue简单</h2>
        <h2>当前name的值是:{{name}}</h2>
        <button @click="name++">点击name+1</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;//阻止开发环境提示
    new Vue({
        el:"#app",
        data:{
            name:1
        }
    })
</script>

6、自定义指令

directives 里包含全局指令和局部指令

全局指令：Vue 定义全局指令的方法时需放置在 new Vue 实例之前

Vue.directive("配置对象 | 回调函数")

局部指令：

directives:{

指令名:"配置对象|回调函数"

指令名：需要定义为单词-名称，不要使用驼峰命名，多个名称连接一定加上""

使用当前指令时，定义的指令名称不要用v-，使用时需要v-

element绑定到元素上的节点

binding绑定指令后赋值的变量value

}

以上就是新学的内置指令

如有错误，请斧正！

云夕々

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 核心之内置指令、自定义指令

复习之去学的指令：v-bind、v-model、v-for、v-on、v-show、v-if、v-else-if、v-else新学指令：v-text、v-html、v-cloak、v-once、v-pre、自定义指令
复制链接

扫一扫