Vue中两大特性指令和组件创建流程

指令 – 用来操作dom

组件 – 组件是html css js 等的一个聚合体

为什么要使用组件？

1. 组件化
   1. 将一个具备完整功能的项目的一部分进行多处使用
   2. 加快项目的进度
   3. 可以进行项目的复用
2. 要想实现组件化，那么我们使用的这一部分就必须是完整的，我们把这个完整的整体就称之为组件
3. 插件： index.html img css js
4. 如果能将 html css js img 等多个部分放在一起，那该有多好，vue将这个聚合体的文件称之为，单文件组件（ xx.vue ）

基础的组件创建

基本步骤

• Vue.js 的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。
• Vue.extend() 方法创建组件构造器
• Vue.component() 方法注册组件
• 在Vue实例的作用范围内使用组件

1. 最原始的方式
   全局注册

    <!--1.1 使用Vue.extend来创建全局的Vue组件-->
        var tem1 = Vue.extend({
        template:'
这是使用 Vue.extend 创建的组件
' //指定组件要展示的HTML结构
        });
    <!--1.2 注册组件,使用Vue.component('组件名称',创建出来的组件模板对象)-->
        Vue.component('myTem1',tem1);//注册组件
        /*
        
        使用 Vue.component() 定义全局组件的时候，
        组件名称使用 驼峰命名，则在引用组件的时候，需要把大写改为小写，并且用 '-'将单词连接
        组件名称不使用驼峰命名，则直接拿名称来使用即可
        */
    <!-- 1.3 使用组件，实例范围内 -->        
        <div id="app">
        <!-- 如果要使用组件，直接把组件的名称以 HTML 标签的形式，引入到页面中-->
        <my-tem1></my-tem1>
        </div>         

       局部注册

    <!--1.1 使用Vue.extend来创建全局的Vue组件-->
    var Hello = Vue.extend({
        template: '
 这里是1903 
'
    })
    <!--1.2 局部注册组件: components:('组件名称',创建出来的组件模板对象)-->
    new Vue({
        el: '#app',
        components: {
        // key: value  key是组件名称   value是组件配置项
        // 'gabriel-yan': Hello,
        'GabrielYan': Hello
        }
    })
    <!-- 1.3 使用组件-->   
    <div id="app">
        <gabriel-yan></gabriel-yan>
    </div>

2. 缩写方式
   直接使用Vue.component()

    Vue.component('mycom2',{
        template : '
这是使用 Vue.component 创建的组件
'
    })
    <div id="app">
        <!-- 如果要使用组件，直接把组件的名称以 HTML 标签的形式，引入到页面中-->
        <my-tem1></my-tem1>
    </div>  

3. 普遍实用的方式

    <!--1. 定义组件 -->
    Vue.component('mycom3',{    //组件名称
        template : '#tem1'      //组件模板
    });
    <!--2. 在被控制的 #app 外面使用 template 元素，定义组建的HTML模板结构-->
    <div id="app">
        <!--3. 引用组件 -->
        <mycom3></mycom3>
    </div>

    <template id="tem1">
        <div>
            <h1>这是 template 元素</h1>
            <span>这种方式好用</span>
        </div>
    </template>