vueのライフサイクルフック関数とカスタム命令フック関数
14585 ワード
vueのライフサイクルフック関数とカスタム命令フック関数 vue実行中にライフサイクルフック関数 が自動的に呼び出されます.命令フック関数は、すべての合法的なjs式 を受け入れることができる.ページ初期化後の関数は、次の順序で を実行する.
<title>Documenttitle>
<script src="Js/vue.js">script>
<div id="app">
<input v-hello v-model="msg"/>
div>
<script>
Vue.directive('hello',{
bind:function(el){
console.log("bind :"+el.parentNode)
console.log(" bind ")
},
inserted:function(el,binding,vnode){
console.log("inserted :"+el.parentNode)
console.log(" inserted ");
},
update:function(el){
console.log(" update ")
},
componentUpdated:function(el){
console.log(" componentUpdated ")
},
unbind:function(el){
console.log(" unbind ")
}
})
new Vue({
el:"#app",
data:{
msg:""
},
beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log("created")
},
beforeMount(){
console.log("beforeMount")
},
mounted(){
console.log("mounted")
},
beforeUpdate(){
console.log("BeforeUpdate")
},
updated(){
console.log("updated")
},
beforeDestroy(){
console.log("beforeDestroy")
},
destroyed(){
console.log("destroyed")
}
})beforeCreate //el data
created // data ，el
beforeMount // el data
"bind :"null //bind ， null
bind
"inserted :","app"><input>div> //inserted ，
inserted
mounted //vue ， el DOM ， DOM
- :
BeforeUpdate // ， DOM 。 ， 。
update
componentUpdated
updated
5. フック パラメータbind(el, binding, vnode)
inserted(el, binding, vnode)
update(el, binding, vnode, oldVnode)
componentUpdated(el, binding, vnode, oldVnode)
unbind(el, binding, vnode)
6. フック パラメータの binding ，
name: ， v-
value: ， v-hello="1+1" ， 2
oldValue: ， update componentUpdated
expression: , v-hello = "1 + 1" ， "1 + 1"
arg： ， 。 v-hello:message ， "message"
modifiers： 。 v-hello.foo.bar ， {foo:true, bar:true}