lovecoding
/
VIP20


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839
							<!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="../../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 在Vue中，有一个指令 v-on 用来注册事件 -->
      <!-- v-on:eventType="js表达式" -->
      <!-- v-on的缩写为 “@” -->
      <!-- 下面事件处理程序 仅适合简单处理逻辑 -->
      <button v-on:click="count++">点击了 {{ count }} 次</button>
      <!-- 下面事件处理程序 适合 大多数情况，但是不能自主的向事件处理方法中传入参数，只能接收事件对象 为参数。 -->
      <button v-on:click="handleButtonClick">点击了 {{ count }} 次</button>
      <!-- 下面这种，可以自由的传入任何参数。 -->
      <button @click="sayHi('你好')">打招呼</button>
    </div>
    <script>
      new Vue({
        data: {
          count: 0, // 计数：记录点击按钮的次数
        },
        // Vue实例方法 的 作用： 1 用于 事件的处理程序，因为 this 会绑定为 Vue实例 2 封装 复用的逻辑
        methods: {
          handleButtonClick() {
            this.count++;
          },
          sayHi(text) {
            alert(text);
          },
        },
      }).$mount('#app');
    </script>
  </body>
</html>