Vue.js 是什麼

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。
與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。
Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。
另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。

Vue準備

瞭解關於 HTML、CSS 和 JavaScript 的中級知識。
如果你剛開始學習前端開發，將框架作爲你的第一步可能不是最好的。

Vue中文官網教程：https://cn.vuejs.org/v2/guide/

**Vue下載：**https://github.com/vuejs/vue

Idea中使用Vue

需要安裝Vue插件：

下載完成後：

項目結構：

入門及插值表達式

前端頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>


<div id="app">
    <!--v-cloak：解決插值表達式閃爍問題-->
    <p v-cloak>{{msg}}</p>
    <!--v-text等價於插值表示，沒有閃爍問題-->
    <p v-text="msg2"/>
    <p v-text="msg3"/>
    <!--插入一個標籤元素，需要使用v-html-->
    <p v-html="msg3"></p>
</div>


<!--
引入Vue.JS
script必須成對出現，不能自閉合
MVC ： M   V   C
-->
<script src="../lib/vue.js"></script>
<script>

    //使用Vue，需要一個Vue的對象
    var vm = new Vue({
        //綁定元素el
        el:"#app",
        //傳遞數據
        data:{
            /*
            Controller
            @ResponseBody  , JSON
            前後端分離 ：
            前端專注於前端及僞造數據，留下接口
            後端專注數據交互，產生真實數據，數據庫中的數據，提供請求路徑
            */
            msg:"Hello,vue", //請求  ${content}/hello
            msg2:"hello2",
            msg3:"<h1>hello</h1>"
        }
    })
</script>
</body>
</html>

輸出結果;

綁定數據

<!DOCTYPE html>
<html lang="en"
      xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    <p>
        <!--綁定HTML元素屬性的值，
        需要使用 v-bind: + 屬性名 = "vue中數據的key"
        -->
        用戶名 ： <input type="text" name="username" v-bind:value="msg">
    </p>

    <p>
        <!--v-bind: 簡化就是  :-->
        用戶名 ： <input type="text" name="username" :value="msg">
    </p>

    <p>
        <!-- 只要表達式合法，就能執行
        變量 + 變量
        變量 + 字符串常量
        變量 + 字符串 + 變量
        -->
        用戶名 ： <input type="text" name="username" :value="msg+'你好'"> <br>
        用戶名 ： <input type="text" name="username" :value="msg+'+'+msg">
    </p>

    <!--
    方法調用,綁定方法： v-on:
    click 和 onclick

    1、onclick是綁定事件，告訴瀏覽器在鼠標點擊時候要做什麼。
    2、click本身是方法作用是觸發onclick事件，只要執行了元素的click()方法，就會觸發onclick事件
    3、click可以理解爲一次簡單的觸發，只執行一次，找不到以後就不再執行；
    4、onclick則是給這個id註冊一種行爲，可以重複觸發
    5、click 是方法；onclick是事件；執行click就是模擬鼠標點擊，同時會觸發onclick事件。
    -->
    <p><button v-on:click="hello()">點擊</button></p>

    <!--v-on: 可以簡化爲一個 @-->
    <p><button @click="hello()">點擊</button></p>


    <p><input type="text" value="Hello" :style="style" ></p>

    <!--注意點:
    1. v-bind 用來綁定元素屬性的數據,可以是任意屬性，只要數據合法；簡寫爲 ：
    2. v-on 給元素事件[包括但不限於，點擊，鍵盤按下，鼠標移動，窗口縮放]綁定方法，只要方法沒有錯，簡寫@
    -->


</div>


<script src="../lib/vue.js"></script>
<script>

    function f() {
        alert("hello")
    }

    var vm = new Vue({
        //綁定元素el
        el:"#app",
        //數據：
        data:{
            msg:"hello,Vue2",
            style:"border-radius: 20px"
        },
        //方法
        methods:{
            hello:function () {
                alert("方法被調用了！")
            }
        }
    })
</script>




</body>
</html>

結果輸出：

跑馬燈效果實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    <button @click="toStart()">啓動</button>
    <button @click="toStop()">停止</button>
    <h6 v-html="msg" :style="style"></h6>
    <input type="text" :value="msg"/>

</div>




