vue 知識總結

時間  2019-12-01
標籤 vue 知識 總結 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue study</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/vue.js"></script> 
    <script src="js/vueJson.js">
        //vue的數據信息頗有必要在body的最頂端調用，由於以前是在後邊調用的，可是一些判斷if爲false時就讓他隱藏的邏輯，在還沒加載到js的時候，會先出現那麼幾毫秒，也就是會出現閃一下的結果，因此放到前邊容易解決這個問題
    </script>
</head>
<body>
    <div id="viewBox">
        <h3 class="block">第一個vue實例</h3>
            {{msg}}
        <h2>經常使用指令</h2>
        <div>
            <h3 class="block">v-model雙向數據綁定</h3>
            <div class="info">它能輕鬆實現表單輸入和應用狀態之間的雙向綁定。如今就去改變其中一個input吧。</div><br>
            <input type="text" v-model="model">
            <input type="text" v-model="model">
            <br>
            <div class="info">v-model監聽輸入和下拉，隨時展示——input</div>
            <div>
                <input type="text" v-model="modelTest" placeholder="請輸入...">
                <p>modelTest內的值是：<div class="info info-error">{{modelTest}}</div></p>
            </div>
            <div class="info">下拉select，隨時展示</div>
            <div>
                <select v-model="modelTest2">
                    <option disabled value="">請選擇</option>
                    <option>蘋果</option>
                    <option>香蕉</option>
                    <option>橘子</option>
                </select>
                <p>modelTest內的值是：<div class="info info-error">{{modelTest2}}</div></p>
            </div>
        </div>
        <div>
            <h3 class="block">v-bind:屬性名 在dom元素上綁定屬性</h3>
            <div class="info">只有你想不到，沒有他綁不到，只要你想到的屬性，都用它來綁上去吧！</div>    
            <div v-bind:title = "titleTxt">一、{{titleTxt}}</div>
            <div v-bind:title = "titleTest">二、文檔中的bind案例，將時間對象Date()加載進來，並轉成字符串形式，放到title裏邊了。——{{titleTest}}【看來，數據裏邊的變量，也支持加入原生js，混合成一個新的數據】</div>
            <div v-bind:style="bindStyle">三、我被綁定了style屬性,用字符串的形式把全部的樣式傳進來了</div>
            <div v-bind:style="{color: divColor, fontSize: divFontSize + 'px', 'border-bottom-color': divBC}" style="border-bottom: 3px solid;">四、我綁定style,在標籤內經過大括號綁定於自身，並把數據當作變量傳進來。注意雙引號裏邊的大括號不要丟掉。</div>
            <div v-bind:style="divStyle" style="border-bottom: 2px solid;">五、我綁定了一個json的樣式對象，對象裏邊的數據都是變量、動態的，標籤這裏只用傳入對象名字。也很清爽</div>
            <div class="info info-error">綁定class的應用，就是能夠用來切換class進而切換狀態的，在v-on:mouseover函數那裏應用了，</div>
            <div class="info">能夠字符串拼接、能夠傳入一個對象、能夠和普通的class同時存在</div>
            <br>v-bind:class傳入字符串拼接
            <p class="pDemo" v-for="item in pListId" v-bind:class="'list_'+ item">{{item}}</p>
            v-bind:class傳入對象：
            <p v-bind:class="{boolean: true}">對象</p>
        </div>
        <div>
            <h3 class="block">v-if="variate" 根據條件展現元素的選項</h3>
            <div class="info"> variate = 布爾值對應的變量</div>
            <ul>
                <li v-if="bool">bool是true，你看的到我。我還有個兄弟你看不到</li>
                <li v-if="boolF">boolF是flase，你看的到我</li>
            </ul>
            <div class="info"> v-if 渲染一組代碼</div>
            <template v-if="bool">
                <h5>我是v-if的title</h5>
                <p>我是v-if的body</p>
                <a href="javascript:;">我是v-if的腳註</a>
            </template>
            <h3 class="block-child">v-else-if</h3>
            <p v-if="num === 3">if條件成立</p>
            <p v-else-if="num === 2">else-if條件成立</p>
            <p v-else>if和else-if的條件都不成立，else條件成立</p>
            <h3 class="block-child">v-else</h3>
            <div class="info">v-else 須要配合v-if合做完成.v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的後面——不然它將不會被識別。</div>
            <p v-if="boolF">if條件成立，顯示我了<a href="javascript:;">我是v-if裏邊的a標籤</a></p>
            <p v-else>if條件不成立，顯示else的結果<a href="javascript:;">我是v-else裏邊的a標籤</a></p>
        </div>
        <div>
            <h3 class="block">v-for 循環  數組/Json對象</h3>
            <div class="info">數組中有value表明數值，也有$index作索引值</div>
            <ul>
                <li v-for="value,index in arr" v-bind:key="value">值——"{{value}}"，索引——"{{index}}"</li>
            </ul>
            <h3 class="block">v-for 循環  json</h3>
            <div class="info">json中有value表明數值，也有$index作索引值，還有$key表明鍵名，k、v也能夠表明鍵名的對應值</div>
            <br><div class="info">遍歷一維數組</div>
            <ul>
                <li v-for="item in json" v-bind:key="item">值：{{item}}</li>
            </ul>
            <div class="info">遍歷json【對象】</div>
            <ul>
                <li v-for="(v,k) in json" :key="v">{{k}}—鍵名， {{v}}—value值
                </li>
            </ul>
            <div class="info">遍歷json（對象），獲取索引值</div>
            <ul>
                <li v-for="(name,key,index) in json" :key="name">（值、索引、鍵名）{{name}}--{{index}}--{{key}}</li>
            </ul>
            <div class="info">遍歷二維數組</div>
            <ul>
                <li v-for="item in jsonSec" v-bind:value = "item.value" v-bind:key="item.value">{{item.value}}、{{item.text}}</li>
            </ul>
        </div>
        <div class="info">整數迭代</div>
        <div>
            <span v-for= "n in 10"> {{n}} </span>
        </div>
        <div>
            <h3 class="block">v-on:事件名 = "函數名" 監聽交互，添加監聽器 </h3>
            <div class="info">事件名：click、dblclick、mouseover、mouseout、mousedown、mouseup</div>
            <p v-if="bool" v-on:click="clickFun">點擊我就驚奇了【v-on:命令點擊】</p>
            <p v-if="bool" @click="clickFun()">點擊我就驚奇了【@點擊】</p>
            <p v-if="boolF" v-on:dblclick="dblClickFun">雙擊我就更驚奇了</p>
            <p v-on:mouseover="overFun" v-on:mouseout="outFun" style="display:inline-block;">鼠標通過我啊</p><br>
            <div class="overSpan" :class="className" v-if="boolF2">哈哈我來了</div>
            <div class="overSpan" v-bind:class="className" v-if="boolF2">哈哈我來了</div>
            <button v-on:mousedown="downFun" v-on:mouseup="upFun">點擊看控制檯</button>
        </div>
        <div>
            <h3 class="block">組件化模塊 </h3>
            <div class="info">然實現了批量生產，可是生產的都是同樣的。不能複用</div>
            <ol>
                <todo-item></todo-item>
                <todo-item></todo-item>
                <todo-item></todo-item>
                <todo-item></todo-item>
            </ol>
            <h3 class="block">組件化模塊【傳參】 </h3>
            <div class="info">傳入參數數據，這樣組件就能夠重用了</div>
            <ol>
                <todo-data 
                    v-for="item in groceryList" 
                    v-bind:todo="item" 
                    v-bind:key="item.id">
                    <!-- 在組件化模板中使用v-for的時候，v-bind:key="item.id" 是必須的 -->
                </todo-data>
            </ol>
        </div>
        <div>
            <h3 class="block">v-once 一次性插值</h3>
            <div class="info">一次性插入，這個節點上全部插值再次動態更改數據不會更新</div>
            <p>普通節點上的數據展現：{{msgOnce}}</p>
            <p v-once>一次性屬性所在節點上的：{{msgOnce}}</p>
            <button v-on:click="onceFun">更改msg數據</button>
        </div>
        <div>
            <h3 class="block">v-html 純HTML、v-text 純文本，</h3>
            <div class="info">v-html 輸出真正的html。v-text不翻譯標籤直接輸出</div>
            <p v-html="aHtml"> </p>
            <p v-text="aText"> </p>
        </div>
        <div>
            <h3 class="block">"插值——{ { javascript 表達式 } }"</h3>
            <div class="info info-border">運算符表達式 num + 1</div>
            <p>num+1 = {{num + 1}}</p>
            <div class="info info-border">三元表達式 ok?'YES'':'NO'</div>
            <p>{{bool? "bool如今是：true":"bool如今是：false"}}</p>
            <div class="info info-border">鏈式調用方法表達式 arrReverse.reverse().join("-")</div>
            <p>arr的length:{{arrReverse.length}},arr翻轉：{{arrReverse.reverse().join("-")}}</p>
            <div class="info info-border">字符串拼接 v-bind:id="'list_'+ v"</div>
            <ol>
                <li v-for="(key,index) in idAdd" v-bind:id="'list_'+ index">{{key}}-{{index}}</li>
            </ol>
        </div>
        <div>
            <h3 class="block">v-show 根據條件展現元素的選項</h3>
            <div class="info">同v-if同樣，都是根據條件展現元素的選項。其核心是，切換元素的display，也就是說，無論顯不顯示他都會被渲染到html的dom結構中去，而if不會。if條件若是不成立，則if指令所在的元素將不會被渲染再dom中</div>
            <p v-show="bool">我是v-show成立的</p>
            <p v-show="boolF">我是v-show沒有成立的，可是我依舊存在dom中，你在控制檯、源代碼處還能看到我哦</p>
            <p v-show="false">我是v-show沒有成立的，等號右邊除了傳入變量也能夠傳入boolean值來判斷是否顯示</p>
        </div>
        <div>
            <h3 class="block">數組 變異方法</h3>
            <div class="info">它們也將會觸發視圖更新</div>
            <ol>
                <li v-for="item in arrMethods">{{item}}</li>
            </ol>
        </div>
        <div>
            <h3 class="block">事件修飾符</h3>
            <div class="info">它們用於v-on:事件名以後，用點表示指令。修飾符也能夠一次使用多個，能夠串聯。可是串聯使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。</div>
            <p>v-on:click.stop.prevent = "函數名"</p>
            <ol>
                <li v-for="item in eventMethods">{{item}}</li>
            </ol>
            <div class="info">鍵值修飾符：監聽鍵盤事件時添加關鍵修飾符</div>
            <p>v-on:keyup.13 = "函數名"</p>
            <p>Vue 爲最經常使用的按鍵提供了別名：</p>
            <ol>
                <li v-for="item in keyMethods">{{item}}</li>
            </ol>
            <div style="color: red;">能夠經過全局 config.keyCodes 對象自定義鍵值修飾符別名：
                <p style="font-size: 12px;">Vue.config.keyCodes.f1 = 112</p>
            </div>
        </div>
