简单理解其实组件就是制作自定义的标签,这些标签在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 组件化的更多相关文章

  1. vue2.0 组件化及组件传值

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...

  2. vue2.0组件库

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  3. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  4. vue2.0组件传值

    props down   emit up 嘿嘿    如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...

  5. Vue2.0+组件库总结

    转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...

  6. 转:Vue2.0+组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  7. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  8. Vue2.0组件之间通信(转载)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  9. Vue2.0组件实现动态搜索引擎(一)

    原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.c ...

随机推荐

  1. leetcode 664. Strange Printer

    There is a strange printer with the following two special requirements: The printer can only print a ...

  2. HDU3974 Assign the task —— dfs时间戳 + 线段树

    题目链接:https://vjudge.net/problem/HDU-3974 There is a company that has N employees(numbered from 1 to ...

  3. 并不对劲的字符串专题(二):kmp

    据说这些并不对劲的内容是<信息学奥赛一本通提高篇>的配套练习. 先感叹一句<信息学奥赛一本通提高篇>上对kmp的解释和matrix67的博客相似度99%(还抄错了),莫非mat ...

  4. ThreadLocal工具类的使用(隔离思想)

    ThreadLocal不是用来解决共享对象的多线程访问问题的, 通过ThreadLocal的set()方法设置到线程的ThreadLocal.ThreadLocalMap里的是是线程自己要存储的对象, ...

  5. Code Project精彩系列(转)

    Code Project精彩系列(转)   Code Project精彩系列(转)   Applications Crafting a C# forms Editor From scratch htt ...

  6. 利用jenv安装maven, tomcat,zookeeper等

    jenv有关的网站: http://jenv.io https://github.com/gcuisinier/jenv 1.  执行jenv安装 $ curl -L -s get.jenv.io | ...

  7. 洛谷 P4552 [Poetize6] IncDec Sequence【差分+脑洞】

    一看区间操作,很容易想到差分 所以就是先差分,然后为了保证最小步数,把政府差分抵消,也就相当于原数组区间加减 第二问,因为差分数组抵消之后不为0就需要使用n+1的虚拟位置,而这个的值其实没有,所以我们 ...

  8. bzoj 2809: [Apio2012]dispatching【dfs序+主席树】

    可并堆就可以,但是想复健一下主席树. 考虑枚举管理者,然后选忍者的时候在子树中贪心的从小到大选.做成dfs序就是选区间内和小于等于k的最多点.可以用主席树,查询的时候在主席树上二分即可 这里注意,为了 ...

  9. bzoj 4500: 矩阵【差分约束】

    (x,y,z)表示格子(x,y)的值为z,也就是x行+y列加的次数等于z,相当于差分约束的条件,用dfs判断冲突即可. #include<iostream> #include<cst ...

  10. 【插件开发】—— 5 SWT控件以及布局使用

    前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 经过前几篇的介绍,多少对SWT又有了一些认识,那么这篇继续来看一下一些控件的组合使用 ...