vuebase-6.自定义指令
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下) componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用.unbind：只调用一次，指令与元素解绑时调用。- 接下来我们来看一下钩子函数的参数 (即
el、binding、vnode和oldVnode)。
2.全局指令，全局可以调用；局部指令；只在局部作用域下有效
局部自定义指令：
<template>
<div class="animtes">
<input type="text" v-focus>
<p v-myStyle>自定义指令的样式</p>
</div>
</template>
<script>
export default {
name: "animtes",
data() {
return {
show: true,
flag:true,
flag1:true,
flag2:true
}
},
methods: {
},
directives:{
focus:{
inserted:function(el){
el.focus();
}
},
myStyle:{
inserted:function(el){
el.style.fontSize="50px";
el.style.color="blue"
}
}
}
}
</script>
<style lang="css" scoped>
/* .fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
{
opacity: 0;
} */
/* .fade-leave-active below version 2.1.8 */
/* 0的状态*/
.ve-enter,
.ve-leave-to{
opacity: 0;
}
/* 1的状态*/
.ve-enter-to,
.ve-leave{
opacity: 1;
}
/* 过渡*/
.ve-enter-active,
.ve-leave-active{
transition:opacity 0.5s;
}
.ves{
width:200px;
height:200px;
background-color:red;
text-align:center;
font-size:20px;
}
/* 0的状态*/
.ves-enter,
.ves-leave-to{
opacity: 0;
width:0;
height:0;
}
/* 1的状态*/
.ves-enter-to,
.ves-leave{
opacity: 1;
height:200px;
width:200px;
}
/* 过渡*/
.ves-enter-active,
.ves-leave-active{
transition:all 1s;
}
/* ***********************************vesf********************************/
/* 0的状态*/
.vesf-enter,
.vesf-leave-to{
}
/* 1的状态*/
.vesf-enter-to,
.vesf-leave{
}
/* 过渡*/
.vesf-enter-active{
animation:bounce-in 0.5s;
}
.vesf-leave-active{
animation:bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
</style>
全局自定义指令----------------------------------------------------------------------------------------------------------------------------------------------
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
//自定义指令
Vue.directive("focus",{
//当前的生命周期
inserted:function(el,binding){
console.log(el);
console.log(binding)
el.focus();
},
bind:function(el){
console.log("只执行一次钩子函数")
},
update:function(el){
console.log("更新")
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
data:{msg:"vue.root"},
components: { App },
template: '<App/>'
})
实例-----------------------------------------------------
<template>
<div id="app">
<img src="./assets/logo.png">
<input type="text" v-model="texts" v-focus>
<!-- <HelloWorld/> -->
<Parent />
<!-- <Music/> -->
<slotDemo>
<!-- <div>hello插槽</div>
<template slot="v1">
<div class="v1">{{slotParentmsg}}</div>
</template>
<template slot="v2">
<div class="v1">v2内容</div>
</template> -->
<div slot-scope="slotparents"><h2>{{slotparents.msgs}}</h2></div>
</slotDemo>
<animtes></animtes>
</div>
</template>
<script>
/* import HelloWorld from './components/HelloWorld' */
import Parent from './components/parent'
import Music from './components/music'
import slotDemo from './components/slotDemo'
import animtes from './components/animtes'
export default {
name: 'App',
components: {
Parent,
Music,
slotDemo,
animtes
},
data(){
return{
slotParentmsg:"插槽的动态内容",
texts:"text的内容"
}
},
methods:{
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
