vue2.0 组件化
简单理解其实组件就是制作自定义的标签，这些标签在HTML中是没有的。
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
<!--<my-component></my-component>-->
<!--可重用性-->
<!--<my-component2></my-component2>-->
<!--此处不渲染-->
</div>
<!--<my-component></my-component>-->
<!--此处不渲染-->
<p>----------------分割线--------------------</p>
<div id="app2">
<my-component></my-component>
<my-component2></my-component2>
<my-component3></my-component3>
</div>
<my-component3></my-component3>
<script>
var myComponent = Vue.extend({
template: "<div>这是我的第一个component</div>"
}) //全局组件
Vue.component('my-component', myComponent) new Vue({
el: "#app"
})
var hello = {
template: "<div>这是我的第三个component</div>"
}
new Vue({
el: '#app2',
//局部组件
components: {
"my-component2": {
template: "<div>这是我的第二个component</div>"
},
"my-component3": hello
}
})
</script>
</body> </html>
全局注册：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>这是一个component
<p>123</p>
<a>456</a>
</div>
</template>
<script>
//全局注册
/*Vue.component("my-component",{
template:"#myComponent"
})*/
var vm = new Vue({
el: "#app",
components: {
"my-component": {
template: "#myComponent"
}
}
})
</script>
</body> </html>
局部注册：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
</head>
<body>
<div id="app">
<parent-component></parent-component>
</div>
<script>
var Child = {
template:"<p>This is a child Component</p>"
}
//var Parent = Vue.extend()
Vue.component("parent-component",{
//局部注册child组件，child组件只能在parent组件内使用。
template:"<div><p>This is a parent Component</p><child-component></child-component></div>",
components:{
'child-component':Child
}
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
vue2.0 组件化的更多相关文章
- vue2.0 组件化及组件传值
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
- vue2.0组件库
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- 通信vue2.0组件
vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...
- vue2.0组件传值
props down emit up 嘿嘿 如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...
- Vue2.0+组件库总结
转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...
- 转：Vue2.0+组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- Vue2.0组件之间通信（转载）
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0组件实现动态搜索引擎（一）
原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.c ...
随机推荐
- Lucene Core Solr
Apache Lucene - Welcome to Apache Lucene https://lucene.apache.org/ The Apache LuceneTM project deve ...
- LEA指令与MOV指令的区别——发现一本汇编好书
一.汇编语言中PTR的含义及作用mov ax,bx ;是把BX寄存器“里”的值赋予AX,由于二者都是word型,所以没有必要加“WORD”mov ax,word ptr [bx];是把内存地址等于“B ...
- 【POJ 2152】 Fire
[题目链接] 点击打开链接 [算法] 同样是树形DP,但是比较难,笔者做这题看了题解 令f[i][j]表示在以i为根的子树中 1.在以i为根的子树中建一些消防站 2.在节点j必须建一个消防站 3.以i ...
- gunicorn部署Flask服务
作为一个Python选手,工作中需要的一些服务接口一般会用Flask来开发. Flask非常容易上手,它自带的app.run(host="0.0.0.0", port=7001)用 ...
- gdb core调试
原文链接 http://blog.163.com/lanka83/blog/static/32637615200801793020182/http://blog.csdn.net/taina2008/ ...
- QT笔记-布局
1 QT中使用布局器QLayout布局 2自动计算各个空间的大小和位置 采用的既定policy策略来调整子窗口的大小和位置 3QHBoxLayout横向布局 QVBoxLayout纵向布局 QHBo ...
- Python2.7 Queue模块学习
前面了解了一下threading,发现一般都是和queue模块配合使用的,queue产生一个队列,队列模式有3种,针对这三种队列分别有三个构造函数: 1 FIFO队列先进先出:class Queue. ...
- java中static,super,final关键字辨析
1:static关键字 利:1)对对象的共享数据提供单独的空间存储. 2)修饰的方法可以直接被类名调用 弊:1)生命周期长. 2)访问出现限制(只能访问静态) 它可以有静态方法,静态类,静态变量 2: ...
- POJ2800:Joseph's Problem(等差数列)
传送门 题意 计算 \(\sum_{i=1}^n(kmodi)\) 分析 1.n>k 直接输出k*(n-k) 2.n<=k 我们发现k/i相同的k%i构成一个等差数列,那么我们从k/i-& ...
- IE6 浏览器常见兼容问题 大汇总（23个）[转载]
IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...