黑马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. Invariant Violation: requireNativeComponent: "RNCWKWebView" was not found in the UIManager.

    react-native  0.60以上版本安装第三方库的时候会autolink  出现这个问题是 我安装 react-native-webview 之后运行 ios出现的,这是因为ios 没有自动安 ...

  2. Xcode8 1 创建coreData的ManagedObject后，报错 linker command failed with exit code 1

    Xcode8 1 创建coreData的ManagedObject后,报错 使用Xcode 8.1 创建coreData的ManagedObject后,报错. duplicate symbol OBJ ...

  3. DoD与TCP/IP

    DoD与TCP/IP都是协议栈. 什么是协议栈? 就是一套软件,默认安装完Windows就有,可以卸载再安装.把他卸载了,你就不能上网. 数据的封装以及解封装有网卡以及绑定的TCP/IP协议栈完成 A ...

  4. nagios安装部署及详细配置说明(转)

    一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ...

  5. 通过Java调用Python脚本

    在进行开发的过程中,偶尔会遇到需要使用Java调用Python脚本的时候,毕竟Python在诸如爬虫,以及科学计算等方面具有天然的优势.最近在工作中遇到需要在Java程序中调用已经写好的Python程 ...

  6. uni-app之tabBar的自己配置

    1.因为产品相关的的权限,需要配置不同的导航,这时候需要自定义导航.分离出来的就是一个小的组件.(tabBar.vue) 此处暂时用的html插入的代码,能粘贴到vue文件即可. <templa ...

  7. python 杂记 网络

    参考资料:https://www.cnblogs.com/gareth-yu/p/9097943.htmlimport selectors import socket sel = selectors. ...

  8. 如何查看JVM的内存

    学过java的人都知道,jvm是解释运行java的,java能够作为跨平台语言,也是因为jvm的存在,合理的使用jvm内存可以帮助程序很好的运行.那么,怎么查看jvm的内存使用情况呢,下面本文介绍一下 ...

  9. POP3与SMTP以及python实现邮件的发送

    什么是POP3协议: POP3是Post Office Protocol 3的简称,即邮局协议的第3个版本,它规定怎样将个人计算机连接到Internet的邮件服务器和下载电子邮件的电子协议.它是因特网 ...

  10. JSONP劫持

    发出空refer的POC <!DOCTYPE html> <html> <head> <meta name="referrer" cont ...