“Vue v-on 指令”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
 
（未显示同一用户的1个中间版本）
第18行： 第18行：
 
})
 
})
  
 +
</syntaxhighlight><syntaxhighlight lang="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>v-on指令基础</title>
 +
</head>
 +
<body>
 +
    <!-- 2.html 结构-->
 +
    <div id="app">
 +
        <input type="button" value="v-on指令" v-on:click="doIt">
 +
        <input type="button" value="v-on简写" @click="doIt">
 +
        <input type="button" value="v-on双击" @dblclick="doIt">
 +
        <h2 @click="changeFood">{{ food }}</h2>
 +
    </div>
 +
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
 +
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 +
<script>
 +
    var app = new Vue({
 +
        el:"#app",
 +
        data:{
 +
            food:"西红柿炒鸡蛋"
 +
        },
 +
        methods:{
 +
            doIt:function(){
 +
                alert("hello world");
 +
            },
 +
            changeFood:function() {
 +
                //console.log(this.food);
 +
                this.food+="很好吃！"
 +
            }
 +
        }
 +
    })
 +
</script>
 +
</body>
 +
</html>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
=== 总结 ===
 +
 +
* <u>v-on</u> 指令的作用是：为元素绑定<u>事件</u>
 +
* 事件名不需要写 <u>on</u>
 +
* 指令可以简写为 <u>@</u>
 +
* 绑定的方法定义在 <u>methods</u> 属性中
 +
* 方法内部通过 <u>this</u> 关键字可以访问定义在 <u>data</u> 中的数据

2023年6月7日 (三) 10:00的最新版本

为元素绑定事件

<div id="app">
 <input type="button" value="事件绑定" v-on:事件名="方法">
 <input type="button" value="事件绑定" v-on:click="方法">
 <input type="button" value="事件绑定" v-on:monseenter="方法">
 <input type="button" value="事件绑定" v-on:dblclick="方法">
 <input type="button" value="事件绑定" v-on:dblclick="doIt">
 <input type="button" value="事件绑定" @dblclick="doIt">
</div>

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

<!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>v-on指令基础</title>
</head>
<body>
    <!-- 2.html 结构-->
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="v-on双击" @dblclick="doIt">
        <h2 @click="changeFood">{{ food }}</h2>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            food:"西红柿炒鸡蛋"
        },
        methods:{
            doIt:function(){
                alert("hello world");
            },
            changeFood:function() {
                //console.log(this.food);
                this.food+="很好吃！"
            }
        }
    })
</script>
</body>
</html>

总结

  • v-on 指令的作用是：为元素绑定事件
  • 事件名不需要写 on
  • 指令可以简写为 @
  • 绑定的方法定义在 methods 属性中
  • 方法内部通过 this 关键字可以访问定义在 data 中的数据
取自“https://www.jihongchang.top/index.php?title=Vue_v-on_指令&oldid=6955”