监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

示例：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

own:

<div id="app">
     <!--v-show的用法 -->
        <img v-bind:[mysrc]='show' v-bind:alt='time'></img>
        <!-- isGreen 是用来判断，如果有值我就显示box2 -->
        <div class="box" v-bind:class='{box2:isGreen}'></div>

        <button @click="clickHandler">切换图片</button>
        <button @click="changeColor">切换颜色</button>
        <button @click="count+=1">加{{count}}</button>
        
    </div>

    <script src="./js/vue.js"></script>

    <script>
    var app = new Vue({
     el:'#app',
     data:{
        title:'土豆',
        show:"./images/111.jpg",
        //获取一个当前时间
        time:`页面加载于${new Date().toLocaleDateString()}`,
        isGreen:false,
        mysrc:'src',
        count:0,
     },

事件处理方法( 代码写在 `v-on` 指令中是不可行的)

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。

因此 v-on 还可以接收一个需要调用的方法名称。

<body>
<div id = 'my_event'>
    <button v-on:click="gret">点我</button>

</div>

<script src="./js/vue.js"></script>

<script>
var myevent = new Vue({
    el: '#my_event',
    data:{
        name:'riven',

    },
    //在methods对象中定义方法
    methods:{
        //event =[object MouseEvent] 当前鼠标点击的对象
        gret:function(event){
            alert("你好"+this.name+'!');
            if(event){
                //进行判断后 他会触发2次操作
                alert(event.target.tagName)
            }
        }
    }
})
</script>
</body>
//也可以直接调用 但是不触发event事件
myevent.gret()

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

own:

<body>
    <div id='my_test'>
        <!-- 将hi作为参数传给函数处理 -->
        <button v-on:click="say('hi')">说嗨</button>
        <!-- 将what作为参数传给函数处理 -->
        <button v-on:click="say('what')">说什么</button>

    </div>

<script src="./js/vue.js"></script>
<script>

var test=new Vue({
    el:'#my_test',
    data:{

    },
    methods:{
        //通过传进来的参数进行判断，并执行相关操作
        say:function(message){
            alert(message)
        }
    }
})
</script>
</body>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

<body>
    <div id='my_test'>
            <!-- 可以用特殊变量 $event 把它传入方法 -->
    <button v-on:click="warn('我喜欢看中文.', $event)">
                    Submit
    </button>

    </div>

<script src="./js/vue.js"></script>
<script>

var test=new Vue({
    el:'#my_test',
    data:{

    },
    methods:{
        //通过传进来的参数进行判断，并执行相关操作
        warn:function(message,event){
            //现在我们可以访问原生事件对象
            if(event) {
                alert(message)
            }
        }
    }
})
</script>
</body>