Vue.Js文件的引入：

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Vue學習</title>
    <!-- 可以引入本地文件，也可以用CDN方式 -->
    <script src="~/Scripts/vue.js"></script>
    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生產環境版本，優化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 生產環境版本，優化了尺寸和速度 -->
</head>

Vue基本結構

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="id" /><!--要刪除的id-->
        <input type="text" v-model="keywords" /><!--搜索關鍵字-->

        <p>{{msg1}}</p>
        <p>{{msg2}}</p>

        <table>
            <tr><td>Id</td><td>Name</td></tr>
            <tr v-for="item in Search(keywords)">
                <td v-text="item.id"></td>
                <td v-text="item.name"></td>
            </tr>
        </table>


        <input type="button" value="新增" v-on:click="Add" />

        <!--v-on爲事件指定的方法名稱可以不帶括號，也可以帶括號的-->
        <input type="button" value="編輯" v-on:click="Edit()" />

        <!--這個id就是v-model綁定的id值，也就是data中的id值-->
        <input type="button" value="刪除" v-on:click="Del(id)" />

        <input type="button" value="搜索" v-on:click="Search(keywords)" />


    </div>
    <script>
        //創建Vue實例：當我們導入Vue.js包後，在瀏覽器內存中就有了Vue構造函數
        var vm = new Vue({
            el: "#app", //指我們new出來的這個vm實例要控制的元素（區域）
            data: { //data中存放的是el中需要用到的數據
                id: '',
                keywords: '',

                msg1: "歡迎學習vue",
                msg2: "你好Vue",
               
                list: [{ id: 1, name: '奔馳' },{ id: 2, name: '寶馬' }, { id: 3, name: '奧迪' }]
            },
            methods: { //methods中定義了我們當前new出來的這個vm實例中所有的可用方法
                Add: function () {
                    alert("新增");
                },
                Edit: function () {
                    alert("編輯");
                },
                Del: function (id) {
                    alert(id);
                },
                Search: function (keywords) {
                    //var newList = []; //搜索到的結果結合
                    //this.list.forEach((item, index) => {
                    //    if (item.name.indexOf(keywords) != -1) {
                    //        newList.push(item);
                    //    }
                    //})
                    //return newList;

                    //或者用下面這個種方式[注意：ES6中可以實現數組遍歷的方法有 forEach，some,filter，findIndex]
                    //filter返回的是滿足條件的集合
                    return this.list.filter((item,index) => {
                        if (item.name.includes(keywords)) { //includes()的作用，是查找一個值在不在數組裏，若在，則返回true，反之返回false。 基本用法：['a', 'b', 'c'].includes('a')返回 true
                            return item;
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>

v-cloak指令

當我們使用{{...}}來渲染數據的時候，如果網速比較慢的情況下，數據還沒加載出來，頁面上就會出現{{...}}代碼

例如：

<div id="app">
    <p>{{msg}}</p>
</div>

在網速比較緩慢的情況下頁面會出現 {{msg}} 直到等數據加載成功後，纔會顯示真正的數據。爲了避免這種情況發生，Vue提供了v-cloak指令來解決這個問題。
那麼，v-cloak要放在什麼位置呢，是不是每個需要渲染數據的標籤都要添加這個指令，經過試驗發現，v-cloak並不需要添加到每個標籤，只要在el掛載的標籤上添加就可以

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
    <style type="text/css">
        /*在這裏定義個[v-cloak]樣式*/
        [v-cloak] {
            display: none !important; /*當msg數據加載完畢，vue會自動將display修改爲block*/
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "你好Vue"
            }
        })
    </script>
</body>
</html>

v-text指令

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        @*
        v-text默認是沒有閃爍的問題的。 當msg數據加載完畢，vue會將msg數據插入標識了v-text的標籤元素中；
        例如： <p v-text="msg"></p> 最後被渲染成<p>你好Vue</p>
        注意： v-text是覆蓋插入，即便標籤有初始值，如<p v-text="msg">哈哈</p>，當msg數據加載完畢後，
		   vue會將msg的值插入到<p>標籤的中間，原有的值“哈哈”將會被覆蓋，最後被渲染成<p>你好Vue</p>
        *@
        <p v-text="msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",

            data: {
                msg1: "你好Vue",               
            }
        })
    </script>
</body>
</html>

v-html指令

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        @*
        假設我們的msg數據就是一個標籤，我們想將她以標籤的形式展示出來，而不是以字符串的形式展示，這時候可以使用v-html
        *@
        <p v-text="msg1"></p>

        <p v-html="msg1"></p>
        <p v-html="msg2"></p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg1: "<H1>你好Vue</H1>",
                msg2:"<a href='http://www.baidu.com'>百度</a>"
            }
        })
    </script>
