初入vuejs，描述一些踩坑經(jīng)歷

• methods方法不能使用es6的寫法來實現(xiàn)

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

這樣寫的話，會發(fā)現(xiàn)數(shù)據(jù)不會發(fā)生變化，即不會觸發(fā)雙向綁定的事件的發(fā)生，更加嚴重的是，要是我們使用的是單文件的組件方式的話，會直接對應(yīng)不到相應(yīng)的數(shù)據(jù)

<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 = '小白';
    }
  }