vue2 基础学习03 (Vue组件的进一步理解)

发布时间:2019-05-07 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue2 基础学习03 (Vue组件的进一步理解)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

vue学习路径和建议----尤雨溪

vue官网

今天看了慕课网的一个教学视频 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>

    以下是效果:

    vue2 基础学习03 (Vue组件的进一步理解)

  • 接下来就是动态添加数据了

       <!-- 挂载点 -->     <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)                 }             }         })

总结:

  • 子组件向父组件传递参数: 通过绑定属性的形式
  • 父组件向子组件: 发布订阅模式
一块准备在后面的文章中将组件间通信单独拎出来分析。加深自己的理解。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!&nbsp;vue,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的vue2 基础学习03 (Vue组件的进一步理解)全部内容,希望文章能够帮你解决vue2 基础学习03 (Vue组件的进一步理解)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。