插槽和生命周期指令

slot 插槽（重点）

元素作为承载分发内容的出口。

简单的说，就是向组件内部传入数据，在组件内部，使用slot标签表示传入到组件中的数据。

普通的数据用prop传递，html结构的这种数据用slot传递。

app.vue

    <Hello href="http://www.baidu.com"><i>百度</i></Hello>

解读：在app.vue中，使用Hello组件，向Hello组件传入百度数据，这个数据slot数据。

hello.vue

    <a :href="href">     
        <slot></slot>
    </a>

slot 编译作用域

变量 a 需要在 Hello 组件外部定义。

  <Hello><i>{{a}}</i></Hello>
    
    <Hello><i v-html="a"></i></Hello>

    data () {
        return { a:"<span>百度</span>" }
    }

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

slot 后备内容 （默认值）

app.vue

    <Hello></Hello>

如果使用 Hello 组件时，没有向组件内传入数据，那么组件内部的 slot 的默认值将起作用。

hello.vue

 <a>     
        <slot>默认值</slot>
    </a>

slot 具名插槽

app.vue

  <Hello>
        <template v-slot:title>标题</template>
        内容
        <template v-slot:footer>脚底</template>
    </Hello>

hello.vue

   <slot name="title"></slot>
    <slot></slot>
    <slot name="footer"></slot>

v-slot 只能添加在 template 上

slot标签没有name属性时，解析的是 v-slot:default

slot内容如果没有用template和v-slot指定名称，那么属于default

插槽 prop

作用域插槽 — 插槽 prop （里向外传递数据）

v-slot 添加在 template 上，如果写在组件上就变成独占插槽了。

app.vue

  <Hello>
        <template v-slot:default="slotProps">{{slotProps.a}}</template>
    </Hello>

解读：在 app.vue 中渲染 hello 组件，向 hello 组件中传入slot数据。

• 我们做的事情是，hello 组件内提前定义一些数据，然后希望在外面能够拿到组件内的数据使用，default="slotProps"的作用就是定义了作用域插槽，即把hello组件中定义的数据拿出来，在这个template中使用。这种特性被称为“插槽 prop”
• slotProps 获取的是组件传递过来的所有属性。

hello.vue

  <div>
        <slot name="default" a="1" b="2"></slot>
    </div>

独占默认插槽

把 template 上的 v-slot 放到组件上，表示在组件这一层获取所有 default 插槽的数据。

app.vue

  <Hello v-slot="slotProps">
        {{slotProps.a}}
    </Hello>

hello.vue

  <div>
        <slot :a="1" :b="2"></slot>
    </div>

解构插槽 Prop

app.vue

es6 解构赋值的写法

  <Hello v-slot="{a, b}">
        {{a+b}}
    </Hello>

hello.vue

 <div>
        <slot :a="1" :b="2"></slot>
    </div>

解构赋值改名

var {x:b} = {x:1} // b == 1

    <Hello v-slot="{a:c}">
        {{c}}
    </Hello>

动态插槽名

让 v-slot 后面的插槽名由字符串变为js变量。

v-slot:todo中，todo是字符串；

v-slot:[abc]中，abc是变量；

app.vue

   <Hello>
        <template v-slot:[abc]="{a}">
            任意 {{a}}
        </template>
    </Hello>
    
    data () {
        return {
            abc:"todo"  
        }
    }

hello.vue

    <slot name="todo" :a="1"></slot>

具名插槽的缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

  <template v-slot:header>
        <h1>Here might be a page title</h1>
    </template>
    <!--改为-->
    <template #header>
        <h1>Here might be a page title</h1>
    </template>

该缩写只在其有参数的时候才可用。

<template #="slotProps">
改为：
<template #default="slotProps">

组件页

<slot name="default" :a="a">默认值</slot>

生命周期 钩子函数（重点）

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

钩子函数：实例在不同阶段，自动触发的事件。

    // 创建阶段
    beforeCreate(){
        console.log("beforeCreate实例初始化之后，数据观测和事件配置还未完成时")
    },
    created(){
        console.log("created实例创建完成后立即调用")
    },
    beforeMount(){
        console.log("beforeMount在挂载开始之前被调用（挂到html上）")
    },
    mounted(){
        console.log("mounted挂载完成后被调用")
    },
    
    // 运行阶段
    beforeUpdate(){
        console.log("beforeUpdate数据更新时被调用（更新DOM前）")
    },
    updated(){
        console.log("updated数据更新导致DOM重新渲染后被调用")
    },
    
    // 销毁阶段
    beforeDestroy(){
        console.log("beforeDestroy实例销毁前被调用")
    },
    destroyed(){
        console.log("destroyed实例销毁后被调用")
    }

用的比较多的是 mounted、created、updated

$nextTick

$nextTick函数的作用是，将某段程序放到任务队列中，等到mounted函数执行完毕后，该程序会自动触发。

场景：beforeCreate时发起请求，等到mounted时，渲染响应内容。

    data(){
        return {
            arr:0
        }
    },
    beforeCreate(){
        //setTimeout(()=>{
            console.log('1 发起请求')
            axios.get('http://m.wyyijiaqin.com/goods').then(res=>{
                console.log(res.data);
                
                this.$nextTick(()=>{
                    this.arr = res.data;
                    console.log('3 数据更新')
                })
            })
        //}, 2000)
    },
    mounted(){
        console.log('2 html渲染完毕')
    }

directive 指令

全局：

  Vue.directive('focus', {
    	inserted: function (el) {
            el.focus()
        }
    })

局部：

使用：

    <input v-focus>

    data(){  return { y:1, s:true } },
    template: `
        <div>
            <button @click="s=!s">移除指令</button>
            <input v-xyz:x="y" v-model="y" v-if="s">
        </div>
    `,
    directives: {
        xyz: {
            bind() {
                console.log(`bind只调用一次，指令第一次绑定到元素时调用。
                在这里可以进行一次性的初始化设置。`)
            },
            inserted() {
                console.log(`inserted被绑定元素插入父节点时调用 
                (仅保证父节点存在，但不一定已被插入文档中)。`)
            },
            update() {
                console.log(`update所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
                指令的值可能发生了改变，也可能没有。
                但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。`)
            },
            componentUpdated() {
                console.log("componentUpdated指令所在组件的 VNode 及其子 VNode 全部更新后调用。")
            },
            unbind() {
                console.log("unbind只调用一次，指令与元素解绑时调用。")
            }
        }
    }

filter 过滤

过滤器的作用是，将数据渲染到页面上时，先将数据处理一下，把处理后的新数据渲染到页面上。

全局

{{ 2 | r(3) }}

Vue.filter('r', function (value, d) {
    return value*d
})

局部

{{ 2 | r(3) }}

new Vue({
    filters: {
        r(value, d) {
            return value*d
        }
    }
})