vue-04-插槽和生命周期和指令和过滤
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
}
}
})
