标签：Vue extend 流程 component template 使用 组件

指令 – 用来操作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:'<h3>这是使用 Vue.extend 创建的组件</h3>' //指定组件要展示的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: '<div> 这里是1903 </div>'
        })
        <!--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 : '<h3>这是使用 Vue.component 创建的组件</h3>'
      })
      <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>
  

标签：Vue,extend,流程,component,template,使用,组件
来源： https://blog.csdn.net/HelloWord182/article/details/94578380

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。