6-vue语法 v-on事件指令

[v-on指令用于绑定方法]

属性写在data里，方法写在mnethods里。data和methods是同级的

methods中的this，指的是vue对象，因为title是定义在data这个函数中的，现在要在methods中使用，就要通过顶级对象vue去获取到

示例：点击标签，改变显示内容。

<template>
  <view>
    <view v-on:click="onclick">{{title}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title:"学习"
      }
    },
    methods: {
      onclick:function(){
        this.title="uniapp"
      }
    }
  }
</script>

<style lang="scss">

</style>

点击学习后，文字变成了uniapp

[示例2：点击按钮数字增加]

buttomn标签中的@符号是v-on的简写形式，下面methods中的clickNum是ES6的函数的简写形式，就少写了function这个单词，data函数就是ES6的简写形式

<template>
  <view>
    <view v-on:click="onclick">{{title}}</view>
    <button @click="clickNum">数字:{{num}}</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title:"学习",
        num:1
      }
    },
    methods: {
      onclick:function(){
        this.title="uniapp"
      },
      // ES6的函数写法
      clickNum(){
        this.num += 1
      }
    }
  }
</script>

<style lang="scss">

</style>

按钮上的数字初始值是1，点击按钮后数字增加