</body>
</html>
window.onload = function(){
        // 建立一個組件化模板（就是你往裏邊傳數據就行，他自動建立結構
            Vue.component("todo-item",{
                template: "<li>我是組件化模板建立的</li>"
            });
            // 建立另外一個能夠傳數據的組件模板.建立模板用的component就和function同樣是固定寫法，多個也要用這個單詞，不要改變，否則不算一個函數，就好像你寫function和function2的區別同樣。
            Vue.component("todo-data",{
                props: ["todo"],
                template: "<li>{{todo.id}}、{{todo.text}}</li>"
            });
            new Vue({
                el: "#viewBox",
                data: {
                    modelTest: "",
                    modelTest2: "",
                    msg: "hello vue！", //字符串
                    msgOnce: "hello xing.org1",
                    aHtml: "<a href='#'>我但是純正的a標籤哦，若是不是v-html的幫忙，個人標籤就解析不出來了拉！<br/>{{msg}}數據綁定被忽略了</a>",
                    aText: "<a href='#'>我也是純正的a標籤啊！用了v-text，就把個人標籤符號當文本用了嗎？<br/>{{msg}}數據綁定ye被忽略了</a>",
                    model: "vue實現數據的雙向綁定",
                    num: 1, // 數字
                    bool: true, //布爾
                    boolF: false, 
                    boolF2: false, 
                    arr: ["我","是","for","循","環"], // 數組
                    arrReverse: ["h","e","l","l","o"], // 數組
                    idAdd: [1,2,3,4,5], // 數組
                    pListId: [1,2,3], // 數組
                    json: {"a":"1","b":"3"}, // json
                    jsonSec: [
                        {"value":"1","text":"hello"},
                        {"value":"2","text":"vueMan"}
                    ],
                    titleTxt: "我是綁定到標籤title屬性中的內容",
                    titleTest: '頁面加載於 ' + new Date().toLocaleString(), //原生js方法代碼,內置對象,加號連接, 
                    bindStyle: "padding: 10px 0;font-weight: bold;margin-top: 5px;color: #4488ff",  //綁定style
                    className: "",
                    groceryList: [
                        {id: 1, text: "蘋果"},
                        {id: 2, text: "香蕉"},
                        {id: 3, text: "菠蘿"}
                    ],
                    divColor: "blue",
                    divFontSize: 16,
                    divBC: "red",
                    divStyle: {
                        color: 'red',
                        fontSize: '18px',
                        'border-bottom-color': 'blue'
                    },
                    arrMethods: ["push()","pop()","shift()","unshift()","splice()","sort()","reverse()"],
                    eventMethods: [".stop：阻止單擊事件冒泡",".prevent：阻止默認行爲",".capture：使用事件捕獲模式",".self：事件發生在自身時",".once：事件將只會觸發一次"],
                    keyMethods: [".enter：回車鍵",".tab",".delete:刪除或退格",".esc",".space",".up",".down",".left",".right"]
                },
                methods:{
                    clickFun: function(){
                        console.log(this.bool);
                        this.bool = false;
                        this.boolF = true; 
                    },
                    dblClickFun: function(){
                        this.bool = true;
                        // this.boolF = true;
                    },
                    overFun: function(){
                        this.boolF2 = true;
                    },
                    outFun: function(){
                        // this.boolF2 = false;
                        this.className = "outSpan";
                        console.log(this.className)
                    },
                    downFun: function(){
                        console.log("您已按下鼠標");
                    },
                    upFun: function(){
                        console.log("您已收起鼠標");
                    },
                    onceFun: function(){
                        console.log(this.msgOnce)
                        this.msgOnce = "hi, uh, what i should to say? hah,hello xing.org1,are you ok? how old are you? Nice to meet you！"
                    }
                }
            })
        }

vueJson.js
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程