【VUE前进之路】精细了解vue指令和非单文件组件的使用

作者简介：一名前端萌新，前来进行VUE的前进之路
个人主页：大熊李子的主页🐻

1. 常用指令

2. v-html：
1.作用：向指定节点中渲染包含htm1结构的内容。
2.与插值语法的区别：①v-html会替换掉节点中所有的内容，{{xx}}则不会。​②v- html可以识别htm1结构。
3.严重注意: ①v-htm有安全性问题②在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。③一定要在可信的内容上使用v-html
3.v-cloak指令：
1，没有值，只是一个单纯的属性，当vue实例接管后就会消失
2，作用是，当网速过慢时，不让为解析的页面展示出来，
4.v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了
2.以后数据的改变不会引起v- once所在结构的更新，可以用于优化性能。
5.v-pre指令:
1.跳过其所在节点的编译过程。
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。

2.自定义指令

2.1局部指令

new Vue({

directives:{指令名:配置对象

})

或

new Vue({
}

directives{指令名:回调函数}

}) 

2.2全局指令

Vue.directive(指令名,配置对象)或Vue.directive(指令名，回调函数)
配置对象中常用的3个回调
(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析时调用。
注意小tip
1.指令定义时不加V-，但使用时要加V-;
2.指令名如果是多个单词，要使用“-”命名方式不要用驼峰命名

3.生命周期

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

3.1钩子函数

1.初始化 => 创建组件 => beforeCreate created

2.挂载 =>渲染显示组件 => beforeMount mouted

3.更新 =>修改了变量=>触发视图刷新 => beforeUpdate updated

4.销毁 =>切换页面 =>会把组件对象从内存删除 => beforeDestory destoryed
常用的生命周期钩子使用场景
1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等
2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等。
3.关于销毁Vue实例销毁后借助Vue开发者工具看不到任何信息。销毁后自定义事件会失效，但原生DOM事件依然有效。
4.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

4.什么是组件

1. 如何理解组件: 用来实现局部(特定)功能效果的代码集合
2. 为何使用组件: 一个界面的功能很复杂
3. 组件的作用: 复用编码,简化项目编码,提高运行效率←
4. 使用组件的三大步骤：①定义组件(创建组件)，②注册组件，③使用组件(写组件标签 )

4.1使用组件

1.如何定义一个组件？
使用Vue，extend（options ）创建，其中options和Inew Vue(options)时传 入的那个options儿乎一样，
2. data必须写成函数，为什么?
避 免组件被复用时，数据存在引用关系。
备注:使用template 可以配置组件结构。
如何注册组件?
①局部注册:靠new Vue的时候传入components选项
②全局注册：靠Vue.component(‘组件名’,组件）

4.2组件的嵌套

    <script>
        // 创建room组件
        const room = {
            template:
                `<div>
        <h2>
        房间号{{num}}
        </h2>
        <h2>
        puwei:{{pnum}}
        </h2>
         </div>`,
            data() {
                return {
                    num: '222',
                    pnum: '8'
                }
            }
        }
        // 创建students组件
        const students = {
            template:
                `<div>
        <h2>
        姓名：{{name}}
        </h2>
        <h2>
        学号：{{studentnum}}
        </h2>
        <room></room>
         </div>`,
            data() {
                return {
                    name: '大熊',
                    studentnum: '9657'
                }
            },
            components: {
                room
            }
        }
        // 创建school组件
        const school = {
            template:
                `<div>
        <h2>
        校名：{{sname}}
        </h2>
        <h2>
        地址：{{address}}
        </h2>
        <students></students>
         </div>`,
            data() {
                return {
                    sname: 'daxionggaozhong',
                    address: 'yuhu9088号'
                }
            },
            components: {
                students
            }
        }
        const app = {
            template:
                `
        <school></school>
         </div>`,
            components: {
                school
            }
        }
        // 创建app组件
        new Vue({
            template:`<app></app>`,
            el: '#user',
            components: {
                app,
            }
        })
    </script>

4.3VueComponent（组件实例vc）

关于VueComponent
1.schoo1组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是·Vue.extend·生成的。
2.我们只需要写或, Vue解析时会帮我们J创建school组件的实例对象，即Vue帮我们执行的: new VueComponent（options）。
3.特别注意：每次调用Vue.extend,返回的都是一一个全新的VueComponent