初识Vue,简单的todolist

Posted detanx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识Vue,简单的todolist相关的知识,希望对你有一定的参考价值。

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>

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

以上是关于初识Vue,简单的todolist的主要内容,如果未能解决你的问题,请参考以下文章

vue之简单的todoList

vue简单todolist

vue结合element-ui做简单版todolist

Vue初体验——用Vue实现简易版TodoList

基于vue的todolist案例

使用Vue父子组件通信实现todolist的功能示例代码