文章目录
- 前言
- 1️⃣事件处理器
- 2️⃣表单
- 3️⃣总结
前言
上一篇中我们学习了vue.js 的条件语句、循环语句等知识点.,现在让我们接着Vue系列的学习。
Vue中事件处理器、表单等在开发中的作用不可或缺,本文将基于实例进行以上知识点的讲解。
1️⃣事件处理器
在Vue.js中,我们可以使用v-on指令来绑定事件处理器。事件处理分为多种,本文介绍常见的几种。
1.点击事件处理:
语法模板
<template>
<button v-on:click="handleClick">Click Me</button>
</template>
<script>
export default {
methods: {
handleClick() {
// 在这里编写点击事件处理逻辑
console.log('Button clicked!');
}
}
};
</script>
当按钮被点击时,handleClick
方法会被调用,并输出一条消息到控制台。
完整代码如下:
效果如下所示:
2.输入事件处理:
语法模板
<template>
<input v-model="message" v-on:input="handleInput" placeholder="Type something">
</template>
<script>
export default {
data() {
return {
message: ''
};
},
methods: {
handleInput() {
// 在这里编写输入事件处理逻辑
console.log('Input value changed: ' + this.message);
}
}
};
</script>
当文本输入框的值发生变化时,handleInput
方法会被调用,并输出一条带有当前输入值的消息到控制台。
<div id="app">
<input v-model="inputValue" placeholder="Type something" oninput="handleInput(event)">
<p>You typed: {{ inputValue }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
inputValue: ''
}
});
function handleInput(event) {
var inputValue = event.target.value;
console.log('Input value changed:', inputValue);
// 在这里可以进行其他处理逻辑
}
</script>
在上述代码中,我们使用 oninput
属性直接将 handleInput
函数绑定到输入框的 input
事件上。当用户在输入框中输入时,handleInput
函数会被调用,并通过 event.target.value
获取输入框的值。然后,你可以在函数中进行任何其他的处理逻辑。
3.键盘事件处理:
语法模板
<template>
<input v-on:keyup.enter="handleEnterKey" placeholder="Press Enter">
</template>
<script>
export default {
methods: {
handleEnterKey() {
// 在这里编写按下回车键的事件处理逻辑
console.log('Enter key pressed!');
}
}
};
</script>
当在文本输入框中按下回车键时,handleEnterKey
方法会被调用,并输出一条消息到控制台。
2️⃣表单
v-model
是 Vue.js 中一个常用的指令,它可以将表单输入元素绑定到 Vue 实例中的数据属性。通过这种方式,表单输入的值可以自动地同步到 Vue 实例中的数据,而不需要手动监听 “input” 或 “change” 事件来进行数据同步。
我们可以用 v-model 指令在表单控件元素上创建双向数据绑定。
举个例子:
<div id="app">
<p>input 元素:</p>
<input v-model="message">
<p>绑定: {{ message }}</p>
<p>textarea 元素:</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2"></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '秋说',
message2: '等风来\r\nWait'
}
})
页面回显如下:
我们可以通过以下形式实现复选框的双向数据绑定:
<div id="app">
<p>单个复选框:</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框:</p>
<input type="checkbox" id="1" value="秋说" v-model="checkedNames">
<label for="runoob">秋说</label>
<input type="checkbox" id="2" value="花无缺" v-model="checkedNames">
<label for="google">花无缺</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
页面显示如下:
我们可以通过以下形式实现下拉列表的双向数据绑定:
<div id="app">
<select v-model="selected" name="1">
<option value="">choose</option>
<option value="hello">秋说</option>
<option value="bye">花无缺</option>
</select>
<div id="output">
你的选择是: {{selected}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
页面回显如下:
通过以上实例可以看到,v-model指令对于表单的处理是十分高效快捷的。
3️⃣总结
以上为前端开发:一文带你精通Vue.js前端框架系列(七),带领读者掌握事件处理器及表单等。
前端开发系列将持续更新,读者可订阅专栏持续学习。