事件处理
事件处理主要使用v-on指令
v-on指令
用于进行元素的事件绑定
<div id="app">
<!-- content为data选项中变量 -->
<p>{{content}}</p>
<button v-on:click="content='新内容'">按钮</button>
<!-- 简写方式 -->
<button @click="content='新内容2'">按钮2</button>
<!-- 事件程序代码较多时，可在methods中设置函数，并设置为事件处理程序 -->
<button @click="fn">按钮3</button>
<!-- 在视图中可以通过 $event 访问事件对象，$event是固定写法，不能随便更改 -->
<button @click="fn2(100, $event)">按钮4</button>
</div>
<!-- CDN引入最新稳定版 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
content: '默认内容',
},
methods: {
fn (event) {
// 设置事件处理函数后，还可从参数中获取事件对象
console.log(event)
this.content = '新内容3'
},
fn2 (value, event) {
this.content = '新内容4'
console.log(event)
console.log(value)
}
}
})
</script>
复制代码表单输入绑定
表单输入绑定主要使用v-model指令
v-model指令
用于给<input>、<textarea>、<select>元素设置双向数据绑定。
输入框绑定
<div id="app">
<p>输入内容是：{{content}}</p>
<!-- 输入框绑定 -->
<input type="text" v-model="content">
<textarea v-model="content"></textarea>
</div>
复制代码单选按钮绑定
<!-- 单选按钮绑定 -->
<p>radio 的内容为：{{ value }}</p>
<input type="radio" id="one" value="1" v-model="value">
<label for="one">选项1</label>
<input type="radio" id="two" value="2" v-model="value">
<label for="two">选项2</label>
复制代码多选框绑定
<!-- 单个复选框绑定 -->
<p>单个复选框的值：{{ cbValue }}</p>
<input
type="checkbox"
value="选项内容"
id="cb"
v-model="cbValue">
<label for="cb">选项内容</label>
<!-- 多个复选框绑定，cbValues为data选项中数组类型的变量 -->
<p>多个复选框的值：{{ cbValues }}</p>
<input
type="checkbox"
id="cb1"
value="选项1"
v-model="cbValues"
>
<label for="cb1">选项1</label>
<input
type="checkbox"
id="cb2"
value="选项2"
v-model="cbValues"
>
<label for="cb2">选项2</label>
<input
type="checkbox"
id="cb3"
value="选项3"
v-model="cbValues"
>
<label for="cb3">选项3</label>
复制代码选择框绑定
<!-- 单选选择框 -->
<p>单选选择框的内容: {{ sValue }}</p>
<select v-model="sValue">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<!-- 多选选择框，sValues为数组变量，用户感受不如复选框 -->
<p>多选选择框的内容：{{ sValues }}</p>
<select v-model="sValues" multiple>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
复制代码修饰符
修饰符是以点为开头的指令后缀，用来给当前指令设置特殊操作。
主要分为以下几类：
-
事件修饰符
-
按键修饰符
-
系统修饰符
-
鼠标修饰符
-
v-model修饰符
事件修饰符
事件修饰符：.prevent修饰符、.stop修饰符、.once修饰符。
.prevent修饰符
用于阻止默认事件行为，相当于event.preventDefault()。
<!-- fn是methods中的函数，如下设置，点击不再默认跳转，而是执行fn -->
<a @click.prevent="fn" href="https://cn.vuejs.org/">Vue官网链接</a>
复制代码.stop修饰符
用于阻止事件传播（冒泡），相当于event.stopPropagation()。
<div @click="fn1">
<!-- 阻止了点击事件向上传递给div，这样a点击的时候就不会触发fn1了 -->
<a @click.prevent.stop="fn2" href="https://cn.vuejs.org/">Vue官网链接</a>
</div>
复制代码.once修饰符
设置事件只会触发一次。
<button @click.once="fn">按钮</button>
复制代码按键修饰符
将按键码作为修饰符使用起到标识按键的作用。
<!-- 任意键按下弹起执行fn函数 -->
<input type="text" @keyup="fn">
<!-- 数字按键码，49代表数字1键，不是数字键4和9 -->
<input type="text" @keyup.49="fn">
<!-- 字母按键码，a代表a键 -->
<input type="text" @keyup.a="fn">
<!-- 功能键按键码，为了兼容性，首选内置别名，esc代表Esc按键 -->
<input type="text" @keyup.esc="fn">
<!-- 多键触发，代表单独的a,b,c键均可触发 -->
<input type="text" @keyup.a.b.c="fn">
复制代码系统修饰符
系统修饰符指常用的四个系统按键修饰符：.ctrl修饰符、.alt修饰符、.shift修饰符，和.meta修饰符。它们的特点是需要和其他按键组合使用，单独按键不会触发。
<!-- 多键触发，代表单独的ctrl,q键均可触发 -->
<input type="text" @keyup.17.q="fn">
<!-- 组合按键，代表ctrl键和小写q键同时按下才会触发 -->
<input type="text" @keyup.ctrl.q="fn">
复制代码.exact 修饰符
允许你控制由精确的系统修饰符组合触发的事件。这是vue2.5.0 新增的修饰符
<!-- 点击时即使 Alt 或 Shift 被一同按下时也会触发点击事件 -->
<button @click.ctrl="onClick">A</button>
<!-- 点击时有且只有 Ctrl 被按下的时候才触发点击事件 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 点击时没有任何系统修饰符被按下的时候才触发点击事件 -->
<button @click.exact="onClick">A</button>
复制代码鼠标按键修饰符
用于设置点击事件由哪个鼠标按键来触发。
<!-- 鼠标左键 -->
<button @click.left="fn">按钮1</button>
<!-- 简写 -->
<button @click="fn">按钮1</button>
<!-- 鼠标右键 -->
<button @click.right="fn">按钮2</button>
<!-- 鼠标中键 -->
<button @click.middle="fn">按钮3</button>
复制代码v-model修饰符
主要包含三个修饰符：.trim修饰符、.lazy修饰符、.number修饰符。
<!-- .trim修饰符用于自动过滤用户输入内容首尾两端的空格 -->
<input type="text" v-model.trim="inputValue">
<p>{{ inputValue }}</p>
<!-- .lazy修饰符用于将v-model的触发方式由input触发改为change事件触发 -->
<input type="text" v-model.lazy="inputValue">
<p>{{ inputValue }}</p>
<!-- .number修饰符用于自动将用户的输入值转为数值类型，无法转换则保留为字符串 -->
<input type="text" v-model.number="inputValue">
<p>{{ inputValue }}
复制代码
文章评论