vue学习-004 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .boc{
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>运算结果:{{count}}</h1>
        <button @click="sub()">-</button>
        <button @click="add">+</button>
        <button @click="btn3('haah',count,$event)">btn3</button>
        <div class="boc" @click="clickf">
            <button @click="clicks">dian</button>
        </div>
        <!-- 阻止冒泡-->
        <div class="boc" @click="clickf">
            <button @click.stop="clicks">dian</button>
        </div>
        <!-- 阻止默认事件-->
        <form action="http://www.baidu.com">
            <input type="submit" value="提交" @click.prevent="doSubmit">
        </form>
        <button @click.once="add">once</button>
        <input type="text" @keyup="getMsg">
        <input type="text" @keyup.enter="getMsg">
    </div>
    <script>
        const app = Vue.createApp({
                data() {
                    return {
                        count: 0
                    }
                },
                methods: {
                    add(arg) {
                        console.log(arg);
                        this.count ++;
                    },
                    sub(arg) {
                        console.log(arg);
                        this.count --;
                    },
                    btn3(arg1,arg2,arg3) {
                        console.log(arg1,arg2,arg3);
                    },
                    clickf() {
                        this.count ++;
                    },
                    clicks(e) {
                        // e.stopPropagation();
                        this.count ++;
                    },
                    doSubmit(e) {
                        // e.preventDefault();
                        this.count ++;
                    },
                    getMsg(e) {
                        console.log(e);
                    }
                }
            }).mount('#app')
    </script>
</body>
</html>
posted @ 2021-11-18 14:37  昵称要矢  阅读(57)  评论(0)    收藏  举报