事件处理 v-on指令
- 用于进行元素的事件绑定
书写方式
- Vue.js还为v-on指令提供了简写方式。
- 事件程序代码较 多时，可以在methods中设置函数，并设置为事件处理程序。
- 设置事件处理程序后，可以从参数中接收事件对象。
// vue.js会自动找到event传递
fn(event){
console.log(event); // MouseEvent
this.content = '这是按钮3设置的内容';
}
复制代码- 在视图中可以通过$event访问事件对象
<button @click="fn2(200,$event)">按钮4</button>
复制代码v-on:click
- 代码演示
<button v-on:click="content='新的内容'">按钮1</button>
复制代码@click=””(简写方式)
<button @click="content='这是另一个内容'">按钮2</button>
<!-- 将数据逻辑和视图层分离开 -->
<button @click="fn">按钮3</button>
<button @click="fn2(200,$event)">按钮4</button>
复制代码整体代码演示
<body>
<div id="app">
<p>{{content}}</p>
<button v-on:click="content='新的内容'">按钮1</button>
<button @click="content='这是另一个内容'">按钮2</button>
<!-- 将数据逻辑和视图层分离开 -->
<button @click="fn">按钮3</button>
<button @click="fn2(200,$event)">按钮4</button>
</div>
<script src="lib/vue.js"></script>
<!-- v-on:click事件 -->
<script>
new Vue({
el:'#app',
data: {
content:'原本的内容'
},methods: {
// vue.js会自动找到event传递
fn(event){
console.log(event); // MouseEvent
this.content = '这是按钮3设置的内容';
},
fn2(value,event){
console.log(value,event);
this.content = value;
}
}
});
</script>
</body>
复制代码表单输入绑定 v-model指令
通过v-model给不同的表单元素进行双向数据绑定
输入框绑定
- 针对单行输入框(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>{{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>
new Vue({
el:"#app",
data: {
value3: ''
}
});
</script>
</body>
复制代码复选框绑定
- 元素：可勾选，可取消
- 单个复选框绑定时，是boolean值，不是value
- 多个复选框绑定的数据，需要存储在数组中，值就是当前选项的value
<body>
<div id="app">
<p>{{value4}}</p>
<!-- 复选框：单个选项情况 -->
<input type="checkbox" id="item" value="选择内容" v-model="value4">
<label for="item">已阅读</label>
<!-- 复选框：多个选项情况 -->
<p>{{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 src="lib/vue.js"></script>
<script>
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>
<option value="4">选项4</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>
<option value="4">选项4</option>
</select>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
value6: '',
value7:[]
}
});
</script>
</body>
复制代码v-model指令总结
- input输入框：绑定字符值 value
- textarea输入框：绑定字符值 value
- radio: 绑定字符串值 value
- checkbox: 单个绑定布尔值(checked)，多个绑定数组(value)
- select: 单选绑定字符串，多选绑定数组(value\selected)
- 题目：无论哪种表单元素，v-model绑定的都是value属性。（x）
修饰符
- 修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作。
事件修饰符
.prevent修饰符
- 用来阻止标签的默认行为，相当于event.preventDefault()
- 代码演示
<body>
<div id="app">
<!-- 两种写法都可以 -->
<a v-on:click.prevent href="https://www.ctrip.com/">链接</a>
<a @click.prevent href="https://www.ctrip.com/">链接</a>
</div>
<script>
// 一定要写vue实例绑定了app，不然v-on:click没有办法识别出来
new Vue({
el: "#app",
data: {
},methods:{
}
});
</script>
</body>
复制代码- 去掉默认行为，自定义执行事件
<body>
<div id="app">
<a v-on:click.prevent="fn" href="https://www.ctrip.com/">链接</a>
</div>
<script>
new Vue({
el: "#app",
data: {
},methods:{
fn(){
alert('这是a的点击事件');
}
}
});
</script>
</body>
复制代码.stop修饰符
- 实际案例：阻止默认行为后，在阻止事件传播
- 多个修饰符连写，实现多个功能
<body>
<div id="app">
<!-- <a v-on:click.prevent href="https://www.ctrip.com/">链接</a>
<a v-on:click.prevent="fn" href="https://www.ctrip.com/">链接</a> -->
<div @click="fn1">
<!-- 使用.stop，阻止事件传播 -->
<!-- <button @click.stop="fn">按钮</button> -->
<!-- 多个修饰符一起使用 -->
<a @click.prevent.stop="fn" href="https://www.ctrip.com/">链接</a>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
},methods:{
// fn(){
// alert('这是a的点击事件');
// }
fn(){
console.log("按钮 的点击事件");
},
fn1(){
console.log("div 的点击事件");
}
}
});
</script>
</body>
复制代码.once修饰符
- 设置事件只会触发一次
总结
- 可以去Vue官网去学习更多的修饰符
按键修饰符
- 按键码指的是：将按键的按键码作为修饰符使用以标识按键的操作。
- 无论使用的是数字按键还是字母按键，都可以通过keycode来操作
- 回顾
- 完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。
- 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上
- 当按钮被按下时，发生 keydown 事件。keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。
数字按键（内容按键）
<!-- 数字1按键：追加keycode -->
<input type="text" @keyup.49="fn">
复制代码字母按键（内容按键）
- keycode
<!-- 字母a按键：追加keycode -->
<input type="text" @keyup.65="fn">
复制代码- 字母本身（更简洁、直观）
<!-- 字母a按键：追加keycode -->
<input type="text" @keyup.f="fn">
复制代码- 连续打点调用
<!-- 打点使用，含义：点击 f 或 a 或 c 的时候，会触发事件 -->
<input type="text" @keyup.f.a.c="fn">
复制代码特殊按键（功能按键）
- 特殊按键指的是：键盘中类似esc、enter、delete等功能按键
- 为了更好的兼容性（有些浏览器中对应的keycode不同），应首选内置别名。
- 有一些按键（.esc以及所有的方向键）在IE9中有不同的key值，如果想支持IE9，别名首选。
<!-- 其他按键：.enter .tab .delete .esc .space .up .down .left .right -->
<input type="text" @keyup.left="fn">
复制代码系统修饰符
- 指的是：ctrl、alt、shift等按键。
- 不像内容按键（数字按键、字母按键），直接按一次，就会生效。系统按键单独点击无效。
- 系统按键通常与其他按键结合使用（同时按）。
- 使用组合按键执行特定的事件
<body>
<div id="app">
<!-- 系统按键: 按特定的组合，执行特定的事件 -->
<input type="text" @keyup.alt.c="fn" v-model="testValue">
</div>
<script>
new Vue({
el:'#app',
data: {
testValue:''
},methods: {
fn(event){
// console.log(event);
this.testValue = '';
}
}
});
</script>
</body>
复制代码.ctrl修饰符
<!-- 系统按键: 单独点击无效，需要与其他按键结合使用 -->
<input type="text" @keyup.ctrl="fn">
复制代码.alt修饰符
<!-- 系统按键: 单独点击无效，需要与其他按键结合使用 -->
<input type="text" @keyup.alt="fn">
复制代码.shift修饰符
- 同上
鼠标修饰符
- 用于设置点击事件由鼠标哪个按键来完成
.left修饰符
<!-- 鼠标修饰符 -->
<button @click.left="fn">按钮</button>
复制代码.right修饰符
<!-- 鼠标修饰符 -->
<button @click.right="fn">按钮</button>
复制代码.middle修饰符
<!-- 鼠标修饰符 -->
<button @click.middle="fn">按钮</button>
复制代码v-model修饰符
.trim修饰符
<body>
<div id="app">
<!-- trim 查看elements 发现确实去掉了首尾空格 -->
<input type="text" v-model.trim="value">
<p>{{value}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
value: ''
},
methods: {
}
});
</script>
</body>
复制代码.lazy修饰符
- 可以改变v-model双向数据绑定的触发时机
- 从input触发形式改成change触发形式
- 失去焦点以后，新的内容和原有的内容不相同，则更新给数据
<body>
<div id="app">
<!-- 失去焦点之后，现有的内容和原有的内容不同，才进行更新 -->
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
value: ''
},
methods: {
}
});
</script>
</body>
复制代码.number修饰符
- 自动进行数据转换的数值修饰符
- 可转换，将数据更新给数据
- 不可转换NAN，将原始的数据给数据
- 适用于：纯数值
- 转换方式：parseFloat
- 举例：
- 文本框输入123,value=”123″,转换后：123
- 文本框输入123abc,value=”123″,转换后：123
- 文本框输入abc,value=”abc”,无法进行转换，保留原有值:abc
<body>
<div id="app">
<!-- 不添加.number时，value为字符串形式；添加后转换为数字形式 -->
<input type="text" v-model.number="value">
<p>{{value}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
value: ''
},
methods: {
}
});
</script>
</body>
复制代码总结
- trim修饰符
- 用于自动过滤用户输入内容首尾两端的空格。
- lazy修饰符
- 用于将v-model的触发方式由input事件触发更改为change事件触发。
- number修饰符
- 用于自动将用户输入的值转换为数值类型，如无法被parseFloat()转换，则返回原始内容。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
