Vue 2.0 小栗子初入坑

发表于 | 阅读次数: 
1
2
3
4
5
6
7
8
9
10
HTML代码：
<div id = "app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos_1">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
JavaScript代码：
new Vue({
  el: '#app',
  data: {
    todos_1: [{
      text: 'Learn JavaScript'
    }]
  },
  methods: {
    addTodo: function() {
      var text = this.newTodo.trim()
      if(text) {
    this.todos_1.push({
      text: text
    })
    this.newTodo = ''
      }
    },
    removeTodo: function(index) {
      this.todos_1.splice(index, 1)
    }
  },
})

运行上面的代码，打开谷歌控制台，在输入框输入，发现控制台报错，错误原因：[Vue warn]: You are setting a non-existent >path “newTodo” on a vm instance. Consider pre-initializing the property with the “data” option for more reliable reactivity and >better performance.。输入框的例子在官方前面的例子也有出现，对比后发现v-model=”newTodo”，中的“newTodo”没有在>data中进行定义，所以只需在data{}中加入newTodo: ‘ ‘即可！这个错误看起来好像在运行过程中没有什么影响，但天知道以后会>不会被他坑惨，所以记录一下！