以下笔记皆基于 Vue 2
事件处理
v-on 指令
v-on 指令用于进行元素的事件绑定，简写方式 @事件类型。当事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序。
设置事件处理程序后，如果不设置形参，则可以从参数 event 中接收事件对象，如果设置形参，则需要在视图中通过传递 $event 实参来访问事件对象。
<body>
<div id="app">
<p>{{ content }}</p>
<!-- v-on 指令语法 -->
<button v-on:click="content='这是新的内容'">按钮</button>
<!-- v-on 指令简写语法 -->
<button @click="content='这是按钮2设置的内容'">按钮2</button>
<!-- 函数形式 -->
<button @click="fn">按钮3</button>
<!-- 接收自定义参数，传递事件对象 -->
<button @click="fn2(200, $event)">按钮4</button>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: '这是默认内容'
},
methods: {
fn(event) {
console.log(event);
this.content = '这是按钮3设置的内容';
},
fn2(value, event) {
console.log(value, event);
}
}
})
</script>
</body>
表单输入绑定
v-model 指令
v-model 指令用于给 <input> 、<textarea> 及 <select> 元素设置双向数据绑定。
输入框绑定
输入框分为单行输入框 input 与多行输入框 textarea：
<body>
<div id="app">
<p>input 输入框的内容为： {{ value1 }}</p>
<input type="text" v-model="value1">
<p>textarea 输入框的内容为： {{ value2 }}</p>
<textarea v-model="value2"></textarea>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value1: '',
value2: ''
}
});
</script>
</body>
单选按钮绑定
单选按钮的双向数据绑定方式如下：
<body>
<div id="app">
<p>radio 的内容为： {{ value3 }}</p>
<input type="radio" id="one" value="1" v-model="value3">
<label for="one">选项1</label>
<input type="radio" id="two" value="2" v-model="value3">
<label for="two">选项2</label>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value3: ''
}
});
</script>
</body>
复选框绑定
复选框绑定分为单个选项与多个选项两种情况，书写方式不同。单个复选框 data 数据为单个字符串，且绑定的值为布尔类型，而多个复选框则为数组，数组内的值为选项的 value 值。
<body>
<div id="app">
<!-- 单个复选框进行双向数据绑定的演示 -->
<p>单个复选框的值： {{ value4 }}</p>
<input
type="checkbox"
value="选项内容"
id="one"
v-model="value4">
<label for="one">选项内容</label>
<!-- 多个复选框进行双向数据绑定的演示 -->
<p>多个复选框的值：{{ value5 }}</p>
<input
type="checkbox"
id="cb1"
value="选项1"
v-model="value5"
>
<label for="cb1">选项1</label>
<input
type="checkbox"
id="cb2"
value="选项2"
v-model="value5"
>
<label for="cb2">选项2</label>
<input
type="checkbox"
id="cb3"
value="选项3"
v-model="value5"
>
<label for="cb3">选项3</label>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value4: '',
value5: []
}
});
</script>
</body>
选择框绑定
选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同。
<body>
<div id="app">
<!-- 单选选择框 -->
<p>单选选择框的内容: {{ value6 }}</p>
<select v-model="value6">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<!-- 多选选择框 -->
<p>多选选择框的内容：{{ value7 }}</p>
<select v-model="value7" multiple>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value6: '',
value7: []
}
});
</script>
</body>
v-model 指令小结
- input 输入框：绑定字符串值。
- textarea 输入框：绑定字符串值。
- radio：绑定字符串值。
- checkbox：单个绑定布尔值，多个绑定数组。
- select：单选绑定字符串，多选绑定数组。
修饰符
修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作。
事件修饰符
-
.prevent 修饰符
该修饰符用于阻止默认事件行为，相当于 event.preventDefault()。<body> <div id="app"> <!-- <a @click.prevent="fn" >链接</a> --> <a @click.prevent >链接</a> </div> <script src="lib/vue.js"></script> <script> new Vue({ el: '#app', data: { }, methods: { fn() { console.log('这是 a 标签的点击事件') } } }); </script> </body> -
.stop 修饰符
用于阻止事件传播，即可以阻止事件冒泡，相当于 event.stopPropagation()。Vue.js 中允许修饰符进行连写，例如：@click.prevent.stop<body> <div id="app"> <div @click="fn1"> <button @click.stop="fn2">按钮</button> <a @click.prevent.stop="fn3" >链接</a> </div> </div> <script src="lib/vue.js"></script> <script> new Vue({ el: '#app', data: { }, methods: { fn1 () { console.log('div 的点击事件'); }, fn2 () { console.log('button 的点击事件'); } fn3 () { console.log('a 的点击事件'); } } }) </script> </body> -
.once 修饰符
该修饰符用于设置事件只会触发一次。<body> <div id="app"> <button @click="fn">按钮1</button> <button @click.once="fn">按钮2</button> </div> <script src="lib/vue.js"></script> <script> new Vue({ el: '#app', data: { }, methods: { fn () { console.log('按钮被点击了'); } } }) </script> </body>
按钮修饰符
- 按键码：指的是将按键的按键码作为修饰符使用以标识按键的操作方式，可以通过事件参数 event 查看按键的按键码。除了普通按键还有特殊按键，指的是键盘中类似 esc、enter、delete 等功能按键， 为了更好的兼容性，应首选内置别名。
<body>
<div id="app">
<!-- 键盘弹起事件 -->
<input type="text" @keyup="fn">
<!-- 当按下 a 键之后触发，a 键的 key 值为 a，keyCode 值为 49 -->
<input type="text" @keyup.49="fn">
<input type="text" @keyup.a="fn">
<!-- esc 特殊按键 -->
<input type="text" @keyup.esc="fn">
<!-- 按键码可以串写，表示或，即按下 a 键 或 b 键 或 c 键之后触发 -->
<input type="text" @keyup.a.b.c="fn">
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn (event) {
console.log(event);
console.log('输入了对应内容');
}
}
});
</script>
</body>
系统修饰符
系统按键指的是 ctrl 、alt 、shift 等按键，单独点击系统操作符无效，通常与其他按键组合使用。
<body>
<div id="app">
<!-- 直接串写按键码没法实现组合效果 -->
<!-- <input type="text" @keyup.17.q="fn"> -->
<input type="text" @keyup.ctrl.q="fn" v-model="inputValue">
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
fn (event) {
// console.log(event);
this.inputValue = '';
}
}
});
</script>
</body>
鼠标按键修饰符
用于设置点击事件由鼠标哪个按键来完成。
- .left 修饰符（按下鼠标左键）
- .right 修饰符（按下鼠标右键）
- .middle 修饰符（按下鼠标中键）
<body>
<div id="app">
<button @click.left="fn">按钮1</button>
<button @click.right="fn">按钮2</button>
<button @click.middle="fn">按钮3</button>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log('点击了元素');
}
}
});
</script>
</body>
v-model 修饰符
- .trim 修饰符：用于自动过滤用户输入内容首尾两端的空格。
- .lazy 修饰符：用于将 v-model 的触发方式由 input 事件触发更改为 change 事件触发，也就是将每次输入数据就进行更新的方式更改为当失去焦点时才更新。
- .number 修饰符：用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容。
<body>
<div id="app">
<!-- <input type="text" v-model.trim="inputValue">
<p>{{ inputValue }}</p> -->
<!-- <input type="text" v-model.lazy="inputValue">
<p>{{ inputValue }}</p> -->
<input type="text" v-model.number="inputValue">
<p>{{ inputValue }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
inputValue: ''
}
});
</script>
</body>
