“Vue v-on 补充”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
 
（未显示同一用户的4个中间版本）
第2行： 第2行：
  
 
传递自定义参数，事件修饰符
 
传递自定义参数，事件修饰符
 +
 +
=== 形式1 ===
 +
<syntaxhighlight lang="html">
 +
<div id="app">
 +
    <input type="button" @click="doIt"/>
 +
</div>
 +
</syntaxhighlight><syntaxhighlight lang="javascript">
 +
var app = new Vue({
 +
    el:"#app",
 +
    methods:{
 +
        doIt:function(){}
 +
    }
 +
})
 +
</syntaxhighlight>
 +
 +
=== 形式2 ===
 +
<syntaxhighlight lang="html">
 +
<div>
 +
    <input type="button" @click="doIt(p1, p2)"/>
 +
    <input type="text" @keyup="sayHi">
 +
    <input type="text" @keyup.enter="sayHi">
 +
</div>
 +
</syntaxhighlight><syntaxhighlight lang="javascript">
 +
var app = new Vue({
 +
    el:"#app",
 +
    methods:{
 +
        doIt:function(p1, p2){},
 +
        sayHi:function(){}
 +
    }
 +
})
 +
</syntaxhighlight>
 +
 +
=== 文档 ===
 +
https://v2.cn.vuejs.org/v2/api/#v-on
 +
 +
=== 完整示例 ===
 +
<syntaxhighlight lang="html">
 +
<html>
 +
    <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>v-on 补充</title>
 +
    </head>
 +
    <body>
 +
       
 +
        <div id="app">
 +
            <input type="button" value="点击" @click="doIt">
 +
            <input type="button" value="点击" @click="doIt1(666)">
 +
            <input type="button" value="点击" @click="doIt2(666, '老铁')">
 +
            <input type="text" @keyup="sayHi"/>
 +
            <input type="text" @keyup.enter="sayHi"/>
 +
        </div>
 +
 +
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 +
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 +
       
 +
        <script>
 +
            var app = new Vue({
 +
                el:"#app",
 +
                methods :{
 +
                    doIt: function () {
 +
                        console.log("do something");
 +
                    },
 +
                    doIt1:function(p1) {
 +
                        console.log(p1);
 +
                    },
 +
                    doIt2:function(p1, p2) {
 +
                        console.log(p1);
 +
                        console.log(p2);
 +
                    },
 +
                    sayHi: function() {
 +
                        alert("Hi");
 +
                    }
 +
                }
 +
            })
 +
        </script>
 +
 +
    </body>
 +
</html>
 +
</syntaxhighlight>
 +
 +
=== 总结 ===
 +
 +
* 事件绑定的方法写成  <u>函数调用</u>  的形式，可传入自定义参数
 +
* 定义方法时需要定义 <u>形参</u> 来接收传入的实参
 +
* 事件的后面跟上 <u>.修饰符</u>  可以对事件进行限制
 +
* .enter 可以限制触发的按键为回车
 +
* 事件修饰符有多种

2023年8月8日 (二) 09:22的最新版本

https://www.bilibili.com/video/BV12J411m7MG/?p=16

传递自定义参数，事件修饰符

形式1

<div id="app">
    <input type="button" @click="doIt"/>
</div>

var app = new Vue({
    el:"#app",
    methods:{
        doIt:function(){}
    }
})

形式2

<div>
    <input type="button" @click="doIt(p1, p2)"/>
    <input type="text" @keyup="sayHi">
    <input type="text" @keyup.enter="sayHi">
</div>

var app = new Vue({
    el:"#app",
    methods:{
        doIt:function(p1, p2){},
        sayHi:function(){}
    }
})

文档

https://v2.cn.vuejs.org/v2/api/#v-on

完整示例

<html>
    <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>v-on 补充</title>
    </head>
    <body>
        
        <div id="app">
            <input type="button" value="点击" @click="doIt">
            <input type="button" value="点击" @click="doIt1(666)">
            <input type="button" value="点击" @click="doIt2(666, '老铁')">
            <input type="text" @keyup="sayHi"/>
            <input type="text" @keyup.enter="sayHi"/>
        </div>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        
        <script>
            var app = new Vue({
                el:"#app",
                methods :{
                    doIt: function () {
                        console.log("do something");
                    },
                    doIt1:function(p1) {
                        console.log(p1);
                    },
                    doIt2:function(p1, p2) {
                        console.log(p1);
                        console.log(p2);
                    },
                    sayHi: function() {
                        alert("Hi");
                    }
                }
            })
        </script>

    </body>
</html>

总结

  • 事件绑定的方法写成 函数调用 的形式，可传入自定义参数
  • 定义方法时需要定义 形参 来接收传入的实参
  • 事件的后面跟上 .修饰符 可以对事件进行限制
  • .enter 可以限制触发的按键为回车
  • 事件修饰符有多种
取自“https://www.jihongchang.top/index.php?title=Vue_v-on_补充&oldid=7052”