黑马vue---56-58、vue组件创建的三种方式

一、总结

一句话总结：

不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素

1、使用 Vue.extend 来创建全局的Vue组件？

Vue.component('mycom1', Vue.extend({
Vue.component('mycom1', Vue.extend({

    template: '<h3>这是使用 Vue.extend 创建的组件</h3>'

}))

2、使用vue的component方法直接创建？

Vue.component('mycom2', {
Vue.component('mycom2', {

    template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'

})

3、使用template标签直接创建？

在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构
在 Vue.component中直接指定template: '#tmpl'即可
  <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  -->

  <template id="tmpl">

    <div>

      <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>

      <h4>好用,不错!</h4>

    </div>

  </template>

    Vue.component('mycom3', {

      template: '#tmpl'

    })

4、vue引入组件的方式？

使用标签的形式，直接引入即可：比如<mycom2></mycom2>
Vue.component('mycom2', {

    template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'

})

5、vue组件创建组件最便捷方式？

使用template标签直接在vue控制的区域之外创建，然后在 Vue.component中直接指定template: '#tmpl'即可
  <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  -->

  <template id="tmpl">

    <div>

      <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>

      <h4>好用,不错!</h4>

    </div>

  </template>

    Vue.component('mycom3', {

      template: '#tmpl'

    })

二、vue组件创建的三种方式

1、使用 Vue.extend 来创建全局的Vue组件

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <script src="./lib/vue-2.4.0.js"></script>

 </head>

 <body>

   <div id="app">

     <!-- 如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可 -->

     <mycom1></mycom1>

   </div>

   <script>

     // 1.1 使用 Vue.extend 来创建全局的Vue组件

     // var com1 = Vue.extend({

     //   template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构

     // })

     // 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)

     // Vue.component('myCom1', com1)

     // 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；

     // 如果不使用驼峰,则直接拿名称来使用即可;

     // Vue.component('mycom1', com1)

     // Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的

     // 第二个参数: Vue.extend 创建的组件  ,其中 template 就是组件将来要展示的HTML内容

     Vue.component('mycom1', Vue.extend({

       template: '<h3>这是使用 Vue.extend 创建的组件</h3>'

     }))

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {},

       methods: {}

     });

   </script>

 </body>

 </html>
 

2、使用vue的component方法直接创建

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <script src="./lib/vue-2.4.0.js"></script>

 </head>

 <body>

   <div id="app">

     <!-- 还是使用 标签形式,引入自己的组件 -->

     <mycom2></mycom2>

   </div>

   <script>

     // 注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素

     Vue.component('mycom2', {

       template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'

     })

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {},

       methods: {}

     });

   </script>

 </body>

 </html>

3、使用template标签直接创建

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <script src="./lib/vue-2.4.0.js"></script>

 </head>

 <body>

   <div id="app">

     <mycom3></mycom3>

     <!-- <login></login> -->

   </div>

   <div id="app2">

     <mycom3></mycom3>

     <login></login>

   </div>

   <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  -->

   <template id="tmpl">

     <div>

       <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>

       <h4>好用,不错!</h4>

     </div>

   </template>

   <template id="tmpl2">

     <h1>这是私有的 login 组件</h1>

   </template>

   <script>

     Vue.component('mycom3', {

       template: '#tmpl'

     })

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {},

       methods: {}

     });

     var vm2 = new Vue({

       el: '#app2',

       data: {},

       methods: {},

       filters: {},

       directives: {},

       components: { // 定义实例内部私有组件的

         login: {

           template: '#tmpl2'

         }

       },

       beforeCreate() { },

       created() { },

       beforeMount() { },

       mounted() { },

       beforeUpdate() { },

       updated() { },

       beforeDestroy() { },

       destroyed() { }

     })

   </script>

 </body>

 </html>
 

