发表于: 2020-07-25 22:53:05

1 1885


今天完成的事情:今天学习了vue的事件处理器
明天计划的事情:继续后续的学习
遇到的问题:实际操作不足还需更多的练习
收获:

Vue.js 事件处理器

事件监听可以使用 v-on 指令:

<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<style>
  .base {
    width100px;
    height100px;
  }

  .active {
    backgroundgreen;
  }

  .text-danger {
    backgroundred;
  }
</style>
</head>

<body>
  <div id="app">
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        counter: 0
      }
    })
  </script>
  <script src="./test.js"></script>
</body>

</html>

结果

点击

通常情况下,我们需要使用一个方法来调用 JavaScript 方法。

v-on 可以接收一个定义的方法来调用。

<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<style>
  .base {
    width100px;
    height100px;
  }

  .active {
    backgroundgreen;
  }

  .text-danger {
    backgroundred;
  }
</style>
</head>

<body>
  <div id="app">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        name: 'Vue.js'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function (event) {
          // `this` 在方法里指当前 Vue 实例
          alert('Hello ' + this.name + '!')
          // `event` 是原生 DOM 事件
          if (event) {
            alert(event.target.tagName)
          }
        }
      }
    })
    // 也可以用 JavaScript 直接调用方法
    app.greet() // -> 'Hello Vue.js!'
  </script>
  <script src="./test.js"></script>
</body>

</html>


结果

点击

成功点击调用方法

剩下的明天继续


返回列表 返回列表
评论

    分享到