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监听】相关推荐

Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...
vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
class07：表单、计算属性、watch监听
这里写目录标题一.表单 1. 表单输入绑定二.配置对象 1. 计算属性 2. computed 和 methods 的区别 3. watch监听 a. 单一属性监听 b. 监听对象中的属性 c. ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网一 .class.style操作二.事件三.计算属性四.数据监听.观测五.指令+自定义指令六.过滤器一 .class.style操作官网 1. class使用: (1)v-b ...
vue计算属性computed和侦听属性watch的用法和区别
计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用.注意:计算属性里面必须要ruturn,否则无法拿到结果.计算属性 ...
关于element form表单的验证错误提示信息位置没有出现在文本框下的问题
今天带我的大佬碰到一个有意思的坑,现象如图,错误提示没有在文本框下,而是出现在最左边的文字下. 原因:el-form 没有加上 label-width,默认宽度为0,导致验证错误的提示信息直接出现在了 ...
js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下复制代码 <script> function get1() { document.getElementById("tx ...
vue与C#实现自定义表单审批流程构建-前端
vue与C#实现自定义表单审批流程构建做信息化项目相信绝大部分人都接触过单据审批流程的需求,例如发起一个采购申请,需要几个节点审核,部门负责人审核,采购审核,财务审核等等.审批人也需要可自定义,以及 ...

Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】

1、Vue表单

原生JS实现异步表单提交

运行截图

代码

核心指令

单选框、密码框、多行文本框

单选

多选

勾选

下拉列表（每个option标签都要有value值）

组件汇总案例

运行截图

代码

ToDoList案例

JS堆栈内存图

运行截图

代码

2、计算属性（对data中的数据进行加工处理）

实现

computed-计算属性案例

运行截图

代码

3、watch监听（监听data中数据变化）

实现

案例

运行截图

代码

Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】相关推荐

最新文章

热门文章