目 录
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) // 20
console.log(bb) // 40
var p1 = {
name: "张飞",
age: 20
}
var p2 = p1; // 引用地址
p2.age += 10;
console.log(p1.age) // 30
console.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) { // 形参newnal
console.log(newval)
this.total = newval * 10
},
// 深监听-->对象
// 无法检测变化的，因为引用地址没有变化！
// person:function(newval){
// console.log(newval)
// }
person: {
deep: true,
handler: function (newval) {
console.log(newval)
}
}
}
})
// 监听分类两种：
// 浅监听： 监听的是基本数据类型！
// 深监听： 监听的是引用数据类型！
</script>
</html>多谢观看~