指定被挂载元素

el 选项指定 Vue 实例的挂载目标，属性值仅限于 CSS 选择器或者 DOM 节点对象
$mount 挂载实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let vm = new Vue({
	// 选择器
	el:'#app', 

	// HTMLElement
	el: document.getElementById('app'), 
	
	data(){
		return {
			something...
		}
	}
})

//$mount 挂载实例
let handleMount = function(){
	vm.$mount('#app')
}

字符串模板

template 选项

1
2
3
4
let vm = new Vue({
	el:'#app',
	template: '<div>some template</div>'
})

渲染函数

渲染函数（render）用于渲染视图，提供回调方法 createElement

选项的优先级

render > template > el

过滤器

双括号插值绑定中，“|”分割表达式： msg | filter1 | filter2 

1
2
3
4
5
6
7
8
9
10
msg: 'Test#%%for%#%Filter.'

filters:{
	filter1 (val){
		return val.replace(/#/g, ' ')
	},
	filter2 (val){
		return val.replace(/%/g, '')
	}
}

自定义指令

自定义指令被申明在 directives 选项中

钩子函数

  • bind
  • inserted
  • update
  • componentUpdated
  • unbind

钩子函数接受参数

  • el
  • binding

binding 包含属性

  • name
  • value
  • oldValue 仅在 update 时使用
  • expression
  • arg
  • modifiers
  • vnode
  • oldNode 仅在 update 时使用
1
2
3
<p v-some.upper>{{title}}</p>
<p v-some.lower>{{title}}</p>
<p v-style="style">{{title}}</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
directives:{
	style:{
		bind (el, binding, vnode){
			//doSomeThing...
		},
		update (el, binding, vnode, oldVnode){
			//doSomeThing...
		}
	},
	some (el, binding){
		let text = el.innerText;
		let modifiers = binding.modifiers;
		if(modifiers.upper){
			el.innerText = text.toUpperCase();
		}
		if(modifiers.lower){
			el.innerText = text.toLowerCase();
		}
	}
}

组件的注册

components 选项用于为组件注册从外部引入的组件，子组件并非全局定义，因此不可以直接在父组件作用域内使用，常用场景引入第三方库组件和自定义组件等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let eTitle = {
	name: 'eTitle',
	template:'<p>title</p>'
}

let eMotto = {
	name: 'eMotto',
	template:'<p>motto</p>'
}

let vm = new Vue({
	el:'#app',
	components:{eTitle, eMotto}
})

混入

mixins

混入Vue实例的方法（局部混入、全局混入）

冲突默认策略：

  • data： 合并，优先采用组件的数据
  • mounted 等钩子函数： 混合为数组，全部调用，优先调用 mixins
  • methods/components/directives等： 混为同一对象，优先采用组件键值对
  • watch： 混为数组，全部调用，优先调用 mixins