黑马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. Django路由及函数视图

    路由系统 在django中,uri与逻辑函数的对应关系我们称之为路由系统 伪静态 伪静态是相对于静态文件来说的,例如https://www.cnblogs.com/hesujian/p/1116581 ...

  2. 二叉树BinaryTree构建测试(无序)

    此测试仅用于二叉树基本的性质测试,不包含插入.删除测试(此类一般属于有序树基本操作). //二叉树树类 public class BinaryTree { public TreeNode root; ...

  3. 为什么Java大数据能带你走上人生巅峰

    国内大多数大型互联网公司的程序员被称作研发工程师,但实际上国内几乎没有研发项目,只能叫做开发. 开发程序员的工作大多是重复性劳动,容易产生疲惫感,薪资在工作2-5年内就达到了一个峰值,再要提升就比较困 ...

  4. python读取图像后变换通道顺序

    直接通过python矩阵操作变换,简单高效 org_img = cv2.imread('cat.jpg') img = org_img[:, :, ::-1] 其中,[::-1] 表示顺序相反操作 , ...

  5. 早上好，我是 Istio 1.1

    1性能增强 虽然Istio1.0的目标是生产可用,但从去年7月份发布以来,在性能和稳定性上并不能让用户满意.社区的Performance and Scalability工作组在Istio v1.1中做 ...

  6. Fillder的前后端的应用

    测试需求:有一个功能,允许用钻石兑换金币,假设1钻石=1金币,前端控制一次至少兑换10个,最多100个,后台不做验证. 测试方案:输入10,也就是告诉前端我要兑换10个金币,等前端验证通过之后,截取要 ...

  7. JavaScript001，鼠标点击改变文字或图片

    <h3>我的第一个Javascript</h3> <p id="demo1">1.点击按钮,改变内容!</p> <!-- 设置 ...

  8. linux实操_shell自定义函数

    基本语法: #定义函数 function 函数名(){ 函数体 } #调用函数 函数名 参数1 参数2... 实例:计算两个数的和. 运行后

  9. TreadPool

    ThreadPool概述 提供一个线程池,该线程池可用于执行任务.发送工作项.处理异步 I/O.代表其他线程等待以及处理计时器. 创建线程需要时间.如果有不同的小任务要完成,就可以事先创建许多线程/在 ...

  10. sql prompt工具

    SQL Prompt是一款拥有SQL智能提示功能和格式化Sql代码插件.可用于的SQL Server和VS. SQL Prompt能根据数据库的对象名称,语法和用户编写的代码片段自动进行检索,智能的为 ...