黑马vue---56-58、vue组件创建的三种方式的更多相关文章

  1. React: React组件创建的三种方式

    一.简介 在前面介绍的React组件知识中,对于组件的创建我只是用了其中某一种方式.其实,在2013年React诞生之初,对于React组件的创建,仅仅只有一种方式,也即createClass函数,在 ...

  2. vue组件创建的三种方式

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...

  3. 于Unity3D动态创建对象和创建Prefab三种方式的原型对象

    于Unity3D动态创建对象和创建Prefab三种方式的原型对象 u3d在动态创建的对象,需要使用prefab 和创建时 MonoBehaviour.Instantiate( GameObject o ...

  4. vue中通过路由跳转的三种方式

    原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...

  5. 【Java EE 学习 52】【Spring学习第四天】【Spring与JDBC】【JdbcTemplate创建的三种方式】【Spring事务管理】【事务中使用dbutils则回滚失败！！！？？】

    一.JDBC编程特点 静态代码+动态变量=JDBC编程. 静态代码:比如所有的数据库连接池 都实现了DataSource接口,都实现了Connection接口. 动态变量:用户名.密码.连接的数据库. ...

  6. SpringBoot工程创建的三种方式

    一. 通过IDEA的spring Initializer创建 1. 打开创建项目面板 File->New->Project->Spring Initializr 2. 填写Maven ...

  7. Angular 组件通信的三种方式

    我们可以通过以下三种方式来实现: 传递一个组件的引用给另一个组件 通过子组件发送EventEmitter和父组件通信 通过serive通信 1. 传递一个组件的引用给另一个组件 Demo1 模板引用变 ...

  8. （day57）九、多对多创建的三种方式、Forms组件

    目录 一.多对多三种创建方式 (一)全自动 (二)纯手撸(基本不用) (三)半自动(推荐使用) 二.forms组件 (一)校验数据 (1)常用内置字段及参数 (2)内置的校验器 (3)HOOK方法 ( ...

  9. vue+webpack 实现懒加载的三种方式

    第一种: 引入方式 就是正常的路由引入方式 const router = new Router({ routes: [ { path: '/hyh', component: hyh, name: 'h ...

随机推荐

  1. SpringBoot mysql出现The server time zone value '�й���׼ʱ��' is unrecogni

    MySql :8.0.18 引入的mysql驱动: SpringBoot整合Mybatis的框架,在访问Controller的时候 : ava.sql.SQLException: The server ...

  2. 工作流引擎Activiti

    背景: 在计算机尚未普及时,许多工作流程采用手工传递纸张表单的方式,一级一级审批签字, 工作效率非常低下,对于数据统计以及生成报表的功能,需要经过大量的手工操作才能实现. 随着电脑的普及,这些工作的参 ...

  3. K2 BPM_当BPM遇上RPA | 企业合规和风险管理从此更高效_全球领先的工作流引擎

    强化企业合规与风险管理已成为全球企业发展的共识,尤其是对于药企.银行.地产这类对于合规性要求高的企业而言,识别预测潜在的管理风险和遵循不断升级的合规义务,是保证企业平稳运行的关键. 如何从流程层面降低 ...

  4. 7.Java集合-Arrays类实现原理及源码分析

    Java集合---Arrays类源码解析  转自:http://www.cnblogs.com/ITtangtang/p/3948765.html 一.Arrays.sort()数组排序 Java A ...

  5. zabbix监控MySQL,Tomcat及配置邮件报警

    目录 一.思路 二.部署.配置 环境 安装zabbix 对zabbix进行初步优化 添加监控主机 部署监控Tomcat 配置邮件报警 三.总结 一.思路 首先搭建zabbixserver,本机需要安装 ...

  6. Oracle 找到引起账户锁定的IP

    在ORACLE数据库中,如果没有修改过FAILED_LOGIN_ATTEMPTS的话,默认10次尝试失败后就会锁住用户.此时再登录数据库,就会遇到ORA-28000: the account is l ...

  7. ACM-ICPC 2018 徐州赛区网络预赛 G. Trace (思维，贪心)

    ACM-ICPC 2018 徐州赛区网络预赛 G. Trace (思维,贪心) Trace 问答问题反馈 只看题面 35.78% 1000ms 262144K There's a beach in t ...

  8. Bert-util安装

    转载:https://blog.csdn.net/u013109501/article/details/91987180 https://blog.csdn.net/Vancl_Wang/articl ...

  9. nodejs常用框架使用样例

    Koa const Koa = require('koa'); const router = require('koa-router')(); const app = new Koa(); const ...

  10. Vim键盘图-红色圈标记为重点