Vue.js前端开发笔记--Vue.js基础特性(1)

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);
    }
  }
});

生命周期

Vue.js生命周期
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 属性使用，在动态组件移出的过程中调用