Vue learning experience

一、内置指令[v-ref]

Official-document-expression:

父组件在子组件上注册的索引，便于直接访问。不需要表达式，必须提供参数ID，可以通过父组件的$ref对象访问子组件。当v-ref和v-for一起使用时，注册的值将是一个数组，包含所有的子组件，对应与绑定数组。如果v-for使用在一个对象上，注册的值将是一个对象，它包含所有的子组件，对应于绑定对象。

example：

v-ref一般而言，用于组件引用，比如：

<el-input v-ref="myinput"></el-input>

这样你可以在JS里使用this.$refs.myinput直接指向这个组件实例，并且这个值直接指向组件本身的this。比如这个组件有一个方法aaa( )，你就可以用this.$refs.myinput.aaa()直接调用这个组件的方法。

Re-expression：

在组件上添加v-ref指令，内传值为参数值，而非表达式。在父组件中可以通过document.getelement方式获取要操作的dom对象，而且可以获取此对象里的this，对象的属性以及绑定的事件等等。与v-for一起使用时，循环出一个数组或对象，具体情况看v-for循环的是什么参数。

二、内置指令[v-repeat、v-for]

My-expression：

ES5时，v-for不允许对对象做循环遍历，所以增加了v-repeat，v-repeat可循环数组及对象。ES6时，v-for也可以对对象做遍历了。

另：v-repeat可做无数据自定义变量循环，比如<ul v-repeat=" n in 10 ">{{n}}</ul>

三、内置指令[v-pre]

Official-document-expression:

添加v-pre内置指令的元素，编译时会跳过它和它的子元素，可以用来显示原始的Mustache标签。跳过大量没有指令的节点编译会加快。

四、自定义指令及钩子函数

Official-document-expression:

除了内置指令之外，Vue允许注册自定义指令。虽然代码复用和抽象的主要形式依然是组件，但是某些情况下，仍然需要对DOM元素进行底层操作，此时会用到自定义指令。一个指令对象可以提供如下几个钩子函数。

bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

updated:所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind:只调用一次，指令与元素解绑时调用。

钩子函数参数[el、binding、vnode、oldVnode]，除el其他参数只读。

若指令需要传入多个参数，可使用字面量形式。

Re-expression：

自定义指令用于对DOM元素做底层操作，语法结构如下example。钩子函数为Vue提供的用于被绑定自定义指令的元素的各个生命周期可供调用的函数。钩子函数的参数可用于获取元素，操控节点。

example:

当页面加载时，该元素获得焦点。

全局指令：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
	inserted: function (el) {
     	// 聚焦元素
     	el.focus();
	}
})

局部指令：

directives:{
	focus:{
		inserted (el) {
			el.focus();
		}
	}
}

使用<input v-focus />属性

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
//字面量形式传入参数
Vue.directive('demo', function (el, binding) {
  	console.log(binding.value.color) // => "white"
  	console.log(binding.value.text)  // => "hello!"
})

五、Vuex

Internet-expression:

Vuex 就是前端为了方便数据的操作而建立的一个” 前端数据库“。

state：数据库——共享数据

getters：取数据的API

mutations：存数据的API

actions：处理数据，若不处理就是直接mutations

getters

export function getPage(state){
	return state.ctrl.showPage;
}

mutations

[SHOW_PAGE](state){
	state.ctrl.showPage = true
}
[NEW_DATA](state，payload，id){
	const newData = {id，data:payload}
	state.meta = Object.assign({},{currentData:id})
	state.datas = Object.assign({},newData)
}

actions

export const updateData = function({dispatch，state}，data){
	const payload = data
	const id = state.meta.currentData
	if(id==='initial'){
		const id = createDataId()
		dispatch('NEW_DATA',payload,id)
	}else{
		dispatch('UPDATE_DATA',payload)
	}
}

生命周期：

deactivated

　　keep-alive组件停用时调用。

　　该钩子在服务端渲染期间不被调用。

https://www.cnblogs.com/webbest/p/6722780.html

BUG Point:

实测在进入 keepAlive: false 的组件后再重新进入 keepAlive: true 的组件时原来的状态丢失了，如果切换路由一直是 keepAlive: true 则没问题。