</body>
</html>

v-bind指令 :綁定屬性的指令

v-bind指令只能實現數據的單向綁定，從Model綁定到View

<html>
<head>
    <script src="~/Scripts/vue.js"></script>  
</head>
<body>
    <div id="app" v-cloak>
        <!--v-bind 是vue中用於綁定屬性的指令-->
        <input type="button" v-bind:value="myvalue" v-bind:title="mytitle" />
        <!--因爲mytitle是一個變量，所以它還可以做運算； 例如：這裏指定mytitle這個變量與字符串"123"相加-->
        <input type="button" v-bind:value="myvalue" v-bind:title="mytitle+'123'" />
        <!--v-bind可以簡寫爲英文的冒號 ： 後面跟需要綁定的屬性名稱就可以了 例如：:value -->
        <input type="button" :value="myvalue" :title="mytitle" />

    </div>

    <span id="qq_login_btn" data-role="none"></span>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                myvalue:"我是按鈕",
                mytitle: "我是title"
            }
        })
    </script>
</body>
</html>

v-on指令：用於綁定事件的指令

<html>
<head>
    <script src="~/Scripts/vue.js"></script>  
</head>
<body>
    <div id="app" v-cloak>
        <!--v-on是vue中用於綁定事件的指令-->
        <input type="button" value="按鈕" v-on:click="myClick" />

        <!--注意：在vue官方文檔中v-on的簡寫形式是@符號，但是在MVC視圖中@符號和 Razor引擎衝突，所有需要用@@的形式來簡寫v-on指令-->
        <input type="button" value="按鈕" @@click="myClick" />
    </div>
    <span id="qq_login_btn" data-role="none"></span>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {     
                name: "張三",
                age:25
            },
            methods: {
                myClick: function () {

                    //注意：在vue實例vm中，如果想要獲取data中的數據，或者想要調用methods中的方法，
                    //必須通過this.屬性名或this.方法名來進行訪問；這裏的this就表示我們new出來的vm對象實例

                    alert(this.name); 
                }
            }
        })
    </script>
</body>
</html>

v-on指令的stop事件修飾符：阻止冒泡

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
    <style>
        .box {
            border: 1px solid red;
            width: 80px;
            height: 50px;
            background-color: bisque;
            line-height: 50px;
            text-align: center;
            margin-bottom:40px;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <label>這是沒有阻止button被點擊後的所觸發的事件冒泡</label>
        <div class="box" @@click="divClick">
            <!--在click事件後面加一個.stop就可以阻止事件冒泡-->
            <input type="button" value="按鈕" @@click="btnClick" />
        </div>

        <label>這是阻止了button被點擊後的所觸發的事件冒泡</label>
        <div class="box" @@click="divClick">
            <!--在click事件後面加一個.stop就可以阻止事件冒泡-->
            <input type="button" value="按鈕" @@click.stop="btnClick" />
        </div>
    </div>
    <span id="qq_login_btn" data-role="none"></span>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                userName: "Hello",
            },
            methods: {
                btnClick: function () {
                    alert("點擊了button按鈕");
                },
                divClick: function () {
                    alert("點擊了div");
                }
            }
        })
    </script>
</body>
</html>

v-on指令的 prevent事件修飾符：阻止默認事件

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <!--a標籤有一種默認的行爲，就是點擊它後會跳轉到指定的網頁-->
        <!--假如就像點擊這個a標籤，觸發我指定的事件，而不是去執行這個a標籤的默認行爲（跳轉）怎麼辦呢？-->
        <!--vue中，只要在事件名稱的後面.prevent就可以阻止事件的默認行爲了-->
        <a href="http://www.baidu.com" v-on:click.prevent="aClick">去百度</a>
    </div>   
    <script>
        var vm = new Vue({
            el: "#app",
            data: {               
            },
            methods: {
                aClick: function () {
                    alert("點擊了a標籤");
                }
            }
        })
    </script>
