Vue的 v-on 指令

最新推荐文章于 2024-01-23 11:29:39 发布

耶瞳

最新推荐文章于 2024-01-23 11:29:39 发布

阅读量160

点赞数 4

分类专栏： js 文章标签： vue

本文链接：https://blog.csdn.net/tongkongyu/article/details/116792015

版权

js 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

<!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="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 基本用法 -->
    <div id="app1">
        <p>{{counter}}</p>
        <button v-on:click='counter++'>+</button><!--在标签中声明函数-->
        <button v-on:click='counter--'>-</button>
        <br>
        <button @click='counter++'>+</button><!--语法糖（缩写）-->
        <button @click='counter--'>-</button>
        <br>
        <button @click='increment'>+</button><!--使用方法-->
        <button @click='decrement'>-</button>
    </div>
    <script>
        new Vue({
            el: '#app1',
            data: {
                counter: 0
            },
            methods: {
                increment: function () {
                    this.counter++;
                },
                decrement: function () {
                    this.counter--;
                }
            }
        })
    </script><hr>

    <!-- 参数传递问题 -->
    <div id="app2">
        <!-- 事件调用的方法没有参数 -->
        <button @click='btnClick1'>按钮1</button>
        <button @click='btnClick1()'>按钮2</button>
        <!-- 事件调用的方法有参数 -->
        <button @click='btnClick2("eyes++")'>按钮3</button>
        <button @click='btnClick2(name)'>按钮4</button>
        <!-- 事件调用的方法有参数，但不传参或不加括号 -->
        <button @click='btnClick3()'>按钮5</button> <!--不报错，传 undefined-->
        <button @click='btnClick3'>按钮6</button> <!--不报错，传 Event对象-->
        <!-- 方法定义时，我们需要event对象，也需要其他参数 -->
        <button @click='btnClick4'>按钮7</button> <!--event,undefined-->
        <button @click='btnClick4()'>按钮8</button> <!--undefined,undefined-->
        <button @click='btnClick4("eyes++")'>按钮9</button> <!--eyes++,undefined-->
        <button @click='btnClick4("eyes++",$event)'>按钮10</button> <!--手动获取event-->
    </div>
    <script>
        new Vue({
            el: '#app2',
            data: {
                name:'eyes++'
            },
            methods:{
                btnClick1(){
                    console.log('btn1的调用');
                },
                btnClick2(value){
                    console.log('--- ' + value + ' ---');
                },
                btnClick3(value){
                    console.log(value);
                },
                btnClick4(value,event){
                    console.log(value,event);
                }
            }
        })
    </script><hr>

    <!-- 修饰符的使用 -->
    <div id="app3">

        <!-- .stop 阻止冒泡 -->
        <div @click='divClick'>
            <button @click.stop='btnClick'>按钮</button>
        </div>

        <!-- .prevent 阻止默认事件 -->
        <form action="">
            <input type="submit" value="提交" @click.prevent='submitClick'>
        </form>

        <!--  
            按键修饰符：
            .enter （回车键） .tab  .delete  .esc  .space  .up  .down  .left  .right 
        -->
        <form action="">
            <input type="textarea" @keyup.delete='keyUp'>
        </form>
        
        <!-- .once 只执行一次回调 -->
        <button @click.once='doOnce'>click</button>
    </div>
    <script>
        new Vue({
            el:'#app3',
            data:{
                msg:'eyes++'
            },
            methods:{
                btnClick(){
                    console.log('btn的调用');
                },
                divClick(){
                    console.log('div的调用');
                },
                submitClick(){
                    console.log('阻止默认事件');
                },
                keyUp(){
                    console.log('按了一下删除');
                },
                doOnce(){
                    console.log('只能调一次');
                }
            }
        })
    </script>
</body>

</html>

耶瞳

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Vue的 v-on 指令

<!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>Do
复制链接

扫一扫

专栏目录