Vue.js 3 Step 创建一个组件
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 创建一个组件的更多相关文章
- vue.js入门（3）——组件通信
5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...
- Vue.js 系列教程 2：组件，Props，Slots
原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- Vue.js 3.x 中跨层级组件如何传递数据？
provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- vue通过extend动态创建全局组件（插件）学习小记
测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...
- vue.js 二维码生成组件
安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...
- Vue.js——理解与创建使用
Vue.js 概念:是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API,作者是尤雨溪是中国人. 优点: 1)易用 已经会了HTML,CSS,JavaScript?即刻阅读指南开始构 ...
- 前台框架vue.js中怎样嵌入 Echarts 组件？
目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...
随机推荐
- vue,一路走来（4）--vuex
补充 调用外部js,详细介绍如何调用函数. 1.首先在main.js里引用文件 2.然后算是和jquery框架一样需要所谓的入口函数吧 不过令我烦恼的是,在应用的文件中需要把他包含在另一个函数里,才可 ...
- 毕设问题（1）表格table的表头自定义、复合表头，组合表格
毕业设计,是一个web项目,遇到的些问题,记录下来.也许也有同样只知道一些,不是那么系统的学过的人,会遇到同样的问题,希望有所帮助. 百度知道有这样一个问题: bootstrap table 如何实现 ...
- 在vCenter上创建新用户 （适用版本6.0）
- INSTR代替NOT LIKE
instr(title,'手册')>0 相当于 title like '%手册%' instr(title,'手册')=1 相当于 title like '手册%' instr(titl ...
- setNeedsDisplay和setNeedsLayout方法
参考:https://blog.csdn.net/sunnyboy9/article/details/51458401 . UIView的setNeedsDisplay和setNeedsLayout方 ...
- webpack使用的补充
1.分离生产环境和开发环境的wepack.config.js 我们可以将生产环境和开发环境中的配置分离为两个不同的文件,并且还维护一个共同的配置文件 common,可以通过 webpack.merge ...
- 「NOI2017」蔬菜 解题报告
「NOI2017」蔬菜 首先考虑流 可以从 \(s\) 流入表示得到蔬菜,流出到 \(t\) 表示卖出蔬菜,给每个蔬菜拆点,并给它它每天应得的蔬菜. 但是我们没办法直接给,注意到如果把变质看成得到并可 ...
- 【LeetCode 60】第k个排列
题目链接 [题解] 逆康托展开. 考虑康托展开的过程. K = ∑v[i]*(n-i)! 其中v[i]表示在a[i+1..n]中比a[i]小的数字的个数 (也即未出现的数字中它排名第几(从0开始)) ...
- linux0.11源码内核——系统调用，int80的实现细节
linux0.11添加系统调用的步骤 假设添加一个系统调用foo() 1.修改include/linux/sys.h 添加声明 extern int foo(); 同时在sys_call_table数 ...
- Java常用数据结构Set, Map, List
1. Set Set相对于List.Map是最简单的一种集合.集合中的对象不按特定的方式排序,并且没有重复对象. 特点: 它不允许出现重复元素: 不保证和政集合中元素的顺序 允许包含值为null的元素 ...