目錄

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>

多謝觀看~

Vue.js-Day02-AM【Vue表單、核心指令（單選框、密碼框、多行文本框、單選、多選、勾選、下拉列表）、組件彙總案例、ToDoList案例、計算屬性(computed)、watch監聽】

1、Vue表單

原生JS實現異步表單提交

運行截圖

代碼

核心指令

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

單選

多選

勾選

下拉列表（每個option標籤都要有value值）

組件彙總案例

運行截圖

代碼

ToDoList案例

JS堆棧內存圖

運行截圖

代碼

2、計算屬性（對data中的數據進行加工處理）

實現

computed-計算屬性案例

運行截圖

代碼

3、watch監聽（監聽data中數據變化）

實現

案例

運行截圖

代碼