<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"希望你們每次來上網，都是因爲喜歡，而不是無聊！就像結婚，是因爲愛情，而不是因爲湊合。",
            //注意點 ： 賦值，在這裏不能使用=號 ，要使用冒號
            lightIntervalID:null,
            style:"color: red;font-weight: bold;background-color:black"
        },
        methods:{
            toStart(){
                /*
                vue對象中data、methods裏面聲明的內容全部都會成爲vm的直接屬性、方法
                所有這些內容應該直接使用this訪問，而不是【this.data.xxx、this.methods.xxx()】
                */
                console.log("Haaa");
                //如果不爲null，直接返回（表示此時定時器已經啓動，不可重複啓動）
                if (this.lightIntervalID!=null) {
                    return;
                }
                var _this = this; //別名
                this.lightIntervalID = setInterval(function () {
                    //字符走動，跑馬燈效果
                    _this.msg = _this.msg.substring(1).concat(_this.msg.charAt(0))
                    /*
                    希望你們每次來上網，都是因爲喜歡，而不是無聊！就像結婚，是因爲愛情，而不是因爲湊合。
                    望你們每次來上網，都是因爲喜歡，而不是無聊！就像結婚，是因爲愛情，而不是因爲湊合。希
                    你們每次來上網，都是因爲喜歡，而不是無聊！就像結婚，是因爲愛情，而不是因爲湊合。希望
                    們每次來上網，都是因爲喜歡，而不是無聊！就像結婚，是因爲愛情，而不是因爲湊合。希望你
                    */
                },200);
            },
            toStop(){
                clearInterval(this.lightIntervalID);
                this.lightIntervalID=null;
            }
        }
    })


</script>


</body>
</html>

輸出結果

雙向綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <p>
        <!--value是不會變化，但是我們需要的是可以進行調整的
        數據和視圖層可以雙向綁定的東西。v-model-->
        單價 ：<input type="text" v-model="price">
        數量 ：<input type="text" v-model="num">
        <button @click="calc()">計算</button>
        總價 ：<span v-text="sum"></span>
    </p>

</div>


<script src="../lib/vue.js"></script>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            price:3,
            num:0,
            sum:0
        },
        methods:{
            calc(){
                this.sum = this.price * this.num
            }
        }
    })
</script>
</body>
</html>

結果輸出：

計算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

        num1： <input type="text" v-model="num1">
        <select v-model="opr">
            <option value="+" selected disabled >+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        num2： <input type="text" v-model="num2">
        <button @click="calc()">=</button>
        <span v-text="sum"></span>

</div>


<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            num1:0,
            num2:1,
            sum:0,
            opr:'+'
        },
        methods:{
            calc(){
                //判斷標識
                var flag = this.opr;
                switch (flag){
                    case '+':
                        //這裏取得的值爲字符串，我們需要轉換爲int類型
                        this.sum = parseInt(this.num1) + parseInt(this.num2);
                        console.log(this.sum);
                        break;
                    case '-':
                        //這裏取得的值爲字符串，我們需要轉換爲int類型
                        this.sum = parseInt(this.num1) - parseInt(this.num2);
                        console.log(this.sum);
                        break;
                    case '*':
                        //這裏取得的值爲字符串，我們需要轉換爲int類型
                        this.sum = parseInt(this.num1) * parseInt(this.num2);
                        console.log(this.sum);
                        break;
                    case '/':
                        //這裏取得的值爲字符串，我們需要轉換爲int類型
                        this.sum = parseInt(this.num1) / parseInt(this.num2);
                        console.log(this.sum);
                        break;
                }

            }
        }
    })
</script>
</body>
</html>

結果輸出：

for循環

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <!--v-for：遍歷普通數組： val in arrays ， 這個var就是取出來的值  -->
    <p v-for="name in names">{{name}}</p>
    <!--數組下標從0開始，index是默認的屬性-->
    <p v-for="name,index in names" v-text="name+'---'+index"/>
    <hr>
    <!--遍歷對象數組-->
    <p v-for="student in students">{{student.id}}--{{student.name}}--{{student.age}}
    </p>
    <hr>
    <!--遍歷普通對象的鍵和值-->
    <p v-for="value,key in kuangshen">{{key}}---{{value}}</p>
    <!--for循環固定的次數,遍歷的值名不能爲var-->
    <p v-for="num in 12">{{num}}</p>
    <!--
    v-for ： 用於循環，可以循環 數組，打印對象的值，循環固定次數；
    value in arrays
    -->
</div>


<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            names:["張三","李四","王五","趙六","田七"],
            students:[
                {id:1,name:"喜洋洋",age:1},
                {id:2,name:"懶洋洋",age:2},
                {id:3,name:"灰太狼",age:3}
            ],
            kuangshen:{id:1,name:"秦疆",age:3,hobby:"code"}
        }
    })
</script>
</body>
</html>

結果輸出：

