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 ...
随机推荐
- nvm下升级npm版本
1 3445 error path C:\Users\xxx\AppData\Roaming\nvm\v12.18.3\npm.cmd 2 3446 error Refusing to delete ...
- Python开发Brup插件检测SSRF漏洞和URL跳转
作者:馒头,博客地址:https://www.cnblogs.com/mantou0/ 出身: 作为一名安全人员,工具的使用是必不可少的,有时候开发一些自己用的小工具在渗透时能事半功倍.在平常的渗透测 ...
- git相关问题解析，你想要的都有🔥
官网文档: https://git-scm.com/doc 本地克隆远程代码仓库 git clone 地址 本地同步全量历史数据,克隆所有文件的历史记录 git clone 地址 -depth 1 本 ...
- texlive安装与vscode环境配置
环境 系统:windows10 texlive下载 下载地址: 官网:http://tug.org/texlive/ 清华镜像源: https://mirrors.tuna.tsinghua.edu. ...
- 一篇文章带你了解设计模式原理——UML图和软件设计原则
一篇文章带你了解设计模式原理--UML图和软件设计原则 我们在学习过程中可能并不会关心设计模式,但一旦牵扯到项目和面试,设计模式就成了我们的短板 这篇文章并不会讲到二十三种设计模式,但是会讲解设计模式 ...
- 百度智能云 API调用PythonSDK
百度智能云 API调用PythonSDK 这是一个用于百度云部分开放AI功能的Python库.主要为ORC功能,可以对各种图像文件进行文字识别,包括车牌.手写文字.通用文字.人脸发现.人脸比对和人流量 ...
- [seaborn] seaborn学习笔记12-绘图实例(4) Drawing example(4)
文章目录 12 绘图实例(4) Drawing example(4) 1. Scatterplot with varying point sizes and hues(relplot) 2. Scat ...
- [Leetcode]扁平化多级双向链表
题目 https://leetcode-cn.com/explore/learn/card/linked-list/197/conclusion/764/ 代码 /* // Definition ...
- C#11新特性整理
假期中有时间,整理了C#11的各个新特性,简单分享给大家. 一.使用VSCode新建一个.NET7.0的Console工程 <Project Sdk="Microsoft.NET.Sd ...
- java入门与进阶-P1.1+P1.2
计算机与编程语言 计算机如何解决问题 !-- 首先计算机他是不知道自己需要去做什么的,它需要按照你所说的步骤一步一步进行直到结束 "请给我一杯水" 1.转身走到厨房; 2.找到一个 ...