VUE学习（四） | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第13天（接上文） 1.16. 内置指令 1

这是我参与「第四届青训营」笔记创作活动的第13天

（接上文）

1.16. 内置指令

1.16.1. v-text指令

<div id="root"> 
    <div>你好，{{name}}</div> 
    <div v-text="name"></div> 
    <div v-text="str"></div> 
</div>

new Vue({ 
    el:'#root', 
    data:{ name:'JOJO', str:'<h3>你好啊！</h3>' } 
})

一个小小的总结
- v-bind：单向绑定解析表达式，可简写为:
- v-model：双向数据绑定
- v-for：遍历数组 / 对象 / 字符串
- v-on：绑定事件监听，可简写为@
- v-if：条件渲染（动态控制节点是否存存在）
- v-else：条件渲染（动态控制节点是否存存在）
- v-show：条件渲染 (动态控制节点是否展示)
v-text指令：
1. 作用：向其所在的节点中渲染文本内容
2. 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

1.16.2. v-html指令

v-html指令：

1. 作用：向指定节点中渲染包含html结构的内容

2. 与插值语法的区别：

    - `v-html`会替换掉节点中所有的内容，`{{xx}}`则不会
    - `v-html`可以识别`html`结构
3. 严重注意：`v-html`有安全性问题！！！

    - 在网站上动态渲染任意`HTML`是非常危险的，容易导致`XSS`攻击
    - 一定要在可信的内容上使用`v-html`，永远不要用在用户提交的内容上！！！

1.16.3. v-cloak指令

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

v-cloak指令（没有值）：

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

1.16.4. v-once指令

v-once指令：

v-once所在节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

1.16.5. v-pre指令

v-pre指令：

跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

1.17. 自定义指令

自定义指令定义语法：

局部指令：

   new Vue({ 
      directives:{指令名:配置对象} 
   })

   new Vue({ 
      directives:{指令名:回调函数} 
   })

全局指令：
1. Vue.directive(指令名,配置对象)
2. Vue.directive(指令名,回调函数) eg.

Vue.directive('fbind',{
    //指令与元素成功绑定时（一上来）
    bind(element,binding){
	element.value = binding.value
    },
    //指令所在元素被插入页面时
    inserted(element,binding){
    	element.focus()
    },
    //指令所在的模板被重新解析时
    update(element,binding){
    	element.value = binding.value
    }
})

配置对象中常用的3个回调函数：

- `bind(element,binding)`：指令与元素成功绑定时调用
- `inserted(element,binding)`：指令所在元素被插入页面时调用
- `update(element,binding)`：指令所在模板结构被重新解析时调用

备注：

指令定义时不加v-，但使用时要加v-
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

1.18. Vue生命周期

1.18.1. 引出生命周期

生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this指向是 vm 或 组件实例对象

1.18.2. 分析生命周期

1.18.3. 总结生命周期

常用的生命周期钩子：
- mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
- beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作
关于销毁Vue实例：
- 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自定义事件会失效，但原生DOM事件依然有效
- 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了