1. vue内置指令
- 1-1. v-text
- 1-2. v-html
- 1-3. v-pre
- 1-4. v-cloak
- 1-5. v-once
- 1-6. v-for
- 1-7. v-if 和 v-else 和 v-if-else
- 1-8. v-show
- 1-9. v-model
- - 1-9-1. 表单上使用v-model
  - 1-9-2. 组件上使用v-model
  - 1-9-3. 使用.sync修饰符实现v-model等效
- 1-10. v-bind
- 1-11. v-on
- 1-12. v-slot
- - 1-12-1. 匿名插槽
  - 1-12-2. 具名插槽
  - 1-12-3. 作用域插槽
2. 自定义指令
- 2-1. 全局自定义指令
- 2-2. 局部自定义指令
- 2-3. 动态参数和简写

Vue.js指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。我们可以将指令看作特殊的HTML特性，作用是：当表达式的值改变时，将其产生的连带影响，响应式地作用于绑定的DOM。

1. vue内置指令

内置指令指的就是Vue.js自带的指令，开箱即用，一共有14个：

内容渲染指令
- v-text
- v-html
- v-pre
- v-cloak
- v-once
条件渲染指令
- v-for
- v-if
- v-else
- v-else-if
- v-show
属性绑定指令
- v-model
- v-bind
- v-on
插槽指令
- v-slot

1-1. v-text

该指令的作用是更新DOM元素的文本内容，使用率很低，一般都是用双花括号来代替了，可以忽略

语法如下：

<template><div><span v-text="msg"></span></div>
</template><script>
export default {name: "home",data() {return {msg: '我是一个文本信息'}}
}
</script>

1-2. v-html

该指令的作用是更新DOM元素的innerHTML，内容按普通HTML插入，用处挺多的，比如渲染字符串html，动态插入元素等。（滥用可能会引起XSS攻击，比如用户提交"<a href="https://有害网站">xxx</a>"，会被渲染成html标签）

语法如下：

<template><div><div v-html="span"></div></div>
</template><script>
export default {name: "home",data() {return {span: '<div><span>我是span</span></div>'}}
}
</script>

1-3. v-pre

该指令不需要表达式，作用是跳过绑定了这个指令的元素和它的子元素的编译过程。跳过大量没有指令的节点会加快编译，但是绑定了后，会直接显示双花括号{{ xxx }}，按需使用。

1-4. v-cloak

该指令不需要表达式。这个指令会保持在dom元素上，直到其关联的实例结束编译才失效。作用是配合css选择器[v-cloak]，来实现隐藏未编译完成的元素，直到实例准备完毕。

语法如下：

<template><div><p v-cloak>{{ text }}</p></div>
</template><script>
export default {name: "home",data() {return {text: '这是一段text文本'}}
}
</script><style scoped>
[v-cloak] {display: none;
}
</style>

1-5. v-once

该指令不需要表达式，作用是只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

例子如下：

<template><div class="app"><h1 v-once>{{ time }}</h1></div>
</template><script>
export default {name: 'home',data(){return {time: new Date().getTime()}},mounted() {setInterval(() => {this.time = new Date().getTime()}, 1000)}
}
</script>

因为h1标签带上了v-once指令，所以只渲染了一次，后续计时器不停修改值，也不会再渲染，显示的时间戳也就始终停在第一次。

1-6. v-for

基于源数据，多次渲染元素或模板块。数据源可以是string、array、object、number、Iterable(有迭代接口的值)。一般v-for会搭配内置属性key使用，避免渲染出现问题。这也是一个经典面试题，具体原因可以看：传送门1，传送门2

例子如下：

<template><div class="app"><!-- 例1 --><h1 v-for="(item, index) in obj" :key="index">{{item}}</h1><!-- 例2 --><h1 v-for="item in 10" :key="item">{{item}}</h1><!-- 例3 --><div v-for="item in arr" :key="item"><span>姓名：{{item.name}}</span><span>年龄：{{item.age}}</span></div></div>
</template><script>
export default {name: 'home',data(){return {obj: {a: 100,b: 200,c: 300},arr: [{ name: 'x', age: 10 },{ name: 'xx', age: 11 },{ name: 'xxx', age: 12 }]}}
}
</script>

