Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】
目 录
1、Vue表单
原生JS实现异步表单提交
运行截图
代码
核心指令
单选框、密码框、多行文本框
单选
多选
勾选
下拉列表（每个option标签都要有value值）
组件汇总案例
运行截图
代码
ToDoList案例
JS堆栈内存图
运行截图
代码
2、计算属性（对data中的数据进行加工处理）
实现
computed-案例
运行截图
代码
3、watch监听（监听data中数据变化）
实现
案例
运行截图
代码
1、Vue表单
Vue.js表单 是双向数据绑定的。
原生JS实现异步表单提交
运行截图
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>01、原生JS实现异步表单提交</title></head><body><!-- 如果是异步提交，就可以不需要使用form标签 --><p>姓名： <input type="text"> </p><p>密码： <input type="password"></p><button>提交</button><!-- 传统同步模式 action：服务器处理地址--><form action=""><input type="text" name="username"><input type="password" name="password"><input type="submit"></form></body><script>var btn = document.getElementsByTagName("button")[0];var ipt = document.getElementsByTagName("input");btn.onclick = function () {console.log(ipt[0].value)console.log(ipt[1].value)}// 如果字段多， 获取字段值很麻烦，且 数据回显</script></html>
核心指令
<标签控件 v-model="变量" />
单选框、密码框、多行文本框
<input type="text" v-model="变量" /><input type="password" v-model="变量" /><textarea v-model="变量"></textarea>
单选
变量获取到的数据就是控件的value值，如果变量绑定的数据和控件的value值⼀致，则 该单选控件 被选中。
<input type="radio" v-model="变量" value="值1" /><input type="radio" v-model="变量" value="值2" /><input type="radio" v-model="变量" value="值3" />data:{变量:值2 // 值2的控件将会被选中}
多选
<input type="checkbox" v-model="变量" value="值1" /><input type="checkbox" v-model="变量" value="值2" /><input type="checkbox" v-model="变量" value="值3" />data:{变量:[值1] // 绑定的变量是⼀个数组！ 值1的控件将会选中}
勾选
<input type="checkbox" v-model="变量" />data:{变量:布尔值}
下拉列表（每个option标签都要有value值）
<select v-model="变量"><option value="值1">111</option><option value="值2">222</option><option value="值3">333</option></select>data:{变量:值2 // 值2的option控件被选中}
组件汇总案例
运行截图
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>02、Vue表单</title><script src="./vue.js"></script></head><body><div id="app"><p>姓名：<input type="text" v-model="userinfo.username">{{userinfo.username}}</p><p>密码：<input type="password" v-model="userinfo.password">{{userinfo.password}}</p><p>性别：<!-- 作为单选控件的时候，需要给每个控件一个 value值！ --><label><input type="radio" value="1" v-model="userinfo.sex">男</label><label><input type="radio" value="0" v-model="userinfo.sex">女</label>{{userinfo.sex}}</p><p>爱好：<!-- 作多选的时候，每个多选控件，也需要有value值，作为提交的数据 --><label><input type="checkbox" value="lq" v-model="userinfo.ah">篮球</label><label><input type="checkbox" value="zq" v-model="userinfo.ah">足球</label><label><input type="checkbox" value="ymq" v-model="userinfo.ah">羽毛球</label><label><input type="checkbox" value="pq" v-model="userinfo.ah">皮球</label>{{userinfo.ah}}</p><p>是否同意协议：<!-- 作勾选的时候，绑定的变量只需要是一个布尔值即可！ --><label><input type="checkbox" v-model="userinfo.agree">xxxxx协议内容，是否同意</label>{{userinfo.agree}}</p><p>家乡：<!-- 多选，每个option都绑定上一个value --><select v-model="userinfo.city"><option value="">==请选择==</option><option value="zhengzhou">郑州</option><option value="nanying">南阳</option><option value="anyang">安阳</option><option value="xinyang">信阳</option><option value="luoyang">洛阳</option></select>{{userinfo.city}}</p><p>留言：<textarea v-model="userinfo.note"></textarea>{{userinfo.note}}</p><button @click="reg">提交</button></div></body><script>// 核心指令内容： v-model // vue.js 受欢迎的原因就在于表单的双向数据绑定！new Vue({el: "#app",data: {userinfo: {username: "1",password: "2",sex: 1, // 1 男 0 女ah: ['zq', 'pq'], // 如果多选的话，绑定需要是一个数组agree: false,city: "",note: ""}},methods: {reg() {console.log("要去注册了")console.log(this.userinfo)}}})// 获取表单数据 变得简单了！// 从表单获取数据---赋值--->userinfo.username</script></html>
ToDoList案例
JS堆栈内存图
基本数据类型字符串、数字、布尔值、null、undefined栈内存引用数据类型object/array堆内存
运行截图
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>03、ToDoList</title><script src="vue.js"></script><style>#app {text-align: center;}.form {background-color: orange;padding: 20px;display: inline-block;border-radius: 5px;}.table,td,th {border: 1px solid orange;width: 900px;margin: 30px auto;}td,th {padding: 5px;}.bg {background-color: orange;color: #fff;}</style></head><body><div id="app"><div class="form">主题：<input type="text" v-model="item.title">地点：<input type="text" v-model="item.pos">时间：<input type="date" v-model="item.time"><button @click="submitAdd" v-if="act=='add'">提交</button><button @click="submitEdit" v-if="act=='edit'">修改</button></div><table class="table"><tr class="top"><th>序号</th><th>主题</th><th>地点</th><th>时间</th><th>状态</th><th>操作</th></tr><template v-if="list.length"><!-- v-if、v-for 不能同时在一个标签内。 template : 辅助功能，无渲染效果。 --><tr v-for="(val, idx) in list" :class="val.status ? 'bg':'' "><td>{{idx+1}}</td><td>{{val.title}}</td><td>{{val.pos}}</td><td>{{val.time}}</td><td>{{val.status ? '完成':'未完成'}}</td><td><button @click="finish(val)" v-if="val.status==0">完成</button><button @click="edit(val, idx)">修改</button><button @click="del(idx)">删除</button></td></tr></template><tr v-else><td colspan="6"><br>暂无数据<br><br></td></tr></table></div></body><script>new Vue({el: "#app",data: {list: [],item: {title: "",pos: "",time: "",status: 0 // 0表示 未完成 ; 1表示已完成},act: "add", // 提交的类型！editIdx: "", // 修改的下标},methods: {submitAdd() { // 添加提交if (this.item.title && this.item.pos && this.item.time) {// 将数据放入到list中// 拷贝一份和this.item完全一致的数据，放进去// Object.assign(对象A，对象B) 将对象B合并到对象A里面去。拷贝this.list.push(Object.assign({}, this.item))// 数据还原！this.item.title = this.item.pos = this.item.time = ""this.item.status = 0;} else {alert("请输入完整数据！")}},submitEdit() { // 修改提交if (this.item.title && this.item.pos && this.item.time) {let newdata = Object.assign({}, this.item);// 找修改的那个下标，将新的数据替换了！console.log(this.editIdx)this.list[this.editIdx] = newdata;// 数据还原！this.item.title = this.item.pos = this.item.time = ""this.item.status = 0;this.act = "add"this.editIdx = ""} else {alert("请输入完整数据！")}},finish(v) {v.status = 1;},edit(v, i) {console.log(v)console.log(i)this.editIdx = i; // 将下标放在data里面的editIdx变量！this.act = "edit"this.item = Object.assign({}, v); // 数据回显！},del(i) {this.list.splice(i, 1) // 删除数据}}})/ 引用数据类型的特点 //var aa = 20;var bb = aa;bb += 20;console.log(aa) // 20console.log(bb) // 40var p1 = {name: "张飞",age: 20}var p2 = p1; // 引用地址p2.age += 10;console.log(p1.age) // 30console.log(p2.age) // 30// JS// 基本数据类型 字符串、数字、布尔值、null、undefined 栈内存// 引用数据类型 object/array 堆内存</script></html>
2、计算属性（对data中的数据进行加工处理）
实现
计算属性的值为函数，且这个函数需要有返回值！
将数据处理好之后，赋给全局变量，再进行显示。
new Vue({el: "",data: {},computed: {属性名: function(){return xxx;}}})
computed-计算属性案例
运行截图
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>04、计算属性</title><script src="./vue.js"></script></head><body><div id="app">{{abc}}<br>{{money}}<hr>{{"￥"+num}}</div></body><script>// 计算属性// 计算属性 // 动词名词 语文角度// 计算属性本质是属性！ 只不过需要计算得到！let vm = new Vue({el: "#app",data: {msg: "你好",age: 20,num: 2000},computed: {abc: function () { // 值是一个函数，且这个函数有return返回值内容！return this.msg + this.age},money: function () {return "￥" + this.num}}})console.log(vm) </script></html>
3、watch监听（监听data中数据变化）
实现
new Vue({el: "",data: {变量名:值},watch: {// 浅监听： 监听的变量数据类型是基本数据类型变量名: function(新值){....}// 深监听： 监听的变量数据类型是引⽤数据类型变量名: {deep: true,handler: function(新值){...}}}})
案例
运行截图
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>05、watch使用</title><script src="./vue.js"></script></head><body><div id="app"><span>单价是：￥10.00</span><span>数量是：{{num}}</span><!-- <span>小计：￥{{ num*10 }}</span> --><span>小计：￥{{ total }}</span><button @click="add">累加</button><hr>{{person}}</div></body><script>// 需要一个监听者，监听某个数据的变化！new Vue({el: "#app",data: {num: 1,total: "10.00",person: {name: "张飞",age: 20}},methods: {add() {this.num++ // 数量变化！this.person.age++ // 年纪也变化！}},watch: {// 浅监听// 只要num发生变化，此函数将自动执行num: function (newval) { // 形参newnalconsole.log(newval)this.total = newval * 10},// 深监听-->对象// 无法检测变化的，因为引用地址没有变化！// person:function(newval){//console.log(newval)// }person: {deep: true,handler: function (newval) {console.log(newval)}}}})// 监听分类两种：// 浅监听： 监听的是基本数据类型！// 深监听： 监听的是引用数据类型！</script></html>
多谢观看~
Vue.js-Day02-AM【Vue表单 核心指令（单选框 密码框 多行文本框 单选 多选 勾选 下拉列表） 组件汇总案例 ToDoList案例 计算属性(computed) watch监听】
