Vue基础入门，TodoList编写

最新推荐文章于 2024-04-13 11:25:53 发布

GzxNGU

最新推荐文章于 2024-04-13 11:25:53 发布

阅读量209

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/qq_38736967/article/details/110840848

版权

Vue基础入门，TodoList编写

前言

前言

本人最近开始学习 Vue 因希望自己坚持下去 不半途而废 故写下自己的学习过程以及心得体会，若有错误的地方，望各位批评指正。  
初学Vue，与学习React一样 自然少不了TodoList的编写，在记录一些基础语法后，笔者会记录如何用Vue编写一个TodoList。

基础篇（语法）

Vue的基础指令：
		数据遍历：v-for
		事件绑定：（缩写为@） v-on:click='handleClick' = @click
		双向绑定：v-model 标签与数据同步 例：<input type="text" v-model ="inputValue"/> input发生改变时data里的inputValue也会改变。
		父子组件互相传值: v-bind(缩写为：)  v-bind:message = :message

//Vue页面的基本搭建：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello World'
            }
        })
    </script>
</body>
</html>

TodoList 编写过程：这一步实现了数据的新增

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" >
        <!-- v-model: 双向绑定数据 当一方发生改变时 两头的数据将会一起改变 。
            也就是说我们这个inputValue值发生改变时，下方我们定义在data里的inputValue也会发生改变 -->
        <input id="" v-model="inputValue"/>
        <!-- 使用 v-on 绑定方法 -->
        <button v-on:click="handleInput">提交</button>
        <ul>
            <!-- 1.循环遍历 list里的数据 -->
            <li v-for='item in list'>{{item}}</li>
        </ul>
    </div>
    
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:[],
                inputValue:''
            },
            //把上面使用的方法进行定义
            methods:{
                // 上方的button按钮点击后 触发此方法
                handleInput:function(){
                    // 使用 this.list  即可获取到我们在data里定义的 list数组
                    // 使用 push 往数组里塞我们input框里的值
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                }
            }
        })
    </script>
</body>
</html>

效果如下：
在这里插入图片描述

注册我们的自定义组件并使用它完成点击删除节点功能

下面我们自定义一个组件 TodoItem 
主要作用:便于父子组件进行参数值传递，并且监听事件
交互流程：
	1.注册组件 并且设置绑定的methods
	2.使用 **$emit** 来声明子组件的监控函数 并传递值给父组件
	3.在标签里加上监听事件	v-on：delete 或 @delete
	4.在声明Vue的地方处理这个 method

使用方法： <todo-item v-for="(item,index) in list" @click="delete" >{{item}}</todo-item>

    <div id="app" >
        <input id="" v-model="inputValue"/>
        <button v-on:click="handleInput">提交</button>
        <ul>
        	// **  3.触发双向绑定 $emit 并调用 handleItemDelete 方法 **
            <todo-item :content="item" :index="index" v-for="(item,index) in list" 
            		@delete="handleItemDelete">
            		{{item}}
            </todo-item>
        </ul>
    </div>
    
    <script>
        var TodoItem = {
            props:['content','index'],
            // ** 1.声明 li 的点击事件函数 **
            template:"<li @click='handleItemClick'>{{content}}</li>",
            methods:{
              // this.$emit 表示当这个函数被触发时，同时触发双向绑定的函数  也就是上方的@delete
              // this.index : 传递的参数 li动态渲染时的下标
                handleItemClick:function(){
                	// **2.  双向绑定事件 $emit 并传递这个li下标 **
                    this.$emit("delete",this.index);
                }
            }
        }
        
        var app = new Vue({
            el:'#app',
            data:{
                list:[],
                inputValue:''，
                methods:{
                	//**4. 拿到数据后 使用 splice 函数删除掉这个节点数据 **
	                handleItemDelete:function(index){
	                    this.list.splice(index,1)
	                }
	         	  }
	           }
        })
    </script>

完成版代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 1. 编写 输入框 按钮 以及用来展示数据的ul标签 -->
        <input type="text" v-model ="inputValue"/>
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <todo-item :content="item" :index="index" v-for="(item,index) in list" @delete="handleItemDelete">{{item}}</todo-item>
        </ul>
    </div>


    <script>
        // 3.自定义一个 TodoItem组件 
        // props参数用来接收父组件传的数值，
        // template参数是这个组件的模板，也就是使用这个组件时 会用template里的值进行替换
        // method 是监听父组件的方法 当父组件绑定了监听方法（即 v-on:method 或者 @method）时，即触发此方法
        var TodoItem = {
            props:['content','index'],
            template:"<li @click='handleItemClick'>{{content}}</li>",
            methods:{
                handleItemClick:function(){
                    this.$emit("delete",this.index);
                }
            }
        }

        var app = new Vue({
            el:'#app',
            components:{
                TodoItem: TodoItem
            },
            data:{
                // 2.定义用来存放数据的List数组以及输入框的变量 inputValue
                list:[],
                inputValue:''
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                },
                handleItemDelete:function(index){
                    this.list.splice(index,1)
                }
            }
        })
    </script>
</body>
</html>

GzxNGU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础入门，TodoList编写

Vue基础入门，TodoList编写前言基础篇（语法）TodoList 编写过程：这一步实现了数据的新增注册我们的自定义组件并使用它完成点击删除节点功能完成版代码：前言本人最近开始学习 Vue 因希望自己坚持下去不半途而废故写下自己的学习过程以及心得体会，若有错误的地方，望各位批评指正。初学Vue，与学习React一样自然少不了TodoList的编写，在记录一些基础语法后，笔者会记录如何用Vue编写一个TodoList。基础篇（语法）Vue的基础指令：数据遍历：v-for
复制链接

扫一扫