1-7. v-if 和 v-else 和 v-if-else

根据表达式之真假值来渲染元素。在切换时绑定该指令的元素/组件会被销毁并重建。如果是绑定在template标签上，将提出template的内容作为条件块。

当和 v-for 一起使用时，v-for 的优先级比 v-if 更高

该指令可触发组件过渡效果

例子如下：

<template><div class="app"><h1 v-if="num < 2">num小于2</h1><h2 v-else-if="num <= 5">num小于等于5</h2><h3 v-else>num大于5</h3></div>
</template><script>
export default {name: 'home',data(){return {num: Math.round(Math.random() * 10)}}
}
</script>

1-8. v-show

根据表达式之真假值，切换元素的CSS display属性，当值为false时，display为none。

该指令可触发组件过渡效果

例子如下：

<template><div class="app"><h1 v-show="num < 5">我是H1</h1></div>
</template><script>
export default {name: 'home',data(){return {num: 0}},mounted() {setInterval(() => {this.num = Math.round(Math.random() * 10)}, 1000)}
}
</script>

1-9. v-model

在表单控件或者组件上创建双向绑定的值，本质上来说，它是一个语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。比如：v-model="foo"，等价于 :value="foo"加上@input="foo = $event"的便捷写法。

在大部分情况下，以下两种写法是等价的：

<input v-model="name" /><input :value="name" @input="name = $event" />

拥有以下修饰符：

.lazy：取代 input 监听 change 事件
.number：输入字符串转为有效的数字
.trim：过滤首尾空格

1-9-1. 表单上使用v-model

<template><div class="app"><input type="text" v-model="text"></div>
</template><script>
export default {name: 'home',data(){return {text: ''}}
}
</script>

1-9-2. 组件上使用v-model

父组件

<template><div><h1>{{ total }}</h1><hello-world v-model="total" @input="handleInput" /></div>
</template><script>
import helloWorld from '@/components/HelloWorld'export default {name:'home',components:{helloWorld},data(){return {total: 0}},methods: {handleInput(v) {this.total = v}}
}
</script>

子组件（子组件接收的props值字段必须是value）

<template><div class="app"><button @click="handleChange">增加</button></div>
</template><script>
export default {name: 'holle',props: ['value'],methods: {handleChange() {this.$emit('input', this.value + 1)}}
}
</script>

1-9-3. 使用.sync修饰符实现v-model等效

父组件

<template><div><h1>{{ total }}, {{ age }}</h1><hello-world :a.sync="total" :b.sync="age" @input="handleInput" /></div>
</template><script>
import helloWorld from '@/components/HelloWorld'export default {name:'home',components:{helloWorld},data(){return {total: 0,age: 0}},methods: {handleInput(v1, v2) {this.total = v1this.age = v2}}
}
</script>

子组件

<template><div class="app"><button @click="handleChange">增加</button></div>
</template><script>
export default {name: 'holle',props: ['a', 'b'],methods: {handleChange() {this.$emit('input', this.a + 1, this.b + 2)}}
}
</script>

1-10. v-bind

动态的绑定一个或多个属性到组件上，可以绑定class、style等任意值。可以简写为:。拥有以下修饰符：

.sync：语法糖，扩展成一个更新父组件绑定值的 v-on 侦听器
.camel：kebab-case转camelCase
.prop：作为一个DOM property绑定而不是作为attribute绑定，通过自定义属性存储变量，避免暴露数据。防止污染HTML结构

例子：

<template><div><h1 :class="['aaa','bbb', num < 100 ? 'ccc':'ddd']"></h1><h2 :style="mode"></h2><input type="text" :value="msg"><img v-bind:src="data:imageSrc" /></div>
</template><script>
export default {name:'aaa',data(){return {num: 200,mode: {color: 'red',fontSize: '20px'},msg: '',imageSrc: 'https://www.baidu.com/xxx.png'}}
}
</script>

1-11. v-on

绑定事件监听器。事件类型由参数指定。可以简写为@。拥有以下修饰符：

.stop：调用 event.stopPropagation()，阻止冒泡
.prevent：调用 event.preventDefault()，阻止元素发生默认的行为
.capture：添加事件侦听器时使用 capture 捕获模式
.self：事件从侦听器绑定的元素本身触发时才触发回调
.keyCode：当事件是从特定键触发时才触发回调
.native：监听组件根元素的原生事件
.once：只触发一次回调

