Vue-事件绑定

Vue中的事件绑定：

        v-on：事件名="函数/方法"

        语法糖：@事件名="函数/方法"

<div id="app">
    <button v-on:click="fn">修改msg</button>
    <p>{{msg}}</p>
</div>

<script>
    let vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello'
    },
    methods: {
        fn: function () {
                this.msg = '666'
            }
    })
</script>

点击按钮后，msg改为666，p标签中的内容变为666

阻止默认事件：@事件名.prevent="函数/方法"

<div id="app">  
     <a @click.prevent="fn" href="http://www.baidu.com">阻止默认事件</a>
     <p>{{msg}}</p>
</div>

<script>
    let vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello'
    },
    methods: {
        fn() {
          this.msg = '666'   
        }
    })
</script>

点击a标签后不会跳转页面，将msg改为666

@事件名.once="函数/方法"：事件只执行一次

<div id="app">
    <button @click.once="fn">倒计时</button>
</div>

<script>
   let vm = new Vue({
       el: '#app',
       data: {
            msg: 'hello'
       },
       methods: {
          fn(){
            console.log('倒计时');
          }
       })
</script>

多次点击按钮，只会打印一次