Vue2.0学习笔记

全局组件 

Vue.component('my-component', {
    data: function (){
        return {
            word: 'Hello'
        }
    },
    template: `<p>{{word}} World!</p>`
});

let app = new Vue({
    el: '#app'
});

<div id="app">
    <my-component></my-component>
</div>

全局组件需在创建了Vue实例的父元素下使用.

同时data的值需为function返回的引用对象,不能直接创建data:{},这是为了保证数据的独立性.

局部组件

let myHeader = {
    template: `<p>this is my header</p>`
}

let app = new Vue({
    el: '#app',
    components: {
        'my-header': myHeader
    }
});

在Vue实例中指定components实例选项可以创建局部组件,用法与全局变量一样.