</body>
</html>

v-on指令的once事件修飾符：事件只觸發一次

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <!--a標籤有一種默認的行爲，就是點擊它後會跳轉到指定的網頁-->
        <!--假如就像點擊這個a標籤，觸發我指定的事件，而不是去執行這個a標籤的默認行爲（跳轉）怎麼辦呢？-->
        <!--vue中，只要在事件名稱的後面.prevent就可以阻止事件的默認行爲了-->
        <!--事件修飾符還可以連寫， 比如v-on:click.prevent.once 就表示阻止默認事件，同時事件只觸發一次-->
        <!--v-on:click.prevent.once 與v-on:click.once.prevent效果是一樣的-->
        <a href="http://www.baidu.com" v-on:click.prevent.once="aClick">去百度</a>

        <input type="button" value="只觸發一次事件的按鈕" v-on:click.once="aClick" />
    </div>   
    <script>
        var vm = new Vue({
            el: "#app",
            data: {               
            },
            methods: {
                aClick: function () {
                    alert("點擊了");
                }
            }
        })
    </script>
</body>
</html>

v-on指令的 capture事件修飾符

.capture事件修飾符的作用添加事件偵聽器時使用事件捕獲模式
即是給元素添加一個監聽器，當元素髮生冒泡時，先觸發帶有該修飾符的元素。若有多個該修飾符，則由外而內觸發。
就是誰有該事件修飾符，就先觸發誰。
代碼如下：

<body>
    <div id="app" v-cloak>
        <!--在click事件後面加一個.capture就可以添加事件偵聽器時使用事件捕獲模式-->
        <div class="box" @@click.capture="divClick">
            <input type="button" value="按鈕" @@click="btnClick" />
        </div>
    </div>
    <span id="qq_login_btn" data-role="none"></span>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {               
            },
            methods: {
                btnClick: function () {
                    alert("點擊了button按鈕");
                },
                divClick: function () {
                    alert("點擊了div");
                }
            }
        })
    </script>
</body>

我們可以看到當我們點擊了按鈕,最先觸發的是點擊了div,然後才觸發了點擊了button按鈕，這就是上面所說的則由外而內觸發

v-model指令：實現數據的雙向綁定

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>

        <p v-text="userName"></p>

        <!--v-model能實現表單元素和Model中數據的雙向綁定-->
        <!--注意：v-model只能運用在表單元素中，如：input(radio,checkbox,text,address,email....) select,textarea 等等-->
        <input v-model="userName" />       
    </div>
    <span id="qq_login_btn" data-role="none"></span>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                userName: "Hello",
            }          
        })
    </script>
</body>
</html>

Vue中通過屬性綁定爲元素設置class樣式

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
    <style>
        .a {
            color: red; /*紅色*/
        }

        .b {
            font-size: x-large; /*大*/
        }

        .c {
            font-style: italic /*斜體*/
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!--平常我們普通的設置樣式加-->
        <div class="a b c">1:猥瑣發育，別浪</div>

        <!--採用v-bind設置樣式： 數組加載樣式-->
        <div v-bind:class="['a','b','c']">2:猥瑣發育，別浪</div>

        <!--採用v-bind設置樣式： 數組加載樣式，並在數組中做三元表達式條件來設置樣式-->
        <div v-bind:class="['a','b', isShow?'c':'']">3:猥瑣發育，別浪</div>

        <!--採用v-bind設置樣式： 數組中嵌套使用：只有在isShow的值爲true的時候，纔會顯示c樣式-->
        <div v-bind:class="['a','b',{'c':isShow}]">4:猥瑣發育，別浪</div>

        <!--採用v-bind設置樣式： 直接使用對象(a，b，c這些類名可以不用單引號引起來，也可以用單引號引起來)-->
        <div v-bind:class="{a:true,b:true,'c':true}">5:猥瑣發育，別浪</div>

        <!--採用v-bind設置樣式： 直接使用對象，這個對象也可以放到Data中-->
        <div v-bind:class="divClass">6:猥瑣發育，別浪</div>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: true,
                divClass: { a: true, b: true, 'c': true }
            },
        })
    </script>
