使用Vue.js实现一个简易的TodoList功能，并利用组件化（全局组件/局部组件）思想对其加以改造。

原创已于 2022-08-19 00:32:17 修改 · 466 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #html #经验分享

于 2021-08-28 13:40:32 首次发布

Vue2.x 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何使用Vue.js实现一个TodoList应用，通过Vue的v-model、v-on和v-for指令实现输入内容提交及列表显示，并探讨了组件化的概念。文章演示了全局组件和局部组件的创建与使用，通过v-bind传递数据到子组件，展示了MVVM设计模式在实际项目中的应用。

效果展示：
在input框内输入内容，自动添加并显示在下方。
请添加图片描述
引入Vue.js：

<Script src="./vue.js"></Script>

部分源代码实例：

<!-- 实现点击提交按钮，将input框内的内容添加下去 -->
   <div id="app">
       <!-- v-model实现数据的双向绑定,当input里面的内容发生变化的时候,Vue实例中的data里的inputValue就会变化,然后页面变化 -->
       <input type="text" v-model="inputValue">
       <!-- 在button上绑定一个事件，v-on:click -->
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <!-- 标签指令v-for 用于循环数据 -->
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
    
   <script>
       // Vue不需要处理DOM上的细节,而是着重于数据的本身.即MVVM设计模式.
       var app = new Vue({
           el:'#app',
           data:{
               list:[],
               inputValue:''
           },
           methods:{
               handleBtnClick:function(){
                //    alert('click');
                this.list.push(this.inputValue); // push() 往list数组中添加一些数据,数据发生变化时,页面也会发生变化
                // alert(this.inputValue)
                this.inputValue = '';  // 让每次点击完提交按钮后,input框内的数据清空
               }
           }
       })       
   </script>

扩展：引入组件化的思想来改造TodoList
【全局组件与局部组件的简介】
（全局组件）
全局组件：Vue.component(‘组件名’,{template:“组件内容”})
在页面使用:<组件名></组件名>
注意：组件名使用驼峰写法，页面使用时可以用-链接，例如：组件名：TodoItem,页面使用:

v-bind:content=“item” v-for=“item in list"表示页面中循环list内每一项内容，内容用item变量显示，v-bind通过content变量将item内容传给组件。
组件内容：props:[‘content’], template:” < l i> {{content}}</l i>" 组件用props接收页面传进来的变量值，变量为content

（局部组件）
局部组件：var TodoItem = {props:[‘‘content],template:“< li>{{content}}</ li>”}
要使用局部组件，不能直接在页面上使用，而需要在Vue实例中注册一下局部组件var app = new Vue({ el:’#root’, components:{ TodoItem: TodoItem}, data:{…} })
注册后就可以在页面上使用组件todo-item了

（总结）
①利用Vue.component定义了一个全局组件叫TodoItem，可以在页面模板里直接使用todo-item
②通过v-for:"item in list"来决定一共循环多少todo-item，同时把每一个list项的内容，通过v-bind的语法，借助content变量，传给了todo-item这个子组件
③子组件TodoItem想使用父组件todo-item的数据，则需要在props里，对content变量进行接收
④接收后，子组件的模板里用插值表达式使用了content变量，则父组件就会把content渲染出来

（一）全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
</head>
<body>
   <!-- 组件化改造内容：list标签组件化 -->
   <div id="app">
       <input type="text" v-model="inputValue">
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <!-- todo-item就是组件名TodoItem，这里不区分大小写 -->
           <!-- v-bind绑定值 -->
           <todo-item v-bind:content="item" v-for="item in list"></todo-item>
       </ul>
   </div>
    
   <script>
       // 创建全局组件的一个方法Vue.component
       Vue.component('TodoItem',{
           props: ['content'],                    // 接收外部传入的v-bind:content的值
           template:"<li>{{content}}</li>",       // 创建一个模板
       });

       var app = new Vue({
           el:'#app',
           data:{
               list:[],
               inputValue:''
           },
           methods:{
                handleBtnClick:function(){
                this.list.push(this.inputValue); 
                this.inputValue = '';  
               }
           }
       })       
   </script>
</body>
</html>

（二）局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
</head>
<body>
   <!-- 组件化改造内容：list标签组件化 -->
   <div id="app">
       <input type="text" v-model="inputValue">
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <!-- todo-item就是组件名TodoItem，这里不区分大小写 -->
           <!-- v-bind绑定值 -->
           <todo-item v-bind:content="item" v-for="item in list"></todo-item>
       </ul>
   </div>
    
   <script>
       // 创建一个局部组件
       var TodoItem = {
           props: ['content'],                     // 接收外部传入的v-bind:content的值
           template:"<li>{{content}}</li>",        // 创建一个模板
       };
       

       var app = new Vue({
           el:'#app',
           components:{
               TodoItem:TodoItem  // 将TodoItem注册到Vue实例之中，原来叫TodoItem，现在仍然叫TodoItem。
           },
           data:{
               list:[],
               inputValue:''
           },
           methods:{
                handleBtnClick:function(){
                this.list.push(this.inputValue); 
                this.inputValue = '';  
               }
           }
       })       
   </script>
</body>
</html>