vue学习十六---component组件的三种创建方式

component组件

以下写了三种组件创建方式，个人推荐使用第三种，同时配了三个对应的demo

1. 使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
      template: '<h1>登录</h1>'
    });
    Vue.component('login', login);

2. 直接使用 Vue.component 方法：

Vue.component('register', {
      template: '<h1>注册</h1>'
    });

3. 将模板字符串，定义到script标签种：

<script id="tmpl" type="x-template">
      <div><a href="#">登录</a> | <a href="#">注册</a></div>
    </script>

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {
      template: '#tmpl'
    });

注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

例子一

<div id="app">

        <!-- 如果要使用组件，直接把组件的名称 ，以HTML标签的形式 引入到页面中 ，即可  注意：标签不能使用驼峰命名，需要加'-'！ -->
        <!-- 如果是非驼峰命名，则和组件名称一样即可！ -->
        <my