黑马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. 使用Canvas压缩图片

    讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用Canvas实现图片压缩. 步骤: 1.获取img元素,既要压缩的图片 2.创建canvas对象 3.使用canvas的drawImage方法 ...

  2. sql创建临时表并且插入数据

    if OBJECT_ID('tempdb..#temp') is not null drop table #temp select * into #temp from ( --select * fro ...

  3. GC案例

    FGC----jmap -histo:live导致 线上某服务的老年代配置了CMS,但却在gc.log发现连续Full GC的问题.JVM参数配置如下: -XX:+UseCMSInitiatingOc ...

  4. Kinect for Windows SDK开发入门(四)：景深数据处理 上

    原文来自:http://www.cnblogs.com/yangecnu/archive/2012/04/04/KinectSDK_Depth_Image_Processing_Part1.html ...

  5. Octave(1)

    size(A)返回矩阵A的大小: >> A=[ ; ; ]; >> size(A) %返回矩阵A 的大小 ans = >> size(A,) %返回A的第一维度大小 ...

  6. Sonya and Robots

    1 #include<iostream> #include<cstdio> #include<algorithm> #include<cstring> ...

  7. Python3+Appium学习笔记06-noReset参数

    百度很多文章说noReset这个参数是用来防止重复安装app的.可能这是以前的用法.目前最新版本appium默认是清除session信息,并且不会删除应用的. ​ noReset这个参数,根据appi ...

  8. ZooKeeper介绍（转载）

    关于ZooKeeper,下面引用了一片文章,原文地址是:http://www.cnblogs.com/wuxl360/p/5817471.html 一.分布式协调技术 在给大家介绍ZooKeeper之 ...

  9. linux实操_shell系统函数

    basename函数: 功能:返回完整路径最后/的后面部分,常用于获取文件名. 基本语法: basename 路径 后缀 不加后缀:运行后 加后缀:运行后 dirname函数: 功能:返回完整路径最后 ...

  10. xss之上传文件的xss,绕过csp,预警机制

    xss1.XSS姿势——文件上传XSS https://wooyun.x10sec.org/static/drops/tips-14915.html总结: 1.1.文件名方式,原理:有些文件名可能反应 ...