美文网首页
Vue 2.0 小栗子初入坑

Vue 2.0 小栗子初入坑

作者: L_CINA | 来源:发表于2016-11-01 15:57 被阅读48次
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>
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: ' '即可!这个错误看起来好像在运行过程中没有什么影响,但天知道以后会>不会被他坑惨,所以记录一下!

相关文章

  • Vue 2.0 小栗子初入坑

    运行上面的代码,打开谷歌控制台,在输入框输入,发现控制台报错,错误原因:[Vue warn]: You are s...

  • 脚手架安装

    Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli) 2017.03.01 10:34*字数...

  • vue搭建笔记

    如何搭建安装vue环境? 请看教程 Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli) w...

  • vue2.0 入坑

    其实不是第一次入坑,之前入过一次。后来由于后台开发任务和工作上的琐事又来了。 这次的目的很明确,游戏开发中需要用到...

  • VueJS2.0学习资源汇总

    Vue 2.0对比Vue 1Vue2.0 新手完全填坑攻略—从环境搭建到发布 中文教程英文教程 Vue-route...

  • vue入坑ing

    vue入坑ing

  • vue/cli

    vue3入坑 加速github的访问 vue-cli的坑 vue/cli 官网Vue CLIvue cli 的包名...

  • “Vue2.0”跟俺一起全面入坑 01

    “Vue2.0”跟俺一起全面入坑 01 补充一个关于console知识点 console.dir()可以现实一个对...

  • vue-cli构建vue项目-前端完美开发环境搭建

    参考资料: Vue2.0 新手完全填坑攻略—从环境搭建到发布 vue-cli构建vue项目Webpack 入门...

  • Vue 2.0 简单项目创建

    Vue 2.0 简单项目创建初学vue的入门项目,可以避免很多初学者的坑。

网友评论

      本文标题:Vue 2.0 小栗子初入坑

      本文链接:https://www.haomeiwen.com/subject/anpmuttx.html