Web前端开发进阶笔记3——事件绑定(鼠标键盘)

1.事件的绑定：

示例：

<div>
			<div>{{num}}</div>
			<input type="button" v-on:click="num++" value="add"/>
			<input type="button" v-on:click="num--" value="mins"/>
		</div>
		<script type="text/javascript">
			var vmdata = {
				num: 0
			}
			var vm = new Vue({
				el: 'div',
				data: vmdata
			})
		</script>

上面的代码就能实现两个按钮控制加减的功能了。

2.事件调用：

当我们的方法体量较大的时候，我们需要使用键method。

示例：

<div>{{num2}}</div>
<input type="button" @click="add" value="add" />
<input type="button" @click="mins" value="mins" />
<script type="text/javascript">
			var vmdata = {
				num: 0,
				num1: 0,
				num2: 0
			}
			var vm = new Vue({
				el: 'div',
				data: vmdata,
				methods: {
					add: function() {
						this.num2++
					},
					mins: function() {
						this.num2--
					}
				}
			})
		</script>

上面就是一个简单的方法的实现。

而上面用到的this实际上就是我们的vm对象，这样我们才能访问到vm中的data中的num2的值。

3.事件函数参数传递：

示例：

<div>{{textcontent1}}</div>
<input type="button" @click="changetext('这里是要改变的内容')" value="change" />

changetext: function(text = '') {
	this.textcontent1 = text
}

<input type="button" @click="changetext('这里是要改变的内容',$event)" value="change" />

changetext: function(text = '', evt) {		
	this.textcontent1 = text
	console.log(evt.target.value)
}

上面的代码我们就实现了事件的传递。

4.事件修饰符：

阻止冒泡的原始方式:

evt.stopPropagation();

不过需要传递事件参数。

当我们使用a href的时候会导致页面的跳转，我们可以用prevent来阻止默认行为。

同样，我们也有阻止默认动作的原始方式：

evt.preventDefault();

<!-- 阻止默认事件触发 -->
<a href="" v-on:click.prevent="">I cant jump</a>

示例：

<form action="" method="" id='loginform'>
			<label for="name">username:</label>
			<input type="text" id="name" v-model="username" @keyup.delete="deletename()" />
			<br>
			<label for="pass">password:</label>
			<input type="text" id="pass" v-model="password" @keyup.enter="keysubmit()" />
			<br>
			<input type="button" value="submit" @click="clicksubmit()" />
		</form>
		<script type="text/javascript">
			var vmdata = {
				username: '',
				password: ''
			}
			var vm = new Vue({
				el: '#loginform',
				data: vmdata,
				methods: {
					clicksubmit: function() {
						console.log(this.username + ' ' + this.password);
					},
					keysubmit: function() {
						console.log(this.username + ' ' + this.password);
					},
					deletename: function() {
						this.username = '';
					}
				}
			})
		</script>

当然我们也会用到自定义的按键修饰符：