初识Vue，简单的todolist

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/detanx/p/vueTodolist.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Vue.js实现的TodoList应用案例，通过具体代码展示了如何在Vue项目中进行双向数据绑定、子组件与父组件之间的通信及事件处理等关键技术点。

vue开发源码：https://vuejs.org/js/vue.js

todolist代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue入门</title>
  <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <div id="app">
    <input v-model="inputValue" type="text" name="">
    <button @click="submit">提交</button>
   
    <ul>
      <todo-item 
        v-for="(item, index) in list" 
        :key="index" 
        :content="item" 
        :index="index" 
        @delete="handleDelete"
        @update="handleUpdate"
        >
      </todo-item>
    </ul>
    <input v-model="updateValue" type="text" name="">
    <button @click="update">确定</button>
  </div>
</body>
<script type="text/javascript">

  Vue.component("todo-item", {
    props:["content", "index"],
    template:'<li>{{content}} <button @click="handleClick">remove</button><button @click="handleUp">update</button></li>',
    methods:{
      handleClick:function() {
        this.$emit('delete', this.index)
      },
      handleUp:function() {
        this.$emit('update', this.index)
      }
    }
  })

  new Vue({
    el:"#app",
    data: {
      inputValue : '',
      updateValue : '',
      in:'',
      list:[]
    },
    methods: {
      submit:function() {
        if(this.inputValue.trim() !== "") {
          this.list.push(this.inputValue);
        }
          this.inputValue = ''
      },
      handleDelete: function(index) {
        this.list.splice(index, 1);
      },
      handleUpdate: function(index) {
        this.updateValue = this.list[index]
        this.in = index;
      },
      update: function() {
        console.log(this.in)
        this.list.splice(this.in, 1, this.updateValue);
        this.updateValue = ''
      }
    }
  })
</script>
</html>

　　重点：子组件与父组件的值传递

转载于:https://www.cnblogs.com/detanx/p/vueTodolist.html