你好，{{name}}
###### 1.17.2. v-html指令：(使用的很少)
`作用：向指定节点中渲染包含html结构的内容。`
>
> 🌞🌞与插值语法的区别：
>
>
> * v-html会替换掉节点中所有的内容，{{xx}}则不会。
> * v-html可以识别html结构。
>
>
>
**严重注意：v-html有安全性问题**
* 在网站上动态渲染任意HTML是非常危险的，容易导致攻击。
* 一定要在可信的内容上使用v-html，不要用在用户提交的内容上
你好，{{name}}
###### 1.17.3. v-cloak指令（没有值）
`使用css配合v-cloak可以解决网速慢时页面渲染不出来，而展示出{{xxx}}的问题。`
{{name}}
###### 1.17.4. v-once指令
>
> 🌞🌞🌞
>
>
> * v-once所在节点在初次动态渲染后，就视为静态内容了。
> * 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
>
>
>
初始化的n值是:{{ n }}
当前的n值是:{{ n }}
点我n+1
###### 1.17.5. v-pre指令
>
> 🚩跳过其所在节点的编译过程 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
>
>
>
Vue其实很简单
当前的n值是:{{n}}
点我n+1
#### 1.18. 自定义指令
两个实例：
* 定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
* 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
**语法：**
💎局部指令：
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
💎全局指令：
`配置对象中常用的3个回调：`
* bind：指令与元素成功绑定时调用。
* inserted：指令所在元素被插入页面时调用。
* update：指令所在模板结构被重新解析时调用。
定义全局指令
局部指令：
new Vue({ el: '#root', data: { name:'尚硅谷', n:1 }, directives: { // big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。 /* 'big-number'(element,binding){ // console.log('big') element.innerText = binding.value * 10 }, */ big (element,binding){ console.log('big',this) //注意此处的this是window // console.log('big') 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 } } } })
#### 1.19. 非单文件组件
**基本使用**
`Vue中使用组件的三大步骤：`
* 定义组件(创建组件)
* 注册组件
* 使用组件(写组件标签)
**定义组件**
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，有点区别；
区别如下：
* el不要写 ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
* data必须写成函数 ——— 避免组件被复用时，数据存在引用关系。
`data必须写成函数：`
创建一个组件案例：Vue.extend() 创建
//第一步：创建school组件
const school = Vue.extend({
template:`
<div class="demo">
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
data(){
return {
schoolName:'尚硅谷',
address:'北京昌平'
}
},
methods: {
showName(){
alert(this.schoolName)
}
},
})
//第一步：创建student组件
const student = Vue.extend({
template:`
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return {
studentName:'张三',
age:18
}
}
})
//第一步：创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>你好啊！{{name}}</h2>
</div>
`,
data(){
return {
name:'Tom'
}
}
})
**注册组件**
>
> * 局部注册：靠new Vue的时候传入components选项
> * 全局注册：靠Vue.component(‘组件名’,组件)
>
>
>
###### 注意点：
`组件名：`
* 一个单词组成：
+ 第一种写法(首字母小写)：school
+ 第二种写法(首字母大写)：School
* 多个单词组成：
+ 第一种写法(kebab-case命名)：my-school
+ 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
>
> 备注：
>
>
> (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
>
>
> (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
>
>
>
###### VueComponent
* school组件本质是一个名为VueComponent的构造函数，是Vue.extend生成的。
* 我们只需要写`<school/>`或`<school></school>`，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
💎关于this指向：
>
> * 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数
> 它们的this均是【VueComponent实例对象】
> * new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】
>
>
>
* VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm
###### 内置关系
🔮`VueComponent.prototype.__proto__ === Vue.prototype`
## 最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
