slot 插槽（重点）

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

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

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

app.vue

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

解读：在app.vue中，使用Hello组件，向Hello组件传入<i>百度</i>数据，这个数据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()
    }
})

局部：

directives: {
    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
        }
    }
})