Vue组件化思想修改todolist

2019年1月9日21:35:27 发表评论 阅读(1,862)

Vue组件化思想修改todolist

一个页面有很多部分组成,比如:轮播以及内容区域等等,如果我们把业务逻辑都写在一个页面的话,不利于维护,组件相当于页面的一个部分,一个页面可以切割为很多部分,这样可以提高代码的可维护性以及方便开发。

组件化思想修改todolist

Vue组件化思想修改todolist

如上图,输入任何内容的时候,我们都会把内容放在下面的红框里,每一个列表项都是页面的一部分,既然是一部分我们就可以把它拆分为一个组件。

源代码

  1. <div id="app">
  2.     <input type="text" v-model="inputValue"/>
  3.     <button v-on:click="btnClick">提交</button>
  4.     <ul>
  5.         <li v-for="item in List">{{item}}</li>
  6.     </ul>
  7. </div>
  8. ipt>
  9. var app = new Vue({
  10.     el:'#app',
  11.     data: {
  12.         List: [],
  13.         inputValue: ''
  14.     },
  15.     methods: {
  16.         btnClick: function () {
  17.             this.List.push(this.inputValue)
  18.             this.inputValue = ''
  19.         }
  20.     }
  21. })
  22. ript>

当前列表项是通过循环li标签来显示的,现在我想把li标签的内容整体变为一个组件,要怎么做呢?

  • 在script标签中调用一个component方法,component是vue提供给我们创建全局组件的方法,具体实例如下:
  1. Vue.component("TodoList",{ //定义全局组件,其中名字可简写为todo-list
  2. props:['content'],  //从父组件接收内容
  3. template:"<li>{{content}}</li>" //组件模板(要用插值表达式调用)
  • 使用todo-list组件,具体实例如下:
  1. <ul>
  2.     <todo-item v-bind:content="item" v-for="item in List"></todo-item>
  3. </ul>

循环List时,把List的每一项值赋值给item,然后item通过v-bind的语法通过content这个变量传给todo-item子组件。

最后代码

  1.    <div id="app">
  2.        <input type="text" v-model="inputValue"/>
  3.        <button v-on:click="btnClick">提交</button>
  4.        <ul>
  5.            <todo-item v-bind:content="item" v-for="item in List"></todo-item>
  6.        </ul>
  7.    </div>
  8. <script>
  9. Vue.component("TodoItem",{
  10.        props:['content'],
  11.        template:"<li>{{content}}</li>"
  12.    })
  13.    var app = new Vue({
  14.        el:'#app',
  15.        data: {
  16.            List: [],
  17.            inputValue: ''
  18.        },
  19.        methods: {
  20.            btnClick: function () {
  21.                this.List.push(this.inputValue)
  22.                this.inputValue = ''
  23.            }
  24.        }
  25.    })
  26. </script>

 

完。


 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