for循環應用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    id: <input type="text" v-model="id">
    name: <input type="text" v-model="name">
    age: <input type="text" v-model="age">
    <button @click="add()">添加信息</button>
    <!--顯示所有用戶的信息--><hr>
    <p v-for="student in students" :key="student.id">
        <input type="checkbox">
        {{student.id}}--{{student.name}}--{{student.age}}
    </p>

</div>


<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            id:1,
            name:"張三",
            age:2,
            students:[
                {id:1,name:"喜洋洋",age:1},
                {id:2,name:"懶洋洋",age:2},
                {id:3,name:"灰太狼",age:3}
            ]
        },
        methods:{
            add(){
                //添加一個人員信息
                this.students.unshift({id:this.id,name:this.name,age:this.age});
            }
        }
    })
</script>
</body>
</html>

v-if&v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <button @click="change()">顯示</button>
    <!--如果只有一行代碼的情況下，可以直接寫在事件中
    一行代碼不用寫this ， 因爲this在我們的函數中，指代本身，但是這裏不需要，我們直接操作屬性即可；
    -->
    <button @click="flag=false">隱藏</button>
    <button @click="flag=!flag">切換</button>
    <!--v-if爲true，則顯示-->
    <p v-if="flag">希望你們每次來上網，都是因爲喜歡，而不是無聊！就像結婚，是因爲愛情，而不是因爲湊合。</p>

    <!--v-show爲true，則顯示-->
    <p v-show="flag">希望你們每次來上網，都是因爲無聊，而不是喜歡！就像結婚，是因爲湊合，而不是因爲愛情。</p>

    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <p>撒嬌的驕傲看來是加大了快速解答了空間都卡了時間到了</p>
    <a href="#">點擊鏈接</a>
</div>



<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            change(){
                this.flag=true;
            }
        }
    })
</script>
</body>
</html>

結果輸出：

過濾器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app1">
    {{msg|ri()}}
</div>

<div id="app2">
    {{msg|ri()}}
</div>
<script src="../lib/vue.js"></script>
<script>



<!--導入Vue-->

    //全局過濾器，不要出現日
    Vue.filter("ri",function(a){
        return a.replace('日',"*")
    });


    var vm1 = new Vue({
        el:"#app1",
        data:{
            msg:"我愛你，日"
        },
        filters:{
            ri:function(a){
                return a.replace('日',"#")
            }
        }
    });

    var vm2 = new Vue({
        el:"#app2",
        data:{
            msg:"向日葵"
        },
        filters:{
            ri(a){
                return a.replace('日',"!")
            }
        }
    });

</script>
</body>
</html>

結果輸出：

自定義指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <input type="text" v-kuang="'red'" value="西部開源"/>
</div>

<script src="../lib/vue.js"></script>
<script>

    //自定義指令 v-*    v-kuang
    Vue.directive("kuang",{
        bind:function (el,binding) {
            //el,指代指令作用的元素
            //binding.value 就是你自定義指令後面的具體指 ， v-kuang=""
            el.style.color = binding.value;
        }
    });


    //09: 使用BootStrap操作列表

    //Vue對象
    var vm = new Vue({
        el:"#app",
        directives:{}
    })


</script>

</body>
</html>

結果輸出：

過濾器筆記

什麼是過濾器？

可以用來過濾一個網頁上的資源，比如將網頁上的所有的，都改爲 - ，實現一個過濾效果

如何自定義一個過濾器

全局過濾器（作用域：全局）需要再vm對象創建之前創建，使用Vue.filter(“name”,function())來創建

    Vue.filter(name,function (data,old,newWord) {
       
    });

局部過濾器（作用域，僅在這個對象中有效）需要再vm對象裏面創建，加上一個filter屬性,裏面添加不同的過濾器，格式

filters:{
     name:function f() {
       
     },
     name2:function f() {
       
     }
 }

如何調用過濾器

在插值表達式或者v-bind下使用 {{data|過濾器的名字（arg1,arg2,arg3…）}}

就近原則

如果局部過濾器和全局過濾器名字相同，優先調用進的；局部過濾器

Vue介紹及使用

Vue.js 是什麼

Vue準備

Idea中使用Vue

需要安裝Vue插件：

入門及插值表達式

綁定數據

跑馬燈效果實現

雙向綁定

計算器

for循環

for循環應用

v-if&v-show

過濾器

自定義指令

過濾器筆記

[轉帖]cpupower

今天，昨天，近七天，近30天，近90天，js封裝

筆試題--斐波那契數列

筆試題-找到最長連續不重複子串

筆試題-最佳找零錢方案

面試題-生成10個1至20不重複的隨機數

面試題--模擬鬥地主洗牌發牌看牌

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

linux以太網驅動總結