文章目录
一、内置指令
1. v-text 指令
- 作用：向其所在的节点中渲染文本内容。
- 与插值语法的区别：
v-text会替换掉节点中的内容，{ {}}则不会。
<div id="root">
<p>Hello {
{
name}}</p>
<p v-text="name">Hello</p>
</div>
const vm = new Vue({
el: '#root',
data: function () {
return {
name: 'Vue'
}
}
})
2. v-html 指令
- 作用：向指定节点中渲染包含 html 结构的内容。
- 与插值语法的区别：
（1）v-html会替换掉节点中所有的内容，{ {xx}}则不会。
（2）v-html可以识别 html 结构。- 严重注意：
v-html有安全性问题！！
（1）在网站上动态渲染任意 HTML 是非常危险的，容易导致XXS攻击。
（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
<div id="root">
<p>v-text 不支持结构的解析</p>
<p v-text="str"></p>
<p v-html="str"></p>
</div>
const vm = new Vue({
el: '#root',
data: function () {
return {
str: '<h3>Hello vue</h3>'
}
}
})
3. v-cloak 指令（没有值）
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉
v-cloak属性。- 使用 css 配合
v-cloak可以解决网速慢时页面展示出{ {xxx}}的问题。
[v-cloak]{
display: none;
/* 标签中含有v-cloak指令的内容都隐藏 */
}
<div id="root">
<h2 v-cloak>Hello {
{
name}}</h2>
</div>
const vm = new Vue({
el: '#root',
data: {
name: 'Vue~'
}
})
4. v-once 指令
v-once所在节点在初次动态渲染后，- 以后数据的改变不会引起
v-once所在结构的更新，可用于优化性能。
<div id="root">
<h3 v-once>初始化n的值为：{
{
n}}</h3>
<h3>当前n的值为：{
{
n}}</h3>
<button @click="add">点我+1</button>
</div>
const vm = new Vue({
el: '#root',
data: function () {
return {
n: 0
}
},
methods: {
add() {
this.n++
}
},
})
5. v-pre 指令
- 跳过其所在节点的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<div id="root">
<h2 v-pre>Vue so easy!(v-pre行不会解析，写的是什么就呈现什么)</h2>
<h2 v-pre>当前的n值是：{
{
n}}</h2>
<h2>当前的n值是：{
{
n}}</h2>
<button @click="n++">点我n+1</button>
</div>
const vm = new Vue({
el: '#root',
data: {
n: 0
}
})
二、自定义指令
1. 定义语法 （局部指令）
new Vue({
directives: {
指令名: 配置对象}
})
new Vue({
directives: {
指令名: 回调函数}
})
2.定义语法（全局指令）
Vue.directive(指令名, 配置对象)
Vue.directive(指令名, 回调函数)
3. 配置对象中常见的三个回调
.bind：指令与元素成功绑定时调用。.inserted：指令所在元素被插入页面时调用。.update：指令所在模板结构被重新解析时调用。
4. 注意事项
- 指令定义时不加
v-，但使用时要加v-。- 指令名如果是多个单词，要使用
kebab-case命名方式，不要用cameCase命名。
实例
需求：
- 定义一个
v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。- 定义一个
v-fbind指令，和v-bind功能类似，但可以让其所绑定的 input 元素默认获取焦点。
<div id="root">
<h3>当前n的值是：<span v-text="n"></span></h3>
<h3>放大10倍后的n值是：<span v-big="n"></span></h3>
<button @click="n++">点我 n+1</button>
<hr/>
<input type="text" v-fbind="n">
</div>
const vm = new Vue({
el: '#root',
data: function () {
return {
n: 1
}
},
directives: {
//big函数何时会被调用？ 1.指令与元素成功绑定时。2.指令所在的模板被重新解析时。
big(element, binding) {
console.log('big', this) //注意此处的this是window
element.innerHTML = binding.value * 10
},
fbind: {
//指令与元素成功绑定时
bind(element, binding) {
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus()
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value
}
}
}
})
初始页面（会自动获取焦点）
加到 n 的值为 6 时
不积跬步无以至千里 不积小流无以成江海