當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2024/9/30 vue 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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><p>姓名： <input type="text"> </p><p>密碼： <input type="password"></p><button>提交</button><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="變量" />

單選框、密碼框、多行文本框

單選

變量獲取到的數據就是控件的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>性別：<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>愛好：<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>家鄉：<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"><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>小計：￥{{ 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.js-Day01-PM【事件绑定
下一篇： Vue.js-Day02-PM【组件化开