码迷,mamicode.com
首页 > 其他好文 > 详细

初识Vue,简单的todolist

时间:2018-07-11 17:11:44      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:todolist   lis   ext   index   eth   java   入门   data   vuejs   

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

标签:todolist   lis   ext   index   eth   java   入门   data   vuejs   

原文地址:https://www.cnblogs.com/detanx/p/vueTodolist.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!