VueDirectives-hook

by imys

HTML

<div id="app">
  <my-comp v-if="msg" :msg="msg"></my-comp>
  <button @click="update">更新</button>
  <button @click="uninstall">卸载</button>
  <button @click="install">安装</button>
</div>

JavaScript

Vue.directive('hello', {
  bind: function (el) {
  	console.log(el.parentNode)
    console.log('bind')
  },
  inserted: function (el) {
  	console.log(el.parentNode)
    console.log('inserted')
  },
  update: function (el) {
  	console.log(el.innerHTML)
    console.log('update')
  },
  componentUpdated: function (el) {
  	console.log(el.innerHTML)
    console.log('componentUpdated')
  },
  unbind: function (el) {
    console.log('unbind')
  }
})

var myComp = {
	template: '<h1 v-hello>{{msg}}</h1>',
  props: {
  	msg: String
  }
}

window.app = new Vue({
	el: '#app',
  data: {
  	msg: 'Hello'
  },
  components: {
  	myComp: myComp
  },
  methods: {
  	update: function() {
    	this.msg = 'Hi'
    },
    uninstall: function() {
    	this.msg = ''
    },
    install: function() {
    	this.msg = 'Hello'
    }
  }
})