Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定、组件基础
目标：
- 熟练掌握vue中表单的处理方式
- 对之前学习的内容简单回顾一下，并写一个实例，学以致用（最好脱离文档）
vue中表单的处理方式
- vue中表单的处理使用了v-model指令, 这个指令可以直接把一个数据绑定到表单元素中的value,checked,selected特性,同时这些特性也会被忽略掉初始值,而总是将vue实例的数据作为数据来源.
- 使用了v-model之后
<textarea></textarea>之间的插值就不会有效了,会被v-model代替.
双向绑定(v-model)
1.绑定value: text,textarea(字符串)
text:
<input v-model="message" placeholder="edit me">
textarea:
<textarea v-model="message" placeholder="add multiple lines"></textarea>
2.绑定checked: checkout(单个绑定布尔值,多个绑定字符串数组), radio(字符串)
checkout(单个):
<input type="checkbox" id="checkbox" v-model="checked">
checkout(多个):
<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>
radio:
<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>
3.绑定selected: select(字符串)
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
修饰符(用在v-model指令上)
.lazy: 触发的事件不一样,使用change触发,而不是input触发
.number: 自动转为数字类型
.trim:自动过滤后卫空白符号
例子
form.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单输入绑定</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<form>
<!-- 文本 -->
<input type="text" v-model="formData.textValue">{{formData.textValue}}<br>
<textarea v-model="formData.textareaValue"></textarea>{{formData.textareaValue}}<br>
<!-- checkout(单个) -->
<input type="checkbox" id="checkbox" v-model="formData.isChecked"><label for="checkbox">点我啊</label><br>
<!-- 多个多选 -->
<input type="checkbox" id="haha" value="haha" v-model="formData.checkedValues">
<label for="haha">哈哈</label>
<input type="checkbox" id="hoho" value="hoho" v-model="formData.checkedValues">
<label for="hoho">呵呵</label>
<input type="checkbox" id="hihi" value="hihi" v-model="formData.checkedValues">
<label for="hihi">嘻嘻</label>
<br>
多选选中的是<span v-for="value of formData.checkedValues"> {{value}} </span>
<br>
<!-- 单选 -->
<input type="radio" id="one" value="one" v-model="formData.pickedValue">
<label for="one">one</label>
<input type="radio" id="two" value="two" v-model="formData.pickedValue">
<label for="two">two</label>
<input type="radio" id="three" value="three" v-model="formData.pickedValue">
<label for="three">three</label>
<br>
单选选中的是<span> {{formData.pickedValue}} </span>
<br>
<!-- 下拉选择框 -->
<select v-model="formData.selectedValue">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
下拉选择框选中的是<span> {{formData.selectedValue}} </span>
<br>
<a @click="submitForm">提交</a>
</form>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
formData: {
textValue: '',
textareaValue: '',
isChecked: true,
checkedValues: [],
pickedValue:'',
selectedValue: ''
},
msg: '这是一句消息'
},
methods: {
submitForm: function(){
for(var key in this.formData) {
obj[key] = this.formData[key];
}
console.log(this.formData);
console.log(this.msg);
}
}
});
</script>
</body>
</html>
Vue学习计划基础笔记(五) - 表单输入绑定、组件基础的更多相关文章
- Vue.js教程--基础2(事件处理 表单输入绑定
事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- Vue 学习笔记之 —— 表单输入绑定
Vue 中文文档 https://cn.vuejs.org/ 不多说,直接上干货. v-model 指定,用来在input textarea 等表单元素上创建双向数据绑定,负责监听用户的输入事件,以及 ...
- Vue.js学习笔记--3.表单输入绑定
整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...
- Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- 前端MVC Vue2学习总结（五）——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- Vue表单输入绑定（文本框和复选框）
文本框 <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- VUE：事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
随机推荐
- C# 处理json字符串中image数据（byte）Base64
static void Main(string[] args) { string factString = "中华人民共和国"; byte[] myByte; str ...
- PAT——1025. 反转链表
给定一个常数K以及一个单链表L,请编写程序将L中每K个结点反转.例如:给定L为1→2→3→4→5→6,K为3,则输出应该为3→2→1→6→5→4:如果K为4,则输出应该为4→3→2→1→5→6,即最后 ...
- Loadrunner测试webservice协议总结
Loadrunner测试webservice协议总结 一.协议选择 1.打开Virtual user generator,新建脚本,选择webservice协议
- Vscode 格式化vue Template代码段
1.安装 vetur 2.在User Setting中增加设置: "vetur.format.defaultFormatter.html": "js-beautify-h ...
- ASP.NET Core Middleware (转载)
What is Middleware? Put simply, you use middleware components to compose the functionality of your A ...
- 使用DBNEWID Utility 修改oracle数据库的 db name 和 dbid
使用DBNEWID Utility 工具可以同时修改数据库名.DBID,也可以只修改其中一项 官方参考: https://docs.oracle.com/cd/E11882_01/server.112 ...
- zookeeper报错 JAVA_HOME is not set
很多开发者安装zookeeper的时候,应该会发现到这么一个问题: JAVA_HOME is not set 好的!那么这个是什么意思呢? 就是说你的 JAVA_HOME 变量没有设定 为什么会提示 ...
- Python实现注册和三次验证登录
# 帐户表account:# sylar:123# alex:456# wusir:789# taibai:789# 需熟练的知识点:文件操作with open()/write()/read().去掉 ...
- python 消息队列-rabbitMQ 和 redis介绍使用
1.rabbitMQ 与ptyhon 进程queue 区别.进程queue 主要用户Python父子进程之间或者统一进程不同子进程.rabbit可以用户不同语言之前的相互交流,socket可以实现同样 ...
- Linux CentOS Python开发环境搭建教程
CentOS安装Python 1.CentOS已经自带安装了2.x版本,先尝试python命令检查已安装的版本.如果你使用rpm.yum或deb命令安装过,请使用相对命令查询. 2.复制安装文件链 ...