ArcherWong博客
首页
博客
vue笔记6-事件处理
作者：ArcherWong
分类：vue
时间：2019-01-03 21:38:16
阅读：276
# v-on监听dom事件 ``` //简单逻辑直接使用js代码，很方便 <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) //复杂逻辑，调用一个方法 <div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接调用方法 example2.greet() // => 'Hello Vue.js!' ``` # 修饰符
标签：
上一篇：
vue笔记4-vue列表渲染
下一篇：
vue笔记7-表单输入绑定
文章分类
css
elasticsearch
git
golang
guacamole
javascript
letsencrypt
linux
nginx
other
php
python
vue
web
阅读排行
centos7.3配置guacamole
letsencrypt证书-管理工具certbot
golang笔记---关联数组(map)
golang笔记---template模板语法
nginx笔记-proxy_cache缓存详解
友情链接
node文件
laravel-vue
ArcherWong的博客园
