vue2.0踩坑之旅

初入vuejs，描述一些踩坑经历

• methods方法不能使用es6的写法来实现

data: {
   name: "子龙",
   newName: "xiaohei" 
},
methods: {
    changeName: () => {
      console.log(2222);
      this.name = '小红';
      this.newName = '小白';
    }
  }

这样写的话，会发现数据不会发生变化，即不会触发双向绑定的事件的发生，更加严重的是，要是我们使用的是单文件的组件方式的话，会直接对应不到相应的数据

<script>
module.exports = {
  name: 'app',
  data () {
    return {
      items: [1,2,3,4],
      nextNum: 4
    }
  },
  methods: {
    randomIndex: () => {
      return Math.floor(Math.random()*this.items.length);
    },
    add: () => {
      this.items.splice(this.randomIndex(), 0, ++this.nextNum);
    },
    remove:  () => {
      this.items.splice(this.randomIndex(), 1);
    }
  }
}

截图 2016-11-24 11时16分14秒.jpg

目前还没有找到具体的问题所在，可能是webpack打包的时候有点问题，所以建议在写methods方法的时候使用最基本的方法格式，即：

data: {
   name: "子龙",
   newName: "xiaohei" 
},
methods: {
    changeName: function () {
      console.log(2222);
      this.name = '小红';
      this.newName = '小白';
    }
  }