Vue-事件、事件修饰符

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--vue-app是根容器-->
    <div id="vue-app">
        <h1>Events</h1>
        <!--@符号是一种简写-->
        <button @click="age++">涨一岁</button>
        <!--使用方法进行减少-->
        <!--给不给括号都可以，如果是通过{{}}获取的方法是需要给括号的不然以为是属性-->
        <!--在事件中如果传参就必须给括号了-->
        <button v-on:click="subtract">减一岁</button>
        <!--双击事件-->
        <button v-on:dblclick="subtract">减一岁</button>
        <!--使用传参方式进行加10岁-->
        <button @click="add(10)">涨十岁</button>

        <!--鼠标移动事件，获取x轴和y轴-->
        <!--添加事件修饰符-->
        <div id="canvas" v-on:mousemove="updataXy">
            {{x}},{{y}} - <span v-on:mousemove="stopMoveing">Stop Moving</span>
            <!--使用事件修饰符进行停止-->
            <span v-on:mousemove.stop="">停止</span>
        </div>
        <!--通过事件修事件修饰符：只能涨一次-->
        <button @click.once="add(1)">只能点一次</button>
        <!--点击不让进行跳转-->
        <a v-on:click.prevent="alert()" href="http://www.baidu.com">The new step</a>
        <p>My age is {{age}}</p>
    </div>
    <script src="app.js"></script>
</body>
</html>

app.js

new Vue({
    el:"#vue-app",
    data:{
        age:30,
        x:0,
        y:0
    },
    methods:{
        subtract:function () {
            this.age--;
        },
        add: function (inc) {
            this.age += inc;
        },
        updataXy:function (event) {
            this.x=event.offsetX;
            this.y=event.offsetY;
        },
        stopMoveing:function (event) {
            event.stopPropagation()
        },
        alert:function () {
            alert("弹框")
        }
    }
})

style.css

#canvas{
    width: 600px;
    padding: 200px 20px;
    text-align: center;
    border: 1px solid #333;
}

Vue-事件、事件修饰符

猜你喜欢