keep-alive:动态组件
用keep-alive标签包裹动态组件的时候,会缓存不活动的组件实例,就不会去执行beforeDestroy钩子函数,name动态组件就不会被销毁,
当用keep-alive包裹动态组件的时候,他也提供两个钩子函数:activated和deactivated(这两个函数只有在被keep-包裹的时候才会触发)
activated放的是一些初始化事件,而deactived是将初始化的一些事件除去(可以将created和beforeDestroy对应的替换掉)
include只有名称匹配的组件会被缓存,exclude只有名称匹配的组件不会被缓存,与include相反,默认缓存所有动态组件
<div id="app">
<button @click="type=type=='mya'?'myb':'mya'">切换</button>
<keep-alive include="mya">
<component :is="type"></component>
</keep-alive>
</div>
<script>
Vue.component("mya",{
template:"<h3>A组件</h3>",
created(){ //created钩子函数只执行一次
console.log("created...A")
},
beforeDestroy(){
console.log("beforeDestroy...A")
},
activated(){
console.log("activated...A")
},
deactivated(){
console.log("deactivated...A")
}
})
Vue.component("myb",{
template:"<h3>B组件</h3>",
created(){
console.log("created...B")
},
beforeDestroy(){
console.log("deforeDestroy...B")
},
activated(){
console.log("activated...B")
},
deactivated(){
console.log("deactivated...B")
}
})
new Vue({
el:"#app",
data:{
type:"mya"
}
})
</script>
v-focus:
案例:
<div id="app">
{{msg}}
<p v-text="msg"></p>
<p v-html="msg"></p>
<input type="text" v-focuser>
</div>
<script>
// 操作底层dom元素,例如初始化的时候让输入框获取焦点
// 内置指令 v-if、v-else、v-show、v-for、v-once、v-model、v-on、v-bind、v-text(相当于{{}})、v-html(可以解析标签)
// 全局指令:
Vue.directive("focuser",{
inserted(el){
el.focus() //自动获取焦点
}
})
//局部指令:
new Vue({
el:"#app",
data:{
msg:"<h2>Gordon</h2>"
},
// directives:{
// focuser:{
// inserted(el){
// el.focus()
// }
// }
// }
})
</script>
自定义指令钩子函数
1、案例:
bind 只调用一次,指令第一次绑定元素时调用(一般这里可以进行一次初始化设置)
inserted 绑定的元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)
update 所在组件更新时调用
componentUpdated 所在组件VNode及其子vnode全部更新后调用
unbind 只调用一次,指令与元素解绑时调用
此案例中:
页面加载时:bind、inserted
更新组件时:update、componentUpdated
卸载组件时:unbind
重新安装组件:bind、inserted
<script src="./base/vue.js"></script>
<div id="app">
<my-comp v-if="msg" :msger="msg"></my-comp>
<button @click="update">更新</button>
<button @click="uninstall">卸载</button>
<button @click="install">安装</button>
</div>
<script>
//创建自定义指令:
Vue.directive("hello",{
bind(el){
console.log("bind")
},
inserted(el){
console.log("inserted")
},
update(el){
console.log("update")
},
componentUpdated(el){
console.log("componentUpdated")
},
unbind(el){
console.log("unbind")
}
})
new Vue({
el:"#app",
data:{
msg:"gordon"
},
components:{
myComp:{
template:"<h3 v-hello>{{msger}}</h3>",
props:{
msger:String
}
}
},
methods:{
update(){
this.msg="hi"
},
uninstall(){
this.msg=""
},
install(){
this.msg="gordon"
}
}
})
</script>
2、自定义指令钩子函数的参数
el:指令所绑定的元素,可以用来直接操作 DOM。
binding:一个对象,包含以下 property:
name:指令名,不包括 v- 前缀。
value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。
arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。
modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
案例:
<script src="./base/vue.js"></script>
<div id="app">
<p v-mode="msg"></p>
</div>
<script>
Vue.directive("mode",{
bind(el,binding,vnode){
console.log(binding)
var s = JSON.stringify
el.innerHTML=
"name:" + s(binding.name) + "<br>" +
"value:" + s(binding.value) + "<br>" +
"expression:" + s(binding.expression) + "<br>"
}
})
new Vue({
el:"#app",
data:{
msg:"hello"
}
})
</script>
3、自定义钩子函数案例
<script src="./base/vue.js"></script>
<div id="app">
<div v-color="orange">orange</div>
<div v-color="pink">pink</div>
<div v-color="bl">blue</div>
{{bl}}
<button @click="bl='skyblue'">换颜色</button>
</div>
<script>
//第一种方法
// Vue.directive("color",{
// bind(el,binding){ //注意了,bind只初始化调用一次
// el.style.background = binding.value
// },
// update(el,binding){
// el.style.background = binding.value
// }
// })
//简单方法:bind 和 update 时触发相同行为
Vue.directive("color",function(el,binding){
el.style.background = binding.value
})
new Vue({
el:"#app",
data:{
orange:"orange",
pink:"pink",
bl:"blue"
}
})
</script>