事件处理
用于进行元素的事件绑定
<div id="app">
<p> {
{ content }} </p>
<button v-on:click="content='新内容'">按钮</button>
</div>
<!-- ================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
content: "默认内容"
}
})
</script>
Vue.js 还为 v-on 指令提供了简写方式
<div id="app">
<p> {
{ content }} </p>
<button @click="content='新内容'">按钮</button>
</div>
<!-- ================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
content: "默认内容"
}
})
</script>
事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序
<div id="app">
<p> {
{ content }} </p>
<button v-on:click="fn">按钮</button>
</div>
<!-- ================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
content: "默认内容"
},
methods: {
fn () {
this.content = '新内容'
}
}
})
</script>
设置事件处理程序后，可以从参数中接收事件对象
var vm = new Vue({
el: "#app",
data: {
content: "新内容"
},
method: {
fn (event) {
console.log(event)
}
}
})
在视图中可以通过 $event 访问事件对象
<div id="app">
<p> {
{ content }} </p>
<button v-on:click="fn(content, $event)">按钮</button>
</div>
<!-- ================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
content: "默认内容"
},
methods: {
fn (content, event) {
console.log(content);
console.log(event);
}
}
})
</script>
表单输入绑定
v-model 指令
用于给 <input>、<textarea>、<select> 元素设置双向数据绑定
输入框绑定
表单数据绑定
输入框分为单行输入框 input 与多行输入框
<div id="app">
<p> input内容为：{
{ value1 }} </p>
<input type="text" v-model="value1">
<p> input内容为：{
{ value2 }} </p>
<textare v-model="value2">
</div>
<!-- ================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
value1: "",
value2: ""
}
})
</script>
单选按钮绑定
单选按钮的双向数据绑定方式如下
<div id="app">
<p> radio 数据为：{
{ value3 }} </p>
<input type="radio" id="one" value="1" v-model="value3">
<label for="one">选项一</label>
<p> radio 数据为：{
{ value3 }} </p>
<input type="radio" id="two" value="2" v-model="value3">
<label for="two">选项二</label>
</div>
<!-- ================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
value3: ""
}
})
</script>
复选框绑定
复选框绑定分为单个选项与多个选项两种情况，书写方式不同
<div id="app">
<p> 单个 checkbox 选择的数据为：{
{ value4 }} </p>
<input type="checkbox" id="item" value="选项内容" v-model="value4">
<label for="item">选项</label>
<p> 多个 checkbox 选择的数据为：{
{ value5 }} </p>
<input type="checkbox" id="one" value="选项一内容" v-model="value5">
<label for="one">选项一</label>
<input type="checkbox" id="two" value="选项二内容" v-model="value5">
<label for="two">选项二</label>
</div>
<!-- ================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
value4: "",
value5: []
}
})
</script>
选择框绑定
选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同
<div id="app">
<p> 单选 select 数据为：{
{ value6 }} </p>
<select v-model="value6">
<option value="">请选择</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
<p> 多选 select 数据为：{
{ value7 }} </p>
<select v-model="value7" multiple>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
</div>
<!-- ================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
value6: "",
value7: []
}
})
</script>
v-model 指令小结
- input 输入框：绑定字符串值
- textarea 输入框：绑定字符串值
- radio：绑定字符串值
- checkbox：单个绑定布尔值，多个绑定数组
- select：单选绑定字符串，多选绑定数组
修饰符
修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作
事件修饰符
prevent 修饰符
用于阻止默认事件行为，相当于 event.preventDefault()
<div id="app">
<a @click.prevent="fn" href="https://kaiwu.lagou.com/">链接</a>
<a @click.prevent href="https://kaiwu.lagou.com/">链接</a>
</div>
<!-- ============================================ -->
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log('这是 a 标签的点击事件')
}
}
});
</script>
stop 修饰符
用于阻止事件传播，相当于 event.stopPropagation()
<div id="app">
<div @click="fn1">
<button @click.stop="fn2">按钮</button>
</div>
</div>
<!-- ================================================== -->
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn1 () {
console.log('div 的点击事件');
},
fn2 () {
console.log('button 的点击事件');
}
}
})
</script>
Vue.js 中允许修饰符进行连写，例如：@click.prevent.stop
<div id="app">
<div @click="fn1">
<a @click.prevent.stop="fn2" href="https://kaiwu.lagou.com/">链接</a>
</div>
</div>
<!-- ================================================== -->
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn1 () {
console.log('div 的点击事件');
},
fn2 () {
console.log('a 的点击事件');
}
}
})
</script>
once 修饰符
用于设置事件只会触发一次
<div id="app">
<button @click="fn">按钮1</button>
<button @click.once="fn">按钮2</button>
</div>
<!-- ======================================== -->
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn () {
console.log('按钮被点击了');
}
}
})
</script>
按键修饰符
按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式
特殊按键指的是键盘中类似 esc、enter、delete 等功能按键，为了更好的兼容性，应首选内置别名
<div id="app">
<input type="text" @keyup="fn"> -->
<input type="text" @keyup.49="fn">
<input type="text" @keyup.a="fn">
<input type="text" @keyup.esc="fn">
<input type="text" @keyup.a.b.c="fn">
</div>
<!-- ========================================= -->
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn (event) {
console.log(event);
console.log('输入了对应内容');
}
}
});
</script>
系统修饰符
系统按键指的是 ctrl、alt、shift等按键
单独点击系统操作符无效
系统按键通常与其他按键组合使用
<div id="app">
<input type="text" @keyup.17.q="fn">
<input type="text" @keyup.ctrl.q="fn" v-model="inputValue">
</div>
<!-- ====================================== -->
<script>
new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
fn (event) {
console.log(event);
this.inputValue = '';
}
}
});
</script>
鼠标按键修饰符
用于设置点击事件由鼠标那个按键来完成
<div id="app">
<button @click.left="fn">按钮1</button>
<button @click.right="fn">按钮2</button>
<button @click.middle="fn">按钮3</button>
</div>
<!-- =================================== -->
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn () {
console.log('点击了元素');
}
}
});
</script>
v-model 修饰符
trim 修饰符
用于自动过滤用户输入内容首尾两端的空格
<div id="app">
<input type="text" v-model.trim="inputValue">
<p>{
{ inputValue }}</p>
</div>
<!-- ========================= -->
<script>
var vm = new Vue({
el: '#app',
data: {
inputValue: ''
}
});
</script>
lazy 修饰符
用于将 v-model 的触发方式由 input 事件触发更改为 change 事件触发
<div id="app">
<input type="text" v-model.lazy="inputValue">
<p>{
{ inputValue }}</p>
</div>
<!-- ========================= -->
<script>
var vm = new Vue({
el: '#app',
data: {
inputValue: ''
}
});
</script>
number 修饰符
用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容
<div id="app">
<input type="text" v-model.number="inputValue">
<p>{
{ inputValue }}</p>
</div>
<!-- ========================= -->
<script>
var vm = new Vue({
el: '#app',
data: {
inputValue: ''
}
});
</script>