Vue指令

内置指令

v-text 指令

在其所在的节点中渲染文本内容

与插值语法的区别：

• v-text会替换掉节点中的内容，{{x}}不会
• 不如{{x}}灵活

用法，无法识别html结构：

<h1 v-text="name">你好，</h1>

data:{
	name:'dlut'
	str:'<h3>xxxxx</h3>'
}

v-html 指令

向指定的节点渲染包含html结构的内容。

与插值语法的区别：

• v-html会替换掉节点中的所有内容，{{x}}不会
• v-html可以识别html结构，并进行渲染
• 存在安全问题

用法：

<h1 v-html="name">你好，</h1>

data:{
	name:'dlut'
	str:'<h3>xxxxx</h3>'
}

v-cloak 指令

本质上是一个特殊属性，Vue实例创建完毕并接管容器后，会删除v-cloak属性。

使用css配合v-cloak可以解决网页网速慢时，展示出模板如{{x}}的问题。

如下，当首次加载时，先隐藏模板，加载到vue实例后，再显示。

<style>
	[v-cloak]{
			display:none;
	}
</style>

<div id='root'>
		<h2 v-cloak>{{name}}</h2>
</div>

v-once 指令

v-once所在的节点在初次动态渲染后，就视作为静态内容。以后数据的改变将不会引起其所在结构的更新。

如下：当前n值会一直变化，但是初始化值不会：

<h2 v-once>初始化的值为：{{n}}</h2>
<h2>当前n值为:{{n}}</h2>
<button @click="n++"></button>

v-pre 指令

在不需要渲染的标签上添加，可以增加渲染速度

自定义指令

在指令定义时不加v-, 使用时加入。

语法

• 局部指令，分为函数式和对象式：

new Vue({
	directives: {
    // 函数式,相当于封装了bind和update方法
    big(element, binding) {
			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;
				},
				componentUpdated(element, binding){
					
				}
		 }
	}
})

• 全局指令，多个vue实例都可以使用。Vue.directive(指令名, 配置对象 | 回调函数)

Vue.directive('fbind',{
		bind(){},
		inserted(){},
		update()
})

备注

• key里面出现“-”，需要用字符串的形式作为key。
• 自定义指令中的this指向window。
• 指令名如果是多个单词，使用kebab-case命名方式，而不是驼峰命名。

// 使用
<span v-f-bind = "n"></span>
// 定义
'f-bind'(element, binding) {
	
}