Step1：Vue.extend()创建组件

Step2：Vue.component()注册组件，注册的标签一定要用小写

Step3：挂载点使用组件



<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>3 Step 创建一个组件</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<script src="vue.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="app1">

			<!-- Step3：挂载点1使用组件 -->

			<my-component></my-component>

		</div>

		<div id="app2">

			<!-- Step3：挂载点2使用组件 -->

			<my-component></my-component>

		</div>

		<div>

			<!-- 这里不属于挂载点，所以不会显示！ -->

			<my-component></my-component>

		</div>

		<script type="text/javascript">

			//Step1：创建组件

			var myComponent = Vue.extend({

				template: "<div>这是一个组件</div>"

			})

			//Step2：注册组件 在这里采用"全局注册"组件，也就是每个挂载点都可以使用组件

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

			new Vue({

				el: '#app1', //挂载点1

			})

			new Vue({

				el: '#app2' //挂载点2

			})

		</script>

	</body>

</html>

全局注册和局部注册

全局注册:

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

局部注册:

我们需要在声明挂载点的地方注入组件即可：

			new Vue({

				el: '#app1',

				components:{

				'my-component', myComponent'

				}

			})

这样只能在挂载点为#app1地方使用my-component组件，在挂载点#app2的地方使用my-component组件就会报错。

语法糖创建并注册组件

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>3 Step 创建一个组件</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<script src="vue.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="app1">

			<!-- Step3：挂载点1使用组件 -->

			<my-component></my-component>

		</div>

		<div id="app2">

			<!-- Step3：挂载点2使用组件 -->

			<my-component></my-component>

			<hr>

			<strong>使用语法糖创建并注册组件</strong>

			<sugar-component></sugar-component>

		</div>

		<div>

			<!-- 这里不属于挂载点，所以不会显示！ -->

			<my-component></my-component>

		</div>

		<hr >

		<strong>使用语法糖在局部注册并创建多个组件</strong>

		<div id="app3">

			<sugar-component2></sugar-component2>

			<sugar-component3></sugar-component3>

		</div>

		<script type="text/javascript">

			//Step1：创建组件

			var myComponent = Vue.extend({

				template: "<div>这是一个组件</div>"

			})

			//Step2：注册组件 在这里采用"全局注册"组件，也就是每个挂载点都可以使用组件

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

			//Step2: 可以使用语法糖,省略Step1,“全局注册”组件的同时创建模板内容

			Vue.component('sugar-component', {

				template: '<div>这是用语法糖创建并注册的组件，这样就可以省略自己使用Vue.extend创建组件的步骤，系统会自动为我们使用Vue.extend去创建组件。</div>'

			})

			new Vue({

				el: '#app1', //挂载点1

			})

			new Vue({

				el: '#app2' //挂载点2

			})

			new Vue({

				el: '#app3', //挂载点3,同样可以再局部使用语法糖创建并注册组件

				components: {

					'sugar-component2': {

						template: '<div>这是使用语法糖在局部注册并创建组件的内容。</div>'

					},

					'sugar-component3': {

						template: '<div>使用语法糖，在局部可以同时创建并注册“多个组件”的内容。</div>'

					}

				}

			})

		</script>

	</body>

</html>

Vue.js 3 Step 创建一个组件的更多相关文章

  1. vue.js入门（3）——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

  2. Vue.js 系列教程 2：组件，Props，Slots

    原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...

  3. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  4. Vue.js 3.x 中跨层级组件如何传递数据？

    provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...

  5. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  6. vue通过extend动态创建全局组件（插件）学习小记

    测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...

  7. vue.js 二维码生成组件

    安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...

  8. Vue.js——理解与创建使用

    Vue.js 概念:是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API,作者是尤雨溪是中国人. 优点: 1)易用 已经会了HTML,CSS,JavaScript?即刻阅读指南开始构 ...

  9. 前台框架vue.js中怎样嵌入 Echarts 组件？

    目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...

随机推荐

  1. ASE "黄金点游戏"

    问题定义 黄金点游戏是源于经济学家Richar Thaler构思的在1997年伦敦金融时报进行了一次公开竞猜活动.MSRA-ASE课程的第一次结对编程中,我们写了一个AI Bot来与大家玩儿这个游戏. ...

  2. 2018-8-10-如何使用-Q#

    title author date CreateTime categories 如何使用 Q# lindexi 2018-08-10 19:16:51 +0800 2018-2-13 17:23:3 ...

  3. protocols - 协议定义文件

    描述 该文件为普通 ASCII 文件,它描述了 TCP/IP 子系统中各类 DARPA internet 协议族．你应该参考这个文件, 而不是使用 ARPA 的 include 文件中的号码, 更不必 ...

  4. 13-H.264编码解码器的无线应用：1080P60 3D无线影音传输器

    H.264编码解码器的无线应用:1080P60 3D无线影音传输器 一.应用领域 家庭媒体娱乐中心 新闻现场采访 无线3D投影机 高清视频会议终端无线延长器 教学,医疗示教 考古,高档商业区域,监狱等 ...

  5. JAVA- 内部类及匿名内部类

    普通类,我们平时见到的那种类,就是一个后缀为.java的文件中,直接定义的类,比如 public Cat{ private String name; private int age; } 内部类, 内 ...

  6. POJ 3237 树链剖分

    题目链接:http://poj.org/problem?id=3237 题意:给定一棵n个结点n-1条边的树. 每条边都是一个边权. 现在有4种操作 1:CHANGE I V:把(输入的)第i条边的边 ...

  7. ltp-ddt realtime_cpuload_10p 涉及的cpuloadgen交叉编译及安装

    1.下载源码 https://github.com/ptitiano/cpuloadgen/archive/v0.94.tar.gz 解压 tar -zxvf cpuloadgen-0.94.tar. ...

  8. windows下搭建Mongo主（Master）/从(slave)数据库同步

    需要启动两个mongoDb文档数据库,一个是主模式启动,另一个是属于从模式启动. 1. 创建主从服务器 主服务器:192.168.1.131:27017 备服务器:192.168.1.131:2701 ...

  9. Strcpy,strcpy使用注意

    一.char *strcpy(char *dest, const char *src) 参数 dest -- 指向用于存储复制内容的目标数组. src -- 要复制的字符串. 注意: 1.dest需要 ...

  10. vscode舒适的字体风格

    首选项-->设置-->输入setting.json-->查找到设置文件 添加如下配置 "editor.tabSize": 2, "files.assoc ...