Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
生活随笔
收集整理的這篇文章主要介紹了
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><!-- 如果是異步提交，就可以不需要使用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堆棧內存圖
運行截圖
代碼
<!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.js-Day01-PM【事件绑定
- 下一篇： Vue.js-Day02-PM【组件化开