Vue.js入门笔记4

一、Vue中的事件绑定

事件绑定的两个要素：

绑定的事件类型
事件的响应函数

在vue中设置绑定的事件类型有两种方法，一种是使用vue-on，还有一种是更加简化的版本@事件类型，比如@click，设置点击事件。
在vue中设置事件的响应函数也有两种方式，一种是采用键值对的方式，一种是直接通过函数名进行定义，具体见案例演示。

三、入门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="value">
        <input type="button" value="+" v-on:click="addValue">
        {{ value }}
        <input type="button" value="-" @click="subValue">
    </div>

    <script src="../../vue/vue.js"></script>
    <script>
        const value = new Vue({
            el: "#value",
            data: {
                value: 0
            },
            methods: {
                addValue: function() {
                    this.value++;
                },
                subValue() {
                    if (this.value > 0) {
                        this.value--;
                    }
                }
            }
        })
    </script>
</body>
</html>

三、给事件响应函数传参

案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app" v-on:mousedown="setDefaultValue('默认值')">
        {{ value }}
    </div>

    <script src="../../vue/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                value: "还未设置默认值"
            },
            methods: {
                setDefaultValue(defaultValue) {
                    this.value = defaultValue
                }
            }
        })
    </script>
</body>
</html>

当鼠标点按还未设置默认值字样的时候，该字样会被默认值三个字代替