</body>
</html>

Vue通過屬性綁定爲元素設置style行內樣式

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <!--第一種：直接寫在元素上； 注意：如果對象的鍵中間有-線 則不能省略單引號，鍵的值也需用用單引號引起來-->
        <div v-bind:style="{color:'red', 'font-size':'50px'}">猥瑣發育，別浪</div>

        <!--第二種：寫在Data中； 注意：如果對象的鍵中間有-線 則不能省略單引號，鍵的值也需用用單引號引起來-->
        <div v-bind:style="divClass1">猥瑣發育，別浪</div>

        <!--第三種：寫在Data中； 假設Data中設定了2種樣式，在這個元素上我都上使用，可以使用[]的形式-->
        <!--注意：數組中的樣式變量不要加單引號-->
        <div v-bind:style="[divClass1,divClass2]">猥瑣發育，別浪</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: true,
                divClass1: { color: 'red' },
                divClass2: {'font-size':"50px"}
            }
        })
    </script>
</body>
</html>

v-if指令

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>   
    <div id="app">
        <!--v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之後-->

        <!--例子1-->
        <p v-if="isOk">
            已經確認
        </p>
        <p v-else>
            未確認
        </p>

        <!--例子2-->
        <p v-if="myNumber==1">
            我是1
        </p>
        <p v-else-if="myNumber==2">
            我是2
        </p>
        <p v-else>
            我不是1，也不是2
        </p>

        <!--例子3 樣式切換-->
        <p  v-if="isShowStyle"></p>
    </div>
    <script>
       
        var vm = new Vue({
            el: "#app",
            data: {
                isOk: false,
                myNumber: 3,               
            }
        });
    </script>
</body>
</html>

v-for指令：遍歷

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--循環普通數組：1個參數的for-->
        <p v-for="item in list">{{item}}</p>
        <!--循環普通數組：2個參數的for-->
        <p v-for="(item,index) in list">索引:{{index}}--值：{{item}}</p>


        <!--循環複雜數組：1個參數的for-->
        <p v-for="item in list2">{{item.name}}</p>
        <!--循環複雜數組：2個參數的for-->
        <p v-for="(item,index) in list2">索引:{{index}}--id值:{{item.id}} --name值:{{item.name}}</p>


        <!--循環對象：第一個參數是必選的，第二個，第三個是可以選的-->
        <p v-for="(val,key,index) in user">索引：{{index}}--ket值爲{{key}}--val值爲:{{val}}</p>

        <!--遍歷數字：這裏輸出1,2,3,4,5,6,7,8,9,10-->
        <!--注意，遍歷數字是從1開始的，而不是0哦-->
        <p v-for="item in 10">{{item}}</p>


    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [1, 2, 3, 4, 5, 6],
                list2: [
                    { id: 1, name: '張三' },
                    { id: 2, name: '李四' },
                    { id: 3, name: '王五' },
                    { id: 4, name: '趙六' }
                ],
                user: { id: 1, name: "lily", age: 25, address: "北京朝陽三里屯", email: '[email protected]' },
            }
        })
    </script>
</body>
</html>

v-for中key的使用注意事項

