Vue.js的学习记录_3

清疚 2022-03-09 16:58 131阅读 0赞

### 事件以及事件修饰 ###

*  Vue.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Events</title>
        <link rel="stylesheet" href="styles.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
         
    </head>
    <body>
        <div id="Vue-app">
            <h1>Events</h1>
            <button v-on:click.once="add(1)">Add a year</button>
            <button @click="substract(1)" >Substract a year</button>
            <button v-on:click="add(10)">Add ten year</button>
            <button @click="substract(10)">Substract ten year</button>
            <p>My age is {
       {age}}</p>
            <div id="canvans" v-on:mousemove = "update">{
       {x}},{
       {y}}  </div>
            <a v-on:click.prevent = "click" href="http://www.baidu.com">www.baidu.com</a>
        </div>
        <script src="app.js"></script>
    </body>
    </html>

*  Vue.js

new Vue({ 
        el: '#Vue-app',
        data: { 
            age: 25,
            x: 0,
            y: 0
        },
        methods: { 
            add: function (inc) { 
                this.age += inc;
            },
            substract: function(dec) { 
                this.age -= dec;
            },
            update: function(event) { 
                //console.log(event);
                this.x = event.offsetX;
                this.y = event.offsetY;
            },
            click: function() { 
                alert('You clicked me!')
            }
        }
    })

*  style.css

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

## `记录` ##

*  本节，学习了`v-on`的使用方法。
 *  如何在传参至Vue对象中的Methods。
 *  如何进行数据的显示与改变。
 *  鼠标移动的偏移值X、Y的使用。来自于v-on：mousemove所在的对象标签对象的范围。
 *  鼠标点击事件的修饰，默认为下一跳，但可以加以修饰.prevent使之不跳转。