vue.js的实例与选项

实例及选项

var vm = new Vue({})

模板

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

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

    <div id="app">
        <p>123</p>
    </div>
    <script id="tpl" type="x-template">
        <div class="tpl">
            <p>This is a tpl from script tag</p>
        </div>
    </script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            template: '#tpl'
        })
    </script>

输出HTML结构

    <div class="tpl" id="app">
        <p>This is a tel from script tag</p>
    </div>

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

    <script id="tpl" type="x-template">
       <div class="wrapper">
        <div class="tpl">
            <p>This is a tpl from script tag</p>
        </div>
        ...
         <div class="tpl">
            <p>This is a tpl from script tag</p>
        </div>
       </div>
    </script>

数据

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

    <div id="app">
        <p>{{ a }}</p>
        <p>{{ b }}</p>
    </div>
    
    var vm = new Vue({
        el:'#app',
        data:{
            a:1
        }
    });
    
    vm.$data.b = 2;

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

    <my-component title='myTitle' content='myContent'></my-component>
    var myComponent = Vue.component('my-component',{
        props: ['title','content'],
        template: '<h1>{{ title }}</h1><p>{{ content }}</p>'
    })

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

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

方法

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

<button v-on:click="alert">alert</button>
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实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。