黑马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. 最详细的原生js实现ajax的封装

    1. ajax的介绍 1.1 含义 ajax 的全称是Asynchronous JavaScript and XML 简单理解下:ajax就是异步的js和服务端的数据 1.2 组成 异步的js:事件, ...

  2. gcc和g++编译器

    .c文件,gcc当做c语言处理 .cpp文件,gcc和g++当做c++处理 .c文件和.cpp文件编译时,都是使用的gcc编译器 .cpp使用gcc链接,需要加入-lstdc++选项 举例 #incl ...

  3. C#基础 结构体、枚举

    一 结构体 结构体(struct)指的是一种数据结构,一个变量组,是一个自定义的集合.通常使用结构体创造新的“属性”,封装一些属性来组成新的类型.   结构体一般定义在Mian函数上面,位于Class ...

  4. 浅谈JAVA继承关系中的构造函数

    话不多说直接上例子,我的例子中定义了两个类,TheSon和TheFather,TheSon继承了TheFather,如图: TheSon类的定义: ​ TheFather类的定义: 当我们初始化The ...

  5. 解决yum命令后出现libldap-2.4.so.2: cannot open shared object file

    问题: [root@lgh ~]# yum There was a problem importing one of the Python modules required to run yum. T ...

  6. javaWeb文件上传与下载

    文件上传与下载在项目中运用的使用频率很大 今天也花时间整理了一下 多文件上传图片回显 和文件下载  1.多文件上传 这里会涉及到几个属性 fileSizeThreshold:缓冲区文件的大小 如果上传 ...

  7. 【Day5】项目实战.CSDN热门文章爬取

    import urllib.request as ur import lxml.etree as le import user_agent keyword = input('请输入关键词:') pn_ ...

  8. Nginx 的关键组件的介绍

    本文章主要介绍Nginx本身功能,不依赖第三方的任何模块.介绍常用的组件功能:反向代理.负载均衡.Http服务器.正向代理 反向代理(Reverse Proxy): 什么是反向代理呢?本人最直接的理解 ...

  9. U盘装manjaro 18报Python error in job “initcpio”

    更新: 还是不行,大家再找别的方法. 以下内容仅做参考,意义不大. U盘安装 用rufus做U盘,写入选DD模式,比ISO模式可靠点. 错误解决 报错信息: Error installing Manj ...

  10. Pandas-Numpy-Scipy-Matplotlib

    Ref:Using iloc, loc, & ix to select rows and columns in Pandas DataFrames 单纯的方括号只有两个用途:基于列的label ...