文章目录
一、内置指令
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 时
不积跬步无以至千里 不积小流无以成江海