1. 构造组件，及组件引用：1.1 构造一个组件，1.2 注册一个组件，1.3  实例化Vue()即引用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">

     <script src="./vue/vue.js"></script>

     <title>Document</title>

 </head>

 <body>

     <div id="box">

         <ccc></ccc>

     </div>

     <ccc></ccc>

     <script>

         // 构造组件，使用extend()字样进行

         var c = Vue.extend({

             template: '<h3>这是一个H3标题标签</h3>'

         });

         // 注册组件，注册一个名称为ccc ,内容为c的组件

         Vue.component('ccc', c);

         new Vue({

             el: "#box",

         });

     </script>

 </body>

 </html>

运行结果：

2. 引用几次，就调用几次

 <body>

     <div id="box1">

         <ccc></ccc>

     </div>

     <div id="box2">

         <ccc></ccc>

     </div>

     <ccc></ccc>

     <script>

         // 构造组件

         var c = Vue.extend({

             template: "<h3>这是一个测试字符串</h3>"

         });

         // 注册组件

         Vue.component("ccc", c);

         // 引用Vue

         new Vue({

             el: "#box1",

         });

         new Vue({

             el: "#box2",

         });

     </script>

 </body>

运行结果：

3. 局部注册，只有局部才能引用

 <body>

     <div id="box1">

         <ccc></ccc>

     </div>

     <div id="box2">

         <ccc></ccc>

     </div>

     <ccc></ccc>

     <script>

         // 构造组件

         var c = Vue.extend({

             template: "<h3>这是一个测试字符串</h3>"

         });

         // 引用Vue + 局部注册

         new Vue({

             el: "#box1",

             components: {

                 'ccc': c,

             },

         });

         // 虽然有引用，但是没有注册，所以也不会进行替换

         new Vue({

             el: "#box2",

         });

     </script>

 </body>

运行结果：

4. 父组件与子组件，即在父组件下注册子组件，同样可以实现替换

5.注册全局组件

 <body>

     <div id="box1">

         <ccc></ccc>

     </div>

     <div id="box2">

         <ccc></ccc>

     </div>

     <ccc></ccc>

     <script>

         Vue.component('ccc', {

             template: "这是一个测试组件，这是ccc",

         });

         new Vue({

             el: "#box1"

         });

     </script>

 </body>

运行结果：

6. 简化组件的注册

 <body>

     <div id="box1">

         <aaa></aaa>

         <bbb></bbb>

     </div>

     <ccc></ccc>

     <script>

         var a = Vue.extend({

             template: "<h3>这是组件a 的内容</h3>",

         });

         var b = Vue.extend({

             template: "<h3>这是组件b 的内容</h3>",

         });

         new Vue({

             el: "#box1",

             components: {

                 'aaa': a,

                 'bbb': b,

             }

         });

     </script>

 </body>

运行结果：

7. 使用script 标签分离模板：

 <body>

     <div id="box1">

         <aaa></aaa>

         <bbb></bbb>

     </div>

     <script type="x-template" id="a">

         <h3>我是组件a</h3>

         <p>我是段落a</p>

     </script>

     <script type="x-template" id="b">

         <h3>我是组件b</h3>

         <p>我是段落b</p>

     </script>

     <script>

         new Vue({

             el: "#box1",

             components: {

                 'aaa': {

                     template: '#a',

                 },

                 'bbb': {

                     template: '#b'

                 }

             }

         });

     </script>

 </body>

运行结果：

vue.js 组件引用之初级的更多相关文章

  1. vue.js 组件引用之初级 之二

    1. template 标签也可以实现替换,这样可以省去script标签了 <!DOCTYPE html> <html lang="en"> <hea ...

  2. 偏前端-vue.js学习之路初级（二）组件化构建

    vue.js   组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...

  3. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  4. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  5. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  6. 偏前端-vue.js学习之路初级（一）概念

    首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时.    新建一个html,引入一下js: <!-- 开发环境版本,包含了有帮助的命令行警告 -- ...

  7. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  8. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  9. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

随机推荐

  1. 廖雪峰Java4反射与泛型-2注解-1使用注解

    1.Annotation定义 注解是放在Java源码的类.方法.字段.参数前的一种标签.如下 package com.reflection; import org.apache.logging.log ...

  2. k8s服务发现和负载均衡(转)

    原文 http://m635674608.iteye.com/blog/2360095 kubernetes中如何发现服务 如何发现pod提供的服务 如何使用kube-dns发现服务   servic ...

  3. 各种http报错的报错的状态码的分析

    HTTP常见错误 HTTP 错误 400 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无法重复此请求. HTTP 错误 401 401.1 未授权:登录失败 此错误表 ...

  4. jquery.autocomplete 搜索文字提示

    function GetJobTitle(obj) { $(obj).autocomplete("GetJobTitle.ashx", { max: 12, //列表里的条目数 m ...

  5. centos7 firewall-cmd 用活firewalld防火墙中的zone

    原文:http://www.excelib.com/article/290/show/ firewalld中zone的含义学生前面已经给大家介绍过了,说白了一个zone就是一套规则集.可是什么时候该用 ...

  6. linux安装和卸载软件：sudo apt-get install（remove）

    sudo apt-get install xxx sudo apt-get remove xxx

  7. 第9章 应用层（5）_文件传输协议FTP

    6. 文件传输协议FTP 6.1 FTP主动和被动模式 (1)FTP协议 ①与其他协议不同,FTP协议在客户端访问FTP服务器时需要建立两个TCP连接.一个用来传输FTP命令,一个用来传输数据. ②在 ...

  8. WebUploader 手机端上传图片(转)

    https://blog.csdn.net/loserorleader/article/details/50395040

  9. for循环.html

    <script> for (var i = 1; i < 5 ; i++) { alert(i); } 公式需要记住,并多加练习,加深记忆,注意编写格式 for (var i = 1 ...

  10. (转)C#读写共享文件

    原文地址:https://www.cnblogs.com/guohu/p/4694515.html using System; using System.Collections.Generic; us ...