MVVM模式
Vue.js的使用是通过构造函数来创建Vue的实例,一个Vue实例相当于一个MVVM模式中的ViewModel。
var vm = new Vue({})
可以在实例化的时候传入一个选项对象,包括数据、模板、挂载元素、生命周期钩子、方法等。
模板
el
:类型为字符串、DOM元素或函数。
template
:类型为字符串,默认会将template值替换挂载元素(el值对应的元素),并合并挂载元素和模板根节点的属性(如果属性具有唯一性,类似id,则以模板根节点为准)
将HTML从js中分离出来
<script id="tpl" type="x-template"></script>
var vm = new Vue({
el: '#app',
template: '#tpl'
})
注意:Vue.js 2.0强制要求每一个Vue.js实例需要有一个根元素
数据
Vue实例通过data
属性定义数据,这些数据可以在实例对应的模板中进行绑定并使用。
如果传入的data是一个对象,Vue实例会代理起data对象里的所有属性,而不会对传入的对象进行深层复制
1. 我们应该尽量在初始化的时候,把所有的变量都设定好 ,即使没有值,也可以用undefined或者null占位。
2. Vue.$set(“message”, “Hello,Vuejs!”); 并不推荐这种方式,这样会抛出一个异常
方法
我们可以通过methods
来定义方法,并使用v-on
指令来监听DOM事件
<div id="app">
<h1 v-on:click="alertMessage">{{message}}</h1>
</div>
var mData = {message: "Hello,Vue!"}
var vm = new Vue({
el: '#app',
data: mData,
methods: {
alertMessage: function(){
alert(this.message);
}
}
});
生命周期
beforeCreate
:实例开始初始化时同步调用
created
:在实例创建以后调用。此时已完成数据绑定、事件方法,但尚未开始DOM编译
beforeMount
:Vue2.0新增的生命周期钩子,在mounted之前运行
mounted:在编译结束时调用,此时所有指令已生效,数据变化已能触发DOM更新
beforeUpdate
:Vue2.0新增生命周期钩子,在实例挂载之后,再次更新实例时会调用,此时尚未耿欣欣DOM结构
updated
:Vue2.0新增生命周期钩子,在实例挂载之后,再次更新实例并更新完DOM结构后调用
beforeDestroy
:开始销毁实例时调用,该实例仍然有效
destroyed
:在实例被销毁后调用,此所有绑定和实例指令都已经解绑,子实例也被销毁
activated
:Vue2.0新增生命周期钩子,需要配合动态组件keep-live
属性使用,在动态初始化渲染的过程中调用
deactivated
:Vue2.0新增生命周期钩子,需要配合动态组件keep-live
属性使用,在动态组件移出的过程中调用