當在vue.js中用v-for正在更新已渲染過的元素列表時，它默認用“就地複用”策略，如果數據項的順序被改變vue將不是移動DOM元素來匹配數據項的順序，而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。
爲了給vue一個提示，以便它能夠跟蹤每個節點的身份，從而重用新排序現有的元素，你需要爲每項提供唯一的key屬性

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--v-for中key的使用注意事項-->
        <!--
    當在vue.js中用v-for正在更新已渲染過的元素列表時，它默認用“就地複用”策略，如果數據項
    的順序被改變vue將不是移動DOM元素來匹配數據項的順序，而是簡單複用此處每個元素，並且確保
    它在特定索引下顯示已被渲染過的每個元素。

    爲了給vue一個提示，以便它能夠跟蹤每個節點的身份，從而重用新排序現有的元素，你需要爲每項
    提供唯一的key屬性
    -->
        <label>
            id
            <input type="text" v-model="id" />
        </label>
        <label>
            name
            <input type="text" v-model="name" />
        </label>

        <input type="button" value="添加" v-on:click="add" />
        <!--爲了解決下面描述的問題。你需要爲每項提供唯一的key屬性，其實就是在v-for後面加一個 v-bind:key 
            讓這個key綁定遍歷項的id，當然也可以綁定其他的值，比如name，只要值唯一就行了，因爲id一般是唯一的，所以我們綁定的是item.id-->
        <p v-for="(item) in list" v-bind:key="item.id">
            <input type="checkbox" value="{{item.id}}" />
            {{item.id}}--{{item.name}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id: '',
                name: '',
                list: [
                    { "id": 1, name: "嬴政" },
                    { "id": 2, name: "李斯" },
                    { "id": 3, name: "韓非" },
                    { "id": 4, name: "荀子" }
                ]
            },
            methods: {
                add: function () {
                    //this.list.push({ "id": this.id, "name": this.name }) //往後面追加沒問題

                    //假設從開始追加數據：我們開始勾選住荀子，然後開始追加一項
                    //假設我們追加一個 id=5,name="趙高"的項。這時候我們會發現，之前勾選的荀子，變成了韓非了
                    //這是因爲vue 只知道你勾選了索引爲3的那一項（索引從0開始），當你從開始位置新增一個元素，
                    //那麼你之前勾選的索引爲3的那一項，現在索引位置已經變成4了。而前面的韓非變成了索引爲3了
                    //所以纔出現之前勾選的荀子，現在變成了韓非了

                    //爲了解決這個問題。你需要爲每項提供唯一的key屬性,其目的就是讓索引與綁定的值關聯起來。
                    this.list.unshift({ "id": this.id, "name": this.name }) 
                }
            }           
        })
    </script>
</body>
</html>

沒有加v-bind:key="item.id"的效果

添加了v-bind:key="item.id"的效果

在v-for配合v-if使用

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>   
    <div id="app">
        <!--遍歷list數組，如果list中的索引項小於或等於3則輸出-->
        <p v-for="(item,index) in list" v-if="index<=3">{{ item }}</p>
    </div>
    <script>
       
        var vm = new Vue({
            el: "#app",
            data: {
                list: [1, 2, 3, 4, 5, 6]
            },
        });
    </script>
</body>
</html>

Vue基礎：第一天

Vue.Js文件的引入：

Vue基本結構

v-cloak指令

v-text指令

v-html指令

v-bind指令 :綁定屬性的指令

v-on指令：用於綁定事件的指令

v-on指令的stop事件修飾符：阻止冒泡

v-on指令的 prevent事件修飾符：阻止默認事件

v-on指令的once事件修飾符：事件只觸發一次

v-on指令的 capture事件修飾符

v-model指令：實現數據的雙向綁定

Vue中通過屬性綁定爲元素設置class樣式

Vue通過屬性綁定爲元素設置style行內樣式

v-if指令

v-for指令：遍歷

v-for中key的使用注意事項

在v-for配合v-if使用

windows安裝Mysql

string類型擴展

Windows10下安裝Redis

NetCore3.0使用HttpClient

.NET CORE基礎

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Vue基礎：第一天

Vue.Js文件的引入：

Vue基本結構

v-cloak指令

v-text指令

v-html指令

v-bind指令 :綁定屬性的指令

v-on指令：用於綁定事件的指令

v-on指令的stop事件修飾符：阻止冒泡

v-on指令的 prevent事件修飾符：阻止默認事件

v-on指令的once事件修飾符：事件只觸發一次

v-on指令的 capture事件修飾符

v-model指令 ：實現數據的雙向綁定

Vue中通過屬性綁定爲元素設置class樣式

Vue通過屬性綁定爲元素設置style行內樣式

v-if指令

v-for指令：遍歷

v-for中key的使用注意事項

在v-for配合v-if使用

v-model指令：實現數據的雙向綁定