update：Vue相关（v-on的事件修饰符）
This commit is contained in:
qianguyihao
@@ -18,6 +18,13 @@
|
||||
|
||||
- v-on
|
||||
|
||||
- 举例：文字滚动显示（跑马灯效果）
|
||||
|
||||
- v-on的事件修饰符
|
||||
|
||||
|
||||
|
||||
|
||||
## Vue初体验
|
||||
|
||||
新建一个空的项目，引入vue.js文件。写如下代码：
|
||||
@@ -457,102 +464,6 @@ v-on 提供了click 事件，也提供了一些其他的事件。
|
||||
|
||||
- ....
|
||||
|
||||
### v-on的事件修饰符
|
||||
|
||||
`v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：
|
||||
|
||||
- `.stop` 阻止冒泡。本质是调用 event.stopPropagation()。
|
||||
|
||||
- `.prevent` 阻止默认事件。本质是调用 event.preventDefault()。
|
||||
|
||||
- `.capture` 添加事件监听器时，使用 capture 模式。
|
||||
|
||||
- `.self` 只有当事件是从侦听器绑定的元素本身触发时，才触发回调。
|
||||
|
||||
- ``.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时，才触发回调。
|
||||
|
||||
- ``.native` 监听组件根元素的原生事件。
|
||||
|
||||
写法示范：
|
||||
|
||||
```html
|
||||
<!-- click事件 -->
|
||||
<button v-on:click="doThis"></button>
|
||||
|
||||
<!-- 缩写 -->
|
||||
<button @click="doThis"></button>
|
||||
|
||||
<!-- 内联语句 -->
|
||||
<button v-on:click="doThat('hello', $event)"></button>
|
||||
|
||||
<!-- 阻止冒泡 -->
|
||||
<button @click.stop="doThis"></button>
|
||||
|
||||
<!-- 阻止默认行为 -->
|
||||
<button @click.prevent="doThis"></button>
|
||||
|
||||
<!-- 阻止默认行为，没有表达式 -->
|
||||
<form @submit.prevent></form>
|
||||
|
||||
<!-- 串联修饰符 -->
|
||||
<button @click.stop.prevent="doThis"></button>
|
||||
```
|
||||
|
||||
|
||||
**举例**：（`.prevent`的用法举例）
|
||||
|
||||
现在有一个form表单：
|
||||
|
||||
```html
|
||||
<form action="http://www.baidu.com">
|
||||
<input type="submit" value="表单提交">
|
||||
</form>
|
||||
```
|
||||
|
||||
|
||||
我们知道，上面这个表单因为`type="submit"`，因此它是一个提交按钮，点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。
|
||||
|
||||
现在，我们可以用`.prevent`来阻止这种默认行为。修改为：点击按钮后，不提交到服务器，而是执行我们自己想要的事件（在submit方法中另行定义）。如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<script src="vue2.5.16.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- 阻止表单中submit的默认事件 -->
|
||||
<form @submit.prevent action="http://www.baidu.com">
|
||||
<!-- 执行自定义的click事件 -->
|
||||
<input type="submit" @click="mySubmit" value="表单提交">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
},
|
||||
methods: {
|
||||
mySubmit: function() {
|
||||
alert('ok');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。
|
||||
|
||||
## 举例：文字滚动显示（跑马灯效果）
|
||||
|
||||
我们利用上面几段所学的内容，做个跑马灯的小例子。要实现的效果是：类似于LED屏幕上，滚动显示的文字。
|
||||
@@ -714,8 +625,9 @@ v-on 提供了click 事件，也提供了一些其他的事件。
|
||||
},
|
||||
|
||||
stopMethod: function () {
|
||||
//停止定时器：点击按钮后，停止字符串的滚动
|
||||
// 停止定时器：点击按钮后，停止字符串的滚动
|
||||
clearInterval(this.intervalId);
|
||||
// 每当清除了定时器之后，需要重新把 intervalId 置为 null
|
||||
this.intervalId = null;
|
||||
}
|
||||
}
|
||||
@@ -745,5 +657,3 @@ v-on 提供了click 事件，也提供了一些其他的事件。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user