vue基本知识问题（2）（一天一个问题25）

6.vue自定义指令

钩子函数（biucu）:bind,inserted,update,componentUpdated,unbind

//bind;inserted;update;componentUpdated;unbind
Vue.directive( 'lang' , {
   bind:  function (el, binding, vnode) {
     console.log( '1 - bind' );
   },
   inserted:  function (el, binding, vnode) {
     console.log( '2 - inserted' );
   },
   update:  function (el, binding, vnode, oldVnode) {
     console.log( '3 - update' );
   },
   componentUpdated:  function (el, binding, vnode, oldVnode) {
     console.log( '4 - componentUpdated' );
   },
   unbind:  function (el, binding, vnode) {
     console.log( '5 - bind' );
   }
})
/**
钩子函数
1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用。
*/

7.v-model双向绑定的原理，自己如何取实现双向绑定

v-model是一个语法糖

<input v-model="something">
//只是一个语法糖
<input v-bind:value="someting" v-on:input="something = $event.target.value">

//相当于
<custom-input v-bind:value="something" v-on:input="something = arguements[0]"></custom-input> 

8.vue的钩子函数

beforeCreate----vue实例的挂载dom元素和数据对象data都为undefined，还未初始化
created----vue实例的data和methods方法有了，但是还不能对"dom"节点进行操作
beforeMounted----dom和data有了，但还是虚拟dom节点
mounted----挂载完毕，可进行dom操作
beforeDestroy
destroyed
beforeUpdate
updated

9.父子组件钩子函数运行顺序

beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

10.vue的路由导航

全局守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
})

组件内守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
  },
  beforeRouteUpdate (to, from, next) {
  },
  beforeRouteLeave (to, from, next) {
  }
}

beforeEach
beforeRouteEnter ;beforeRouteUpdate ;beforeRouteLeave