<button v-on:click="add"></button>
// 动态事件
<button @[event]="change"></button>
// 事件对象
<button @click="add('hello', $event)"></button>
// 按键事件
<input @keyup.enter="onEnter" />
// 按键代码
<input @keyup.13="onEnter" />

1-12. v-slot

slot，也称插槽，是组件的一块HTML模版，这块模版由父组件提供。可以说是子组件暴露的一个让父组件传入自定义内容的接口，来实现内容分发。一般都写在template标签上，可以简写为#。

1-12-1. 匿名插槽

匿名插槽用slot标签来确定渲染的位置，里面可以放置父组件没传内容时的默认内容，一个组件里，匿名插槽只能有一个。slot="default"可以忽略不写。

父组件

<template><div><aaaChildren></aaaChildren><aaaChildren><h1>我是父组件的内容</h1></aaaChildren></div>
</template><script>
import aaaChildren from './children/index.vue'export default {name:'aaa',components:{aaaChildren}
}
</script>

子组件

<template><div class="aaa_children"><slot><h1>我是默认内容</h1></slot></div>
</template><script>export default {name:'aaaChildren'}
</script>

1-12-2. 具名插槽

在slot标签上加入name属性，使得父级可以将内容插入对应的位置中。具名插槽可以有很多个，使用的时候需要带上名字做区分。

父组件

<template><div><aaaChildren><template #text>111</template><template #footer>222</template></aaaChildren></div>
</template><script>
import aaaChildren from './children/index.vue'export default {name:'aaa',components:{aaaChildren}
}
</script>

子组件

<template><div class="aaa_children"><slot name="text"><h1>我是text插槽</h1></slot><div><slot name="footer"><h2>我是footer插槽</h2></slot></div></div>
</template><script>
export default {name: 'aaaChildren'
}
</script>

1-12-3. 作用域插槽

作用域插槽在slot上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件slot-scope接受的对象上。绑定时用的key，就是父组件获取数据的键。

父组件

<template><div><aaaChildren><template #default="scope"><h1>{{ scope.info.age }}</h1></template><template #text="scope"><h2>{{ scope.data }}</h2></template></aaaChildren></div>
</template><script>
import aaaChildren from './children/index.vue'export default {name:'aaa',components:{aaaChildren}
}
</script>

子组件

<template><div class="aaa_children"><slot :info="user"></slot><slot name="text" :data="name"></slot></div>
</template><script>export default {name:'aaaChildren',props:[],components:{},data(){return {user: {age: 18,name: '小明'},name: '卡卡罗特'}}}
</script>

2. 自定义指令

自定义指令。是Vue暴漏了自定义指令的API给我们，让我们除了使用内置指令外，我们还可以自己定义指令（比如：复制粘贴指令，图片懒加载指令，防抖指令等等），定义好后和内置指令的方式非常类似。它可以有全局的和局部的两种。指令也有自己的钩子函数，如下：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用

以上钩子函数都有4个参数，如下：

el：指令所绑定的元素，可以用来直接操作 DOM
binding：一个对象，包含这些属性
- name：指令名，不包括 v- 前缀
- value：指令的绑定值，例如：v-bold=“1 + 1” 中，绑定值为 2
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用
- expression：字符串形式的指令表达式。例如 v-bold=“1 + 1” 中，表达式为 “1 + 1”
- arg：传给指令的参数，可选。例如 v-bold:foo 中，参数为 “foo”
- modifiers：一个包含修饰符的对象。例如：v-bold.foo.bar 中，修饰符对象为 { foo: true, bar: true }
vnode：Vue 编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

2-1. 全局自定义指令

通过Vue实例身上的directive() API注册一个全局自定义指令。例子如下：

首先在src文件夹下创建一个directive文件夹，里面创建一个index.js文件，写入以下代码

/*** 安装指令* @param Vue vue实例*/
export default function installDirective(Vue) {// 粗体指令Vue.directive('bold', {inserted(el) {el.style.fontWeight = 'bold'}})
}

然后在main.js里，引入directive，然后使用Vue.use安装指令

