Vue 监视数据总结 && 表单控件使用总结
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 监视数据的原理</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 监视数据的原理：
11 1.Vue会监视data中所有层次的数据
12 2.如何检测对象中的数据?
13 .通过setter实现检测，且要在new Vue时就传入要检测的数据
14 .对象中后追加的属性，Vue默认不做响应式处理
15 .如需要给后添加的属性做响应式，请使用如下API：
16 .Vue.set(target, propertyName/index, value) 或
17 .this.$set(target, propertyName/index, value)
18 3.如何检测数组中的数据？
19 .通过包裹数组更新元素的方法实现，本质就是做了两件事：
20 .调用原生对应的方法对数组进行更新
21 .重新解析模板，进而更新页面
22 4.在Vue修改数组中的某个元素，一定要用如下方法：
23 .使用这些API：psh(),pop(),shift(),unshift(),splice(),reverse(),sort()
24 .Vue.set() 或 vm.$set()
25 特别注意：Vue.set 和 vm.$set() 不能给vm 或 vm的根数据对象，添加属性
26 -->
27 <div id="root">
28 <h2>学生信息</h2>
29 <button @click=" student.age++ ">年龄+1岁</button> <br /> <br />
30 <button @click=" addDefaultSex">添加性别属性，默认值：男</button> <br /> <br />
31 <button @click=" student.sex = '未知'">修改性别</button> <br /> <br />
32 <button @click=" addFriend">在列表首位添加一个朋友</button> <br /> <br />
33 <button @click=" modifyFirstFriendName">修改第一个朋友的名字为：张三</button> <br /> <br />
34 <button @click=" addHobby">添加一个爱好</button> <br /> <br />
35 <button @click=" modifyHobby">修改一个爱好为开车</button> <br /> <br />
36 <button @click=" filterChouyan">过滤爱好中的抽烟</button> <br /> <br />
37
38 <h3>姓名：{{student.name}}</h3>
39 <h3 v-if="student.sex">性别:{{student.sex}}</h3>
40 <h3>年龄：{{student.age}}</h3>
41 <h3>爱好：</h3>
42 <ul>
43 <li v-for="(h, index) in student.hobby" :key="index">{{h}}</li>
44 </ul>
45 <h3>朋友们：</h3>
46 <ul>
47 <li v-for="(f, index) in student.friends" :key="index">{{f.name}}-{{f.age}}</li>
48 </ul>
49 </div>
50 </body>
51
52 <script type="text/javascript" >
53 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
54
55 let vm = new Vue({
56 el: "#root",
57 data:{
58 student:{
59 name: "Tom",
60 age: 18,
61 hobby: ["抽烟", "喝酒", "烫头"],
62 friends:[
63 {name:"Jerry",age:17},
64 {name:"Tony",age:20}
65 ]
66 }
67 },
68 methods:{
69 addDefaultSex(e){
70 // Vue.set(this.student, 'sex', '男');
71 this.$set(this.student, 'sex', '男');
72 },
73 addFriend(e){
74 this.student.friends.unshift({name:"Tim",age:70});
75 },
76 modifyFirstFriendName(e){
77 this.student.friends[0].name = "张三";
78
79 },
80 addHobby(e){
81 this.student.hobby.push('看书');
82 },
83 modifyHobby(e){
84 // this.student.hobby.splice(0,1,'开车')
85 this.$set(this.student.hobby, 0, "开车");
86 },
87 filterChouyan(e){
88 const arr = this.student.hobby.filter((h)=>{
89 return h !== "抽烟"
90 });
91 this.student.hobby = arr;
92 }
93 }
94 });
95 </script>
96 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 收集表单数据</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 收集表单数据：
11 若：<input type="text" />，则v-model收集的是value值，用户输入的就是value值
12 若：<input type="radio" />，则v-model收集的是value值，且要给标签配置value值
13 若：<input type="checkbox" />
14 1.没有配置input的value属性，name收集的就是checked（勾选 or 未勾选，是bool值）
15 2.配置input的value属性：
16 .v-model的初始值是非数组，MAME收集的就是checked（勾选 or 未勾选，是bool值）
17 .v-model的初始值是数组，那么收集的就是value组成的数组
18 备注：v-model的三个修饰符：
19 lazy: 失去焦点再收集数据
20 number:输入字符串转为有效数字
21 trim:去掉输入首尾空格
22 -->
23 <div id="root">
24 <form @submit.prevent="submitForm">
25 账号：<input type="text" v-model.trim="student.username"> <br /><br />
26 密码：<input type="password" v-model="student.password"> <br /><br />
27 性别：
28 男<input type="radio" name="sex" value="man" v-model="student.sex">
29 女<input type="radio" name="sex" value="woman" v-model="student.sex"> <br /><br />
30 年龄：<input type="number" v-model.number="student.age" /> <br /><br />
31 爱好：
32 学习<input type="checkbox" value="study" v-model="student.hobby">
33 打游戏<input type="checkbox" value="game" v-model="student.hobby">
34 吃饭<input type="checkbox" value="eat" v-model="student.hobby"><br /><br />
35 所属校区
36 <select v-model="student.shoolAddr">
37 <option value="">请选择校区</option>
38 <option value="beijing">北京</option>
39 <option value="shenzhen">深圳</option>
40 <option value="shanghai">上海</option>
41 <option value="wuhan">武汉</option>
42 </select>
43 <br /><br />
44 其他信息：
45 <textarea v-model.lazy="student.others"></textarea><br /><br />
46 <input type="checkbox" v-model="student.accept">阅读并接受<a href="https://www.cargoarmor.com">《用户协议》</a>
47 <br /><br />
48 <button>提交</button>
49
50 </form>
51 </div>
52 </body>
53
54 <script type="text/javascript" >
55 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
56
57 let vm = new Vue({
58 el: "#root",
59 data:{
60 student:{
61 username: '',
62 password: '',
63 sex: 'man',
64 age: 27,
65 hobby: [],
66 shoolAddr: '',
67 others: '',
68 accept: true
69 }
70 },
71 methods:{
72 submitForm(e){
73 console.log(JSON.stringify(this.student));
74 }
75 }
76 });
77 </script>
78 </html>
Vue 监视数据总结 && 表单控件使用总结的更多相关文章
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- Vue.js学习笔记——表单控件实践
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...
- vue.js 2的表单控件
静下心,抄一段sample,以后可以快点到这里来抄...: <!DOCTYPE html> <html> <head> <meta charset=" ...
- Angular19 自定义表单控件
1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- vue表单控件绑定（表单数据的自动收集）
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- vue指令：v-model绑定表单控件；v-model与v-bind结合使用
一.v-model绑定表单控件 v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. 1. 单行文本 ...
随机推荐
- 项目实战：Qt+OpenCV大家来找茬（Qt抓图，穿透应用，识别左右图区别，框选区别，微调位置）
前言 本项目的出现理由只是笔者的一个念头,于是利用专业Qt和Opencv相关的知识开发一个辅助工具,本文章仅用于Qt和Opencv结合的学习. Demo演示效果 运行包下载地 ...
- ER图/模型转换为关系模型
ER图中的主要成分是实体类型和联系类型,转换规则就是如何把实体类型.联系类型转换成关系模式. 1. 二元联系转换 规则1.1(实体类型的转换):将每个实体类型转换成一个关系模式,实体的属性即为关系模式 ...
- 喜提JDK的BUG一枚！多线程的情况下请谨慎使用这个类的stream遍历。
你好呀,我是歪歪. 前段时间在 RocketMQ 的 ISSUE 里面冲浪的时候,看到一个 pr,虽说是在 RocketMQ 的地盘上发现的,但是这个玩意吧,其实和 RocketMQ 没有任何关系. ...
- 【Java面试】Mysql为什么使用B+Tree作为索引结构
一个工作8年的粉丝私信了我一个问题. 他说这个问题是去阿里面试的时候被问到的,自己查了很多资料也没搞明白,希望我帮他解答. 问题是: "Mysql为什么使用B+Tree作为索引结构" ...
- mysql5.7安装要踩的坑
因为官网下载的是绿色版,所以要做一些配置 1.在mysql根目录新增data文件夹和my.ini文件 my.ini文件内容 [mysql]# 设置mysql客户端默认字符集default-charac ...
- 怎么理解相互独立事件？真的是没有任何关系的事件吗？《考研概率论学习之我见》 -by zobol
1.从条件概率的定义来看独立事件的定义 2.从古典概率的定义来看独立事件的定义 3.P(A|B)和P(A)的关系是什么? 4.由P(AB)=P(A)P(B)推出"独立" 5.从韦恩 ...
- Hexo + VSCode 插入 Markdown 图片解决办法
最近打开 typora 时发现弹窗强更,不让用 beta 版了 想到自己并不是非常需要 WYSIWYG,而且也不是经常使用 typora,于是直接退回到 VSCode 了,而且在 VSCode 里可以 ...
- SAP Web Dynpro - 教程
SAP Web Dynpro是一种标准的SAP UI技术,用于使用图形工具和与ABAP工作台集成的开发环境来开发Web应用程序. 图形工具的使用减少了实施工作,并有助于维护ABAP工作台中的组件. 本 ...
- 基于swiftadmin极速后台开发框架，我制作了菜鸟教程[专业版]
由于互联网上基础编程教学的文档和视频教程已经有很多了,为什么还要建立菜鸟教程网, 这是因为基于我个人在十余年的自学编程的道路上.,我能深刻的体会到一名新手 在入门编程的时候,门槛在哪里,痛点在哪里?很 ...
- MAC帧的格式&&wireshark分析MAC帧
MAC帧的格式 MAC帧较为简单,由五个字段组成 目的地址:6字节 源地址:6字节 类型字段:2字节,用来标志上一层使用的是什么协议,以便把收到的MAC地址帧的数据交给上一层的这个协议. 数据字段:其 ...