详情点此连接（转载）

组件的创建和注册

vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。

1. 调用Vue.extend()方法创建组件构造器。

2. 调用Vue.component()方法注册组件。

3. 在Vue实例的作用范围内使用组件。

<!DOCTYPE html>

<html>

    <body>

        <div id="app">

            <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->

            <my-component></my-component>

        </div>

    </body>

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

    <script>

        // 1.创建一个组件构造器

        var myComponent = Vue.extend({

            template: '<div>This is my first component!</div>'

        })

        // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>

        Vue.component('my-component', myComponent)

        new Vue({

            el: '#app'

        });

    </script>

</html>

运行结果：

This is my first component!

Vue.js---组件的更多相关文章

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

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

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

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

  3. VUE.JS组件化

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

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

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

  5. Vue.js 组件编码规范

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

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

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

  7. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  8. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

  9. Vue.js组件示例

    一 外部引入文件:(全局注册) //建模版 var mycomponent=Vue.extend( {template:"<div><a href='#'>我爱Jav ...

  10. 关于vue.js 组件的调用

    包子初学vue.js,有很多不明白的地方还请大家多多指教,在组件的调用的时候,包子有点懵,因为感觉调用组件的方式非常的麻烦,每一个都要实例化,不过,通过不断询问大牛们,我找到了,动态加载组件的方法~~ ...

随机推荐

  1. 对象API

    遍历对象里的每个元素 var obj ={ a:32, b:12, c :342 } for (const key of obj){ if(obj.hasOwnProperty(key)){ cons ...

  2. 封装一个方法获取url上面的参数

    一.取参   ] : ); ]; ; ]., -); ]) === ]; , , b: 'fdfdfd', c: '9999' })); //a=123546&b=fdfdfd&c=9 ...

  3. 第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛--L-用来作弊的药水

    链接:https://www.nowcoder.com/acm/contest/90/L 来源:牛客网 1.题目描述 -- 在一个风雨交加的夜晚,来自异世界的不愿透露姓名的TMK同学获得了两种超强药水 ...

  4. Linux系统运维基础测试题

    1    Linux运维基础测试题(第一关) 通过这段时间学习Linux基础命令,为了检测自己对Linux基础命令掌握的情况,从网上整理13到测试题,并将其整理出来供大家参考学习. 1.1    习题 ...

  5. 8.1 编写USB鼠标驱动程序，并测试

    学习目标:编写USB鼠标驱动程序,并测试(将USB鼠标的左键当作L按键,将USB鼠标的右键当作S按键,中键当作回车按键). 一.怎么写USB设备驱动程序?步骤如下: 1. 首先先定义全局变量usb_d ...

  6. hive的load命令

    Hive Load语句不会在加载数据的时候做任何转换工作,而是纯粹的把数据文件复制/移动到Hive表对应的地址. 语法 LOAD DATA [LOCAL] INPATH 'filepath' [OVE ...

  7. Leecode刷题之旅-C语言/python-88合并两个有序数组

    /* * @lc app=leetcode.cn id=88 lang=c * * [88] 合并两个有序数组 * * https://leetcode-cn.com/problems/merge-s ...

  8. 数字滤波器的MATLAB与FPGA实现--Altera/Verilog版的pdf版，杜勇等编著的书。

    自己在网上找了很久才找到的资源,花了很大的劲,觉得不易,特地分享给大家.本书讲了使用FPGA的Fir IIR IP核与Matlab配合使用生成滤波器的详细使用方法.贴出地址,http://downlo ...

  9. asp.net core mvc简介

    MVC 通常而言,我们使用.NET Core MVC 构建网页应用与 API,MVC是使用模型-视图-控制器(Model-View-Controller)设计模式. 创建项目 使用如下命令创建一个名称 ...

  10. HyperLedger Fabric 1.4 交易流程（6.3）

    区块链最主要的特性之一是去中心化,没有了中心机构的集中处理,为了达成数据的一致性,就需要网络中全民参与管理,并以某种方法达成共识,所以区块链的交易流程也就是共识的过程.       在Fabric中, ...