import Vue from 'vue'
import App from './App.vue'
import initDirective from '@/directive'Vue.use(initDirective)new Vue({render: h => h(App),
}).$mount('#app')

使用如下：

<template><div v-bold>123</div>
</template>

2-2. 局部自定义指令

组件中也接受一个directives的选项，在组件中定义的自定义指令，就是局部自定义指令，其参数和全局指令一致。例子如下：

<template><div v-bold>123</div>
</template><script>
export default {name: 'aaaChildren',directives: {bold: {inserted: function (el) {el.style.fontWeight = 'bold'}}}
}
</script>

2-3. 动态参数和简写

指令的参数可以是动态，这样可以灵活运用，例子如下，可以动态修改高度的指令：

注册指令：

/*** 安装指令* @param Vue vue实例*/
export default function initDirective(Vue) {// 简写 在bind和update时触发相同行为Vue.directive('height', (el, binding) => {el.style.backgroundColor = 'skyblue'el.style.height = `${binding.value}px`})
}

使用指令：

<template><div><button @click="addHeight">点击增高</button><div v-height="h"></div></div>
</template><script>
export default {name:'aaa',data(){return {h: 100}},methods: {addHeight() {this.h += 2}}
}
</script>

如果看了觉得有帮助的，我是@上进的鹏多多，欢迎点赞关注评论；

往期文章

Vue2全家桶+Element搭建的PC端在线音乐网站
vue3+element-plus配置cdn
助你上手Vue3全家桶之Vue3教程
助你上手Vue3全家桶之VueX4教程
助你上手Vue3全家桶之Vue-Router4教程
超详细！Vue的九种通信方式
超详细！Vuex手把手教程
使用nvm管理node.js版本以及更换npm淘宝镜像源
vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
超详细！Vue-Router手把手教程

个人主页

CSDN
GitHub
简书
博客园
掘金

vue2的指令和自定义指令相关推荐

Vue011_ 内置指令与自定义指令
内置指令与自定义指令常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签 ...
Vue中常用的内置指令及自定义指令
内置指令 v-bind [单向数据绑定] [格式:v-bind:属性名="data中定义的属性"] [简写::属性名="data中定义的属性"] <div ...
vue2入门---＞过滤器，内置指令，自定义指令
1. 过滤器 1.1 介绍过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器:Vue.filter(name,callback) 或 new Vue ...
教女朋友学习 vue中的指令及其自定义指令
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
2.0 vue内置指令与自定义指令
一.概述模板在解析之前指令是存在的,但是解析完成以后就不存在了. 1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHT ...
vue.js 四（指令和自定义指令）
官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"> ...
vue 自定义指令_vue 自定义指令
<template><div><div class="movebox"><div class="movego"> ...
【vue系列-04】vue的表单数据收集，基本指令和自定义指令
vue的表单数据收集.指令一,vue的核心属性 1,收集表单数据 1.1,收集数据案例 1.1.1,type类型的输入框 1.1.2,radio类型的单选框 1.1.3,checkbox类型的复选框 ...
Vue3（撩课学院）笔记04-高阶API-mixin混入，mixin自定义属性，全局配置mixin，自定义全局指令，自定义局部指令，自定义指令传入数据，teleport传送门
1.Mixin混入将课复用代码独立出来用于复用通过创建Mixin对象将复用代码放在Mixin对象中在根组件中添加mixins属性,通过数组来存放多个minxin对象(也就是把minin内容混入根 ...

vue2的指令和自定义指令

目录

1. vue内置指令

1-1. v-text

1-2. v-html

1-3. v-pre

1-4. v-cloak

1-5. v-once

1-6. v-for

1-7. v-if 和 v-else 和 v-if-else

1-8. v-show

1-9. v-model

1-9-1. 表单上使用v-model

1-9-2. 组件上使用v-model

1-9-3. 使用.sync修饰符实现v-model等效

1-10. v-bind

1-11. v-on

1-12. v-slot

1-12-1. 匿名插槽

1-12-2. 具名插槽

1-12-3. 作用域插槽

2. 自定义指令

2-1. 全局自定义指令

2-2. 局部自定义指令

2-3. 动态参数和简写

vue2的指令和自定义指令相关推荐

最新文章

热门文章