Vue事件处理 - 《代码人生》

源码
接着上一个笔记的 demo 来进行
https://www.jianshu.com/p/8c4fd246a83f
源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue事件处理</title>
    <script src="vue.js"></script>
    <style type="text/css">
     :root {
        --span-color: red;
    }
    span {
        color: var(--span-color);
    }
    </style>
</head>
<body>
    <div id="app">
    <!-- 用 form 表单来引出一些事件的写法 -->
        <!-- v-on: 为了看起来好看还可以用 @ f代替 -->
        <!--  <form action="index.php" method="get" v-on:submit.prevent="submitMyFrom"> -->
       <!--  <form action="index.php" method="get" @submit.prevent="submitMyFrom">
            <input type="submit" value="提交">
        </form> -->
<!-- 写一些其他的方法 -->
<input @click="updateNum" type="button" value="提交">
<!-- click 里面也可以直接写 num+=1  来实现同样的效果 -->
<input @click="num+=1" type="button" value="提交">
<span>{{ num }}</span>
    </div>
    <script>
    // console.log(Vue);
    new Vue({
        //id dom
        el: "#app",
        data:{
            num:0
        },
        //方法
        methods: {
            submitMyFrom: function(e) {
                //之前在表单提交的时候会将默认的事件给阻止掉 之后执行下面我们自己写的
                // e.preventDefault();
                alert('submit');
            },
            updateNum:function(){
            this.num += 1;
            }
        }
    });
    </script>
</body>
</html>