Vue系列教程（四）v-on指令定义事件

最新推荐文章于 2024-07-19 10:52:30 发布

胡亥

最新推荐文章于 2024-07-19 10:52:30 发布

阅读量513

点赞数

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

本文链接：https://blog.csdn.net/iiiliuyang/article/details/104242993

版权

vue.js 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

回忆一下我们使用js实现点击事件的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<div id="app">
    <input id="btn" type="button" value="按钮">
</div>
<body>
<script src="lib/vue.js"></script>
<script>
    document.getElementById('btn').onclick = function () {
        alert('Hello')
    }
</script>
</body>
</html>

这种实现方式操作了DOM，前文中提到，Vue不推荐操作DOM，Vue提供了一个不需要操作DOM就可以实现事件的指令——v-on。使用方法如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<div id="app">
    <input v-on:click="show" type="button" value="按钮">
</div>
<body>
<script src="lib/vue.js"></script>
<script>
  var vm = new Vue({
      el: '#app',
      methods:{ // 这个methods属性中定义了当前Vue实例所有可用的方法
          show:function () {
            alert('Hello')
          }
      }
  })
</script>
</body>
</html>