1.获取data里面的数据

<button @click="getInputValue">获取data里面的数据</button> <script>
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue'
      },
      methods: {
        getInputValue() {
          alert(this.msg);
        }
      }
    }
</script>

2.改变data里面的数据

<button @click="setValue">改变data里面的数据</button> 
<script>
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue'
      },
      methods: {
        setValue() {
          this.msg='改变data里面的数据';
        }
      }
    }
</script>

3.传参
（1）动态传值（和小程序类似）

<button data-book-id='111' @click="delteData">传参</button> 
<script>
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          bookId: 1
      },
      methods: {
      	//必须得传递事件对象e
        delteData(e) {
          //data-book-id='111' id的首字母自动变大写
          alert(e.srcElement.dataset.bookId);
        }
      }
    }
</script>

（2）值写死

<button @click="delteData('111')">改变data里面的数据</button> 
<script>
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue'
      },
      methods: {
        delteData(value) {
          alert(value);
        }
      }
    }
</script>

4.获取事件对象

<button @click="eventFunction($event)">获取事件对象</button> 
<script>
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue'
      },
      methods: {
        eventFunction(e) {
        	//获取当前DOM节点
        	e.srcElement
        	//获取当前DOM节点的样式，并设置当前DOM样式
        	e.srcElement.style.background='red';
        }
      }
    }
</script>

5.方法里面调用方法
和小程序一样，用this.*()调用