实例及选项

var vm = new Vue({})

模板

选项中主要影响模板或DOM选项有el和template，属性replace和template需要一起使用。

• el：(类型为字符串，DOM元素或函数)为实例提供挂载元素。例如：el:'#app'。在初始项中指定了el，实例将立即进入变异状态。
• template:(类型为字符串)默认会将其值替换挂载元素，并合并挂载元素和模板根节点的属性，除非模板的内容有分发slot。
   若replace为false，模版的值将插入挂载元素内(vue2.0废除了这个参数)。
   如果值以 # 开始，则它用作选项符，将使用匹配元素的 innerHTML 作为模板。常用的技巧是用

  输出HTML结构

      
  This is a tel from script tag

  兄弟节点为根节点的模板形式

  数据

  vue.js实例中使用data(选项-obj)属性定义数据。使用vm的$data(实例属性)来获取声明的数据。

      
  {{ a }}
  {{ b }}
  var vm = new Vue({el:'#app',data:{a:1}});vm.$data.b = 2;

  若需要在实例化之后假如响应式变量，需要调用实例方法$set，例如：vm.$set('b',2);
   但vue.js并不推荐这么做，这样会抛出一个异常，因此在初始化的时候，把所有的变量都设定好，如果没有值，也可以由undefined或null占位。
   组件类型的实例通过props(选项/数据)获取数据，并在初始化时预设好。

      var myComponent = Vue.component('my-component',{props: ['title','content'],template: '
  {{ title }}
  {{ content }}
  '})

  使用data
  注：1.data的值必须是一个函数，并且返回值不是原始对象。2.data中的属性和props中的不能重名。

      var MyComponent = Vue.component('my-component',{props:['title','content'],data:function(){return {desc:'123'}},template: '
  {{ title }}
  {{ content }}
  {{ desc }}
  '})

  方法

  通过选项属性methods对象定义方法，并使用v-on指令来监听DOM事件

  alert
  new Vue({el: '#app',data:{ a:1 },methods:{alert:function(){alert(this.a)}}
  })

  自定义事件，在初始化的时候传入events对象。通过实例的$emit方法进行触发。而vue.js2.0中废除了events选项属性，不再支持事件广播这类特性，所以直接使用Vue实例的全局方法$on/$emit()，或者使用插件Vuex来处理。

  生命周期

  

  通过定义好的生命周期钩子函数来运行业务逻辑。

  • beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用(在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化)。
    
  • created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调(数据绑定、事件方法)。然而，挂载阶段还没开始，$el 属性目前不可见(尚未开始DOM编译，未挂载到document中)。
  • beforeMount：2.0新增的生命周期钩子，在mounted之前使用。
  • motunted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内(在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档)。
  • **beforeUpdate：在实例挂载之后，再次更新实例并更新完DOM结构后调用。
  • updated：在实例挂载之后，再次更新实例并更新完DOM结构后调用。
  • activated：配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法。
  • deactivated：配合动态组件keep-live属性使用。在动态组件移除的过程中调用该方法。
  • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
  • destroyed：Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。