Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素。组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用。
一个简单组件例子(全局注册)
<!DOCTYPE html> <html><body><div id="app"><!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--><the-component></the-component></div></body><script src="js/vue.js"></script><script>// 1.创建一个组件构造器var myComponent = Vue.extend({template: '<div> my first component!</div>'})// 2.注册组件,并指定组件的标签,组件的HTML标签为<the-component> Vue.component('the-component', myComponent)new Vue({el: '#app'});</script> </html>
运行结果:
分析:
1.Vue.extent() 是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器,而不是一个具体的组件实例。它里面的选项对象的template属性用于定义组件要渲染的HTML。
2.Vue.component() 注册组件时,需要提供2个参数,第一个参数是组件的标签,第二个是组件构造器。它调用了组件构造器myComponent,创建一个组件实例。
3.组件应该挂载在某个Vue实例下,
new Vue({el: '#app' });
这段代码必须要有,表示挂载在#app元素上,否则不会生效。
局部注册:
<script>// 1.创建一个组件构造器var myComponent = Vue.extend({template: '<div> my first2 component!</div>'})new Vue({el: '#app',components: {// 2. 将myComponent组件注册到Vue实例下'the-component' : myComponent}});</script>
父组件和子组件
可以在组件中定义并使用其他组件,构成父子组件关系。
例子:(注意版本用vue.js 1.0的,2.0版本,button都出现不了)
<!DOCTYPE html> <html><head><meta charset="utf-8"></head><body><!-- 子组件模板 --><template id="child-template"><input v-model="msg"><button v-on:click="notify">Dispatch Event</button></template><!-- 父组件模板 --><div id="events-example"><p>Messages: {{ messages | json }}</p><child></child></div></body><script src="http://cdn.bootcss.com/vue/1.0.0-csp/vue.js"></script><script>// 注册子组件// 将当前消息派发出去 Vue.component('child', {template: '#child-template',data: function () {return { msg: 'hello' }},methods: {notify: function () {if (this.msg.trim()) {this.$dispatch('child-msg', this.msg)this.msg = ''}}}})// 初始化父组件// 将收到消息时将事件推入一个数组var parent = new Vue({el: '#events-example',data: {messages: []},// 在创建实例时 `events` 选项简单地调用 `$on` events: {'child-msg': function (msg) {// 事件回调内的 `this` 自动绑定到注册它的实例上this.messages.push(msg)}}})</script> </html>
运行结果:
props示例
<!DOCTYPE html> <html><head><meta charset="utf-8"></head><body><template id="myComponent"><table><tr><th colspan="2">子组件数据</th></tr><tr><td>myname</td><td v-text="myName"></td></tr><tr><td>myage</td><td v-text="myAge"></td></tr></table></template><div id="app"><my-component v-bind:my-name="name" v-bind:my-age="age"></my-component></div></body><script src="http://cdn.bootcss.com/vue/1.0.0-csp/vue.js"></script><script>var vm = new Vue({el: '#app',data: {name: 'wangjuan',age: 24},components: {'my-component': {template: '#myComponent',props: ['myName', 'myAge']}}});</script> </html>
结果为:
prop双向绑定
<!DOCTYPE html> <html><head><meta charset="utf-8"></head><body><template id="myComponent"><table><tr><th colspan="3">子组件数据</th></tr><tr><td>myname:</td><td v-text="myName"></td><td><input type="text" v-model="myName" /></td></tr><tr><td>myage:</td><td v-text="myAge"></td><td><input type="text" v-model="myAge" /></td></tr></table></template><div id="app"><table><tr><th colspan="3">父组件数据</th></tr><tr><td>name:</td><td>{{ name }}</td><td><input type="text" v-model="name" /></td></tr><tr><td>age:</td><td>{{ age }}</td><td><input type="text" v-model="age" /></td></tr></table><my-component v-bind:my-name="name" v-bind:my-age="age"></my-component></div></body><script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script><script>var vm = new Vue({el: '#app',data: {name: 'wangjuan',age: 24},components: {'my-component': {template: '#myComponent',props: ['myName', 'myAge']}}});</script> </html>
结果:
prop默认是单向绑定,不过这里我感觉默认是双向绑定,不知道哪里出问题了。。。
使用.sync或.once 绑定修饰符显式地强制双向或单次绑定。
子组件可以用this.$parent访问它的父组件。根实例的后代可以用this.$root访问它。父组件有一个数组this.$children,包含它所有的子元素。
转载于:https://www.cnblogs.com/wj204/p/5923045.html
Vue.js组件学习相关推荐
- vue.js组件学习(上)
组件是vue.js中非常重要的一部分,打个比方,会用组件得人喝着茶就写完的页面,不会用的代码打到手抽筋也未必完的成. 首先何为组件 组件可以封装重用的代码,扩展HTML元素,更高的说组件是自定义元素. ...
- 构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
- Vue.js组件化开发实践
Vue.js组件化开发实践 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
- 三十七、深入Vue.js组件Component(下篇)
@Author:Runsen @Date:2020/7/4 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
- 三十六、深入Vue.js组件Component(上篇)
@Author:Runsen @Date:2020/6/15 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
- VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
- (24)Vue.js组件—组件注册
一.Vue.js组件注册内容 • 全局注册 • 组件基础 • 局部注册 二.全局注册 • 全局注册的组件在注册后可以用于任意实例或组件中. <body><div id="a ...
- vue.js 组件之间传递数据 1
vue.js 组件之间传递数据 框架 浏览数:437 2017-8-21 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据 ...
- 如何对第一个Vue.js组件进行单元测试
by Sarah Dayan 通过莎拉·达扬 In Build Your First Vue.js Component we made a star rating component. We've c ...
最新文章
- Android之 AndroidManifest xml 文件解析
- jqueryonclick事件_jquery动态移除/增加onclick属性详解
- 二叉树的锯齿形层序遍历Python解法
- 剑指offer:数据流中的中位数(小顶堆+大顶堆)
- 命令行模式下几个网络命令详解
- R语言ETL工程系列:检索(select)
- 在spyder中设置缩进对齐线提示
- 计算机中 位(bit)、字节(Byte)、K、M、G之间的换算关系
- GIS在农业方面的应用
- 【转】Jsp自定义标签详解
- Cross the Wall UVALive - 5097 (贪心+斜率dp)
- 超详细的阿里云服务器购买及远程连接开机(Win系统)
- 计算机里设备和驱动器下面有个没有名字的文件夹怎么删除它
- postgresql mysql 源码安装_PostGreSQL12 源码安装与字符集修改 (一)
- 人工智能+智能运维解决方案_如何建立对人工智能解决方案的信任
- 使用METIS软件包进行图划分
- 2017年香港家庭用品展览会会刊(参展商名录)
- 什么是 DNS SPF 记录?
- 使用gitee托管代码
- 通过vite-plugin-svg-icons 使用SVG图片