Vue学习笔记之表单绑定
1. 概述
1.1. 什么是数据的双向绑定
Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。 值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。
1.2. 为什么要实现数据的双向绑定
在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。
2. 在表单中使用双向数据绑定
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值
2.1. 单行文本
主要代码：
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:''
}
})
</script>
</body>
</html>
实现效果:
2.2. 多行文本
主要代码：
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: ''
}
})
</script>
</body>
</html>
实现效果:
2.3. 单复选框
主要代码：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
checked: false
}
})
</script>
</body>
</html>
实现效果:
2.4. 多复选框
多个复选框，绑定到同一个数组：
主要代码：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
checkedNames: []
}
})
</script>
</body>
</html>
实现效果:
2.5. 单选按钮
主要代码：
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
picked: ''
}
})
</script>
</body>
</html>
实现效果:
2.6. 下拉框
主要代码：
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
selected: ''
}
})
</script>
</body>
</html>
实现效果:
2.7. 多选框
主要代码：
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
selected: []
}
})
</script>
</body>
</html>
实现效果:
3. 参考资料
[2]Vue课堂笔记/04表单双绑、组件.md · 卢泽华/Vue - 码云 - 开源中国
Vue学习笔记之表单绑定的更多相关文章
- Vue学习笔记之表单绑定输入
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- Vue 学习笔记之 —— 表单输入绑定
Vue 中文文档 https://cn.vuejs.org/ 不多说,直接上干货. v-model 指定,用来在input textarea 等表单元素上创建双向数据绑定,负责监听用户的输入事件,以及 ...
- vue 学习三 v-model 表单绑定输入 以及修饰符的用处
v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...
- Symfony2学习笔记之表单
对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- vue基础-动态样式&表单绑定&vue响应式原理
动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...
- Vue.js学习笔记--3.表单输入绑定
整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...
- Vue.js 2.x笔记：表单绑定（3）
1. 基础用法 v-model 指令:在表单 input 和 textarea 元素上创建双向数据绑定. 1.1 单行文本(Text) <div id="app"> & ...
- AngularJS 1.2.x 学习笔记（表单校验篇）
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
随机推荐
- 二阶段目标检测网络-FPN 详解
论文背景 引言(Introduction) 特征金字塔网络 FPN FPN网络建立 Anchor锚框生成规则 实验 代码解读 参考资料 本篇文章是论文阅读笔记和网络理解心得总结而来,部分资料和图参考论 ...
- pycharm 小技巧
ctrl键 + B 查看定义源代码 alt键 + enter键 查看帮助 ctrl键 + shift键 + -号 所有代码隐藏 ctrl键 + shift键 + +号 所有代码展示 ctrl键 + D ...
- 实用！7个强大的Python机器学习库！⛵
作者:韩信子@ShowMeAI 机器学习实战系列:https://www.showmeai.tech/tutorials/41 本文地址:https://www.showmeai.tech/artic ...
- GitHub上的一个Latex模板
代码下载:GitHub的项目地址或者在LATEX项目报告模板下载. 编译环境:Latex的编译器,如Ctex软件. 把源码clone或者下载到本地后,根据他的说明 如何开始 使用report.tex开 ...
- NOIP2022 退役记
无所谓,我还能卡队线. 无所谓,我还能被卡校线.
- 由char和byte的关系引申出去——总结一下java中的字符编码相关知识
由char和byte的关系引申出去--总结一下java中的字符编码相关知识 一.字符编码 手持两把锟斤拷,口中直呼烫烫烫 在文章伊始,先来复习一下计算机中关于编码的一些基础知识,着重理清以下几 ...
- 51NOD5213A 【提高组/高分-省选预科 第一场【M】】序列
小 Y 酷爱的接龙游戏正是这样.玩腻了成语接龙之后,小 Y 决定尝试无平方因子二元合数接龙,规则如下: 现有 \(n\) 个不超过 \(K\) 的合数,每个合数 \(a\) 均可表示为 \(a=pq( ...
- Flutter帧率监控 | 由浅入深，详解获取帧率的那些事
前言 做线上帧率监控上报时,少不了需要弄明白如何通过代码获取实时帧率的需求,这篇文章通过图解配合Flutter性能调试工具的方式一步步通俗易懂地让你明白获取帧率的基础知识,以后再也不愁看不懂调试工具上 ...
- MyBatis的使用六(解决字段名与成员名不一致)
本文主要讲述mybatis如何解决mysql的字段名与java实体类的成员变量名称不一致. 一. 介绍实体类和数据表 1. 实体类Employee public class Employee { pr ...
- sync/atomic 原子操作使用与解析
目录 前言 1. 引入 2. sync.atomic 原子操作 2.1 什么是原子操作 2.2 各种 API 的作用 2.2.1 Store 操作 2.2.2 Load 操作 2.2.3 Add 操作 ...