V-On: 绑定事件监听属性

Posted 2020-10-19 97tng

　　Vue基本格式：　

 　　　　

1     var vm = new Vue({
2          el: ‘#example‘,    //限制作用域ID
3          data: {
4              name: ‘Vue.js‘   //渲染数据名及值
5          },    
6    
7          methods: {
8              // 在 `methods` 对象中定义方法
9     }

基本格式　　

　　Vue绑定事件格式：

　　　　1、绑定一个单击事件处理器到一个方法中：　　

　　　　　　　　

 1     <button v-on:click="greet">Greet</button>
 2          // 在 `methods` 对象中定义方法
 3      methods: {
 4          greet: function (event) {
 5               // 方法内 `this` 指向 vm
 6               alert(‘Hello ‘ + this.name + ‘!‘)
 7               // `event` 是原生 DOM 事件
 8               alert(event.target.tagName)
 9          }
10      }        

绑定事件方法1

　　　　2、除了直接绑定到一个方法，也可以用内联 javascript 语句：　　　　

　　　　　　　　

 1 <div id="example-2">
 2  <button v-on:click="say(‘hi‘)">Say Hi</button>
 3  <button v-on:click="say(‘what‘)">Say What</button>
 4 </div>
 5 ........................
 6     new Vue({
 7          el: ‘#example-2‘,
 8          methods: {
 9          say: function (msg) {
10           alert(msg)
11          }
12          }
13     })

绑定事件方法2

　　Vue事件修饰符(.prevent 与 .stop):

　　　　1、阻止单击事件冒泡：v-on:click.stop="事件名"

　　　　2、阻止默认触发事件：v-on:click.prevent="事件名"

　　　Vue监听键盘事件格式（V-on：　keyCode）：

　　　　1、访问键值进行监听：v-on:keyup.13="事件名"

　　　　2、访问按键别名进行监听：v-on:keyup.enter="事件名"