发表于： 2019-07-19 21:08:23
1 440
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
明天计划的事情：（一定要写非常细致的内容）
遇到的问题：（遇到什么困难，怎么解决的）
收获：（通过今天的学习，学到了什么知识）
1.监听事件
用v-on指令监听dom事件，并在触发时运行一些 JavaScript 代码。
<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
}
})
2.事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<button v-on:click="greet">Greet</button>
methods: { greet: function (event) { // `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
3.内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
<button v-on:click="say('hi')">Say hi</button>
methods: { say: function (message) {
alert(message)
}
}
4.事件修饰符
Vue.js 为 v-on 提供了事件修饰符。
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 --><!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div>
5.新增
2.1.4 新增
<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>
返回列表
评论