VUE學習小結

時間 2019-11-09

標籤 vue 學習小結简体版

原文原文鏈接

構造VUE實例

new VUE({javascript

　　el:'選擇器',css

　　data:{html

　　　　k1:v1,vue

　　　　k2:v2,java

　　　　...json

　　},數組

　　methods:{dom

　　　　method1(){函數

　　　　　　...ui

　　　　method2(){

　　　　　　...

　　　　}

})

說明：

VUE構造函數的參數是一個json對象，它主要有3個鍵：

el表示數據在什麼元素內有效，它的值是一個選擇器，能夠是id選擇器，也能夠是類選擇器，不能是body。

data顯示就是數據，是一個json格式，在html雙標籤內引用如：<h1>{{k1}}</h1>

methods一般定義響應事件的方法，做爲html元素的屬性引用如：<button @click="method1">肯定</button>，@click是v-on:click的縮寫。

v-bind

v-bind:class="{樣式名:data中布爾型的變量}"

如：v-bind:class="{active:isActive}

說明：active是css樣式名(.active)，isActive是data中的一個bool型變量，若是它的值爲true，則採用.active樣式，不然就不採用。

擴展：

　　（1）v-bind:class="{ active: isActive, 'text-danger': hasError }"

　　（2）v-bind:class="classObject" //classObject={ active: isActive, 'text-danger': hasError }

v-bind:class="表達式"

如：v-bind:class="isRed?'red':'green'"

說明：主要根據data中的isRed的值（true仍是false）來選擇css樣式，true的話就採用‘red’，‘false’的話就採用‘green’。'red'和'green'是CSS類選擇器的名字，分別是「.red」和「.green」。

v-bind:style="{屬性1:值1,屬性2:值2}"

如：v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

說明：值1activeColor和值2fontSize是Data中的鍵。

綜合實例：

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style type="text/css">
            .red {
                background: red;
            }
            
            .blue {
                background: blue;
            }
            
            .green {
                background: green;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">標題</h1>
        </header>
        <div class="mui-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" v-for="(room,index) in rooms" :class="colors[room.status]">
                    <h4>{{room.id}}</h4>
                    <p>{{index}}</p>
                    <p>
                        {{room.status}}
                    </p>
                    <button type="button" class="mui-btn mui-btn-purple" @click="del(index)">刪除</button>
                </li>
            </ul>
            <div :class="isRed?'red':'green'" style="height: 50px;margin-top: 10px;">
                <a @click="isRed=!isRed">vip</a>
            </div>
            <form class="mui-input-group" style="margin-top: 10px;">
                <div class="mui-input-row">
                    <label for="">房號：</label>
                    <input type="text" v-model="id" />
                </div>
                <div class="mui-input-row">
                    <label for="">狀態：</label>
                    <select name="" id="" v-model="status">
                        <option value="未到店">未到店</option>
                        <option value="已到店">已到店</option>
                        <option value="消費中">消費中</option>
                    </select>
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-primary" @click="add2">添加</button>
                    <button type="reset" class="mui-btn mui-btn-danger">取消</button>
                </div>
            </form>
        </div>

        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            mui.init();
            var rooms = [{
                    id: '1001',
                    status: '未到店'
                },
                {
                    id: '1002',
                    status: '已到店'
                },
                {
                    id: '1003',
                    status: '消費中'
                },
            ];

            var vm = new Vue({
                el: '.mui-content',
                data: {
                    id: '',
                    status: '未到店',
                    isRed: true,
                    rooms: rooms,
                    colors: {
                        '未到店': 'red',
                        '已到店': 'blue',
                        '消費中': 'green'
                    }
                },
                methods: {
                    add1() {
                        var max_id = parseInt(this.rooms[0].id);
                        for(var i = 0; i < this.rooms.length; i++) {
                            if(this.rooms[i].id > max_id) {
                                max_id = this.rooms[i].id;
                            }
                        }
                        var new_id = parseInt(max_id) + 1;
                        var statusArr = ['未到店', '已到店', '消費中'];
                        var new_index = Math.round(Math.random() * 10) % 3;
                        console.log(new_index);
                        var new_status = statusArr[new_index];
                        this.rooms.push({
                            id: new_id,
                            status: new_status
                        });
                    },
                    add2() {
                        this.rooms.push({
                            id: this.id,
                            status: this.status
                        });
                    },
                    del(index){
                        this.rooms.splice(index,1);
                    }
                }

            })
        </script>
    </body>

</html>

v-model

文本框

如：<input type="text" v-model="var1">

說明：表單控件的雙向綁定，內存變量var1的值能夠改變控件的值（value），同時value也可改變內存變量var1的值。

單選按紐

<p>您的性別是：{{sex}}</p>

複選框

<hr />

<input type="checkbox" value="StarCraft" v-model="games"/><label for="">StarCraft</label><br />

<input type="checkbox" value="WarCraft" v-model="games"/><label for="">WarCraft</label><br />

<p>你選擇的是：{{games}}</p>

列表

</select>

<p>你選擇的小說是： {{story}}</p>

綜合實例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="container">
            <h2>文本框</h2>
            <input type="text" v-model="txt" />
            <p>你輸入的內容是：{{txt}}</p>
            <h2>單選按紐</h2>
            <input type="radio" name="" id="" value="男" v-model="sex"/><label for="">男</label>&nbsp;&nbsp;
            <input type="radio" name="" id="" value="女" v-model="sex"/><label for="">女</label>
            <p>您的性別是：{{sex}}</p>
            <h2>複選框</h2>
            <input type="checkbox" name="" id="" value="" v-model="like"/><label for="">喜歡遊戲?{{like}}</label><br />
            <hr />
            <input type="checkbox" name="" id="" value="StarCraft" v-model="games"/><label for="">StarCraft</label><br />
            <input type="checkbox" name="" id="" value="WarCraft" v-model="games"/><label for="">WarCraft</label><br />
            <input type="checkbox" name="" id="" value="FIFA" v-model="games"/><label for="">FIFA</label>
            <p>你選擇的是：{{games}}</p>
            <h2>Select列表</h2>
            <select name="" v-model="story">
                <option value="">--選擇--</option>
                <option value="三國演義">三國演義</option>
                <option value="水滸傳">水滸傳</option>
                <option value="西遊記">西遊記</option>
                <option value="紅樓夢">紅樓夢</option>
            </select>
            <p>你選擇的小說是： {{story}}</p>
            
        </div>
        <script type="text/javascript">
            var vm=new Vue({
                el:'.container',
                data:{
                    txt:'haha',
                    sex:'男',
                    like:true,
                    games:[],
                    story:''
                }
            })
        </script>
    </body>
</html>

vue動態添加響應式屬性

注意：只有Vue實例被建立時data中存在的屬性纔是響應式的，後來新增的屬性不會觸發任何的視圖更新的，你能夠將後來要增長的屬性先添加到data中，並設置其初值，好比：0、''、null。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--<div id="div1">
            姓名：{{name}} <br />
            年齡：{{age}} <br />
            <button @click="setAge1()">設置年齡</button>
        </div>-->
          <!--
              對於已經建立的實例，Vue 不能動態添加根級別的響應式屬性。
              可是，能夠使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。
          -->
         
        <div id="div2">
            姓名：{{player.name}} <br />
            年齡：{{player.age}} <br />
            球隊：{{player.club}} <br />
            年齡：{{player.no}} <br />
            <button @click="addProperty()">動態添加屬性</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
//            var vm1=new Vue({
//                el:'#div1',
//                data:{
//                    name:'michael'
//                },
//                methods:{
//                    setAge1:function  () {
//                        vm1.age=41;//在Vue實例建立後，沒法data中直接添加根屬性，但能夠在已存在的根屬性中動態添加新屬性，也不能直接添加，應該使用Vue.set(vm2.player,'age',41)這種方式來添加

 // } // } // }) 
　　
　　　　　　　　var vm2=new Vue({
　　　　　　　　　　 el:'#div2', 
　　　　　　　　　　data:{ player:{ name:'kobe' } }, 
　　　　　　　　　　methods:{ addProperty:function () 
　　　　　　　　　　　　　　　　{ 
　　　　　　　　　　　　　　　　　　//vm2.player.age=41;//這種添加屬性，視圖不會更新。  
　　　　　　　　　　　　　　　　　　Vue.set(vm2.player,'age',41);//動態添加一個屬性  
　　　　　　　　　　　　　　　　　　vm2.player=Object.assign({},vm2.player,{club:'chicago',no:23});//動態添加多個屬性  
　　　　　　　　　　　　　　　　} 
　　　　　　　　　　　　　　　} 
　　　　　　　　　}) 

　　　　　　</script> 
　　
　　</body> 

</html>

1. vue 學習小結
2. Vue學習小結
3. Vue學習開發小結
4. Vue學習筆記——Vue我的小結
5. vue 學習小結送給新手
6. vue 學習小記
7. 小白學習Vue
8. vue學習小記
9. Vue學習總結
10. vue學習總結
更多相關文章...
• 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
• 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。