vue2 基础学习03 (Vue组件的进一步理解)
栏目: JavaScript · 发布时间: 6年前
内容简介:今天看了慕课网的一个教学视频
今天看了慕课网的一个教学视频 Vue入门 感觉清晰了很多
首先引入一个简单的todolist案例
-
初始化项目(引入
vue.js部分省略)<!-- 挂载点 --> <div id="app"> </div> <script> var app = new Vue({ el: '#app', //通过id选择器挂载上去 }) </script> -
初始化数据,遍历输出
<!-- 挂载点 --> <div id="app"> <!-- --> <div> <input type="text" > <button>添加任务</button> <ul > <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> </div> <script> var app = new Vue({ el: '#app', //通过id选择器挂载上去 data(){ //介意这样写data,因为在后面的vue-cli里面就是这样写的 自我理解 return{ list:[1,2,3] // 先把写死后面再更改 } } }) </script>以下是效果:
-
接下来就是动态添加数据了
<!-- 挂载点 --> <div id="app"> <!-- --> <div> <input type="text" v-model="listValue"> <button v-on:click="addList">添加任务</button> <ul > <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> </div> <script> var app = new Vue({ el: '#app', //通过id选择器挂载上去 data(){ //介意这样写data,因为在后面的vue-cli里面就是这样写的 自我理解 return{ list:[], // 先把写死后面再更改, listValue:'' // 把这个值双向绑定在 input中 } }, methods: { addList:function(){ this.list.push(this.listValue) //往数组中push数据,数据来源是input中的值 this.listValue = '' //添加完之后记得将input中间数据清空 } } }) </script>以上涉及数据的双向绑定
以下是将todolist应用进行了组件化
-
对todolist组件进行拆分。
<div id="app"> <div> <input v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <todo-item v-for="(item, index) in list" :key="index" :content="item" :index="index" @delete='handleDelete' > </todo-item> </ul> </div> <script> //全局组件 Vue.component('todo-item', { props:['content','index'],//相当于接收父节点的属性 template: ` <li v-on:click="handleClick">{{content}}{{index}}</li>` , methods:{ handleClick:function(){ this.$emit('delete',this.index)//相当于传递给父类 } } }) // //局部组件 // var toDoItem = { // template: `<li >item</li>` // } var app = new Vue({ el: '#app', //局部组件的声明 // components: { // 'todo-item': toDoItem // }, data: { inputValue: '', list: [] }, methods: { handleSubmit: function () { this.list.push(this.inputValue) this.inputValue = "" }, handleDelete: function(index){ this.list.splice(index,1) } } })
总结:
- 子组件向父组件传递参数: 通过绑定属性的形式
- 父组件向子组件: 发布订阅模式
这一块准备在后面的文章中将组件间通信单独拎出来分析。加深自己的理解。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Node即学即用
[英] Tom Hughes-Croucher、[英] Mike Wilson / 郑达韡 / 人民邮电出版社 / 2013-2 / 39.00元
《Node即学即用》由休斯-克劳奇、威尔逊编著,《Node即学即用》讲解如何用Node构建可扩展因特网应用,是全面的实用指南,除了详细介绍Node提供的API外,还用大量篇幅介绍了服务器事件驱动开发的重要概念。内容涉及跨服务器的并发连接、非阻塞I/O和事件驱动的编程、如何支持各种数据库和数据存储工具、NodeAPI的使用示例等。适合对JavaScript及编程有一定程度了解的读者阅读。一起来看看 《Node即学即用》 这本书的介绍吧!