脚本宝典收集整理的这篇文章主要介绍了vue2 基础学习03 (Vue组件的进一步理解),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
今天看了慕课网的一个教学视频 Vue入门 感觉清晰了很多
初始化项目(引入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组件进行拆分。
<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) } } })
总结:
这一块准备在后面的文章中将组件间通信单独拎出来分析。加深自己的理解。
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! vue,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的vue2 基础学习03 (Vue组件的进一步理解)全部内容,希望文章能够帮你解决vue2 基础学习03 (Vue组件的进一步理解)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。