语句 事件 targe vue blog count 内联 tex
在 html 或 jsp 页面中我们总能碰到监听 DOM 事件来触发 javaScript 代码,下面我们就简单聊聊 vue.js 中的监听事件是怎么处理的。
在 vue.js 中监听事件是通过 v-on 指令来实现的,先看一下简单的监听事件代码。
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head lang="en">
- 4 <meta charset="UTF-8">
- 5 <title></title>
- 6 <script type="text/javascript" src="vue.js"></script>
- 7 </head>
- 8 <body>
- 9 <div id="app">
- 10 <button v-on:click="count += 1">点击测试</button>
- 11 <p>这个按钮被点击了{{count}}次</p>
- 12 </div>
- 13 </body>
- 14 <script>
- 15 var vm = new Vue({
- 16 el:"#app",
- 17 data:{
- 18 count:0
- 19 }
- 20 })
- 21 </script>
- 22 </html>
下面再看看监听方法事件的代码示例
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head lang="en">
- 4 <meta charset="UTF-8">
- 5 <title></title>
- 6 <script type="text/javascript" src="vue.js"></script>
- 7 </head>
- 8 <body>
- 9 <div id="app">
- 10 <button v-on:click="test">点击测试</button>
- 11 </div>
- 12 </body>
- 13 <script>
- 14 var vm = new Vue({
- 15 el:"#app",
- 16 data: {
- 17 name: 'Vue.js'
- 18 },
- 19 // 在 `methods` 对象中定义方法
- 20 methods: {
- 21 test: function (event) {
- 22 // `this` 在方法里指当前 Vue 实例
- 23 alert('Hello ' + this.name + '!')
- 24 // `event` 是原生 DOM 事件
- 25 alert(event.target.tagName)
- 26 }
- 27 }
- 28 })
- 29 </script>
- 30 </html>
内联处理器方法,内联 javaScript 语句
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head lang="en">
- 4 <meta charset="UTF-8">
- 5 <title></title>
- 6 <script type="text/javascript" src="vue.js"></script>
- 7 </head>
- 8 <body>
- 9 <div id="app">
- 10 <button v-on:click="say('say hello')">say hello</button>
- 11 <button v-on:click="say('say goodbye')">say goodbye</button>
- 12 </div>
- 13 </body>
- 14 <script>
- 15 var vm = new Vue({
- 16 el:"#app",
- 17 data: {
- 18 name: 'Vue.js'
- 19 },
- 20 // 在 `methods` 对象中定义方法
- 21 methods: {
- 22 say:function(message){
- 23 alert(message)
- 24 }
- 25 }
- 26 })
- 27 </script>
- 28 </html>
vue v-on 监听事件
来源: http://www.bubuko.com/infodetail-2074489.html