Vue 基礎、常用指令、過濾器、數據監聽、事件監聽

 

vue是國人開發js框架，國內使用廣泛。以數據驅動、組件化開發爲核心。
 

vue基礎

#下載最新穩定版的vue，install可簡寫爲i
npm install vue 

#可以指定版本
npm install [email protected]

 

<!-- 留坑 -->
<div id="app"></div>
<div class="red"></div>
<div></div>

<!-- 引入vue.js，放在使用vue編寫代碼之前。上線換爲min版 -->
<script src="js/vue.js"></script>

<script>
    new Vue({  //參數是對象
        el: "#app", //通過id來指定元素
        // el: ".red",  //通過class來指定
        // el: "div",  //通過標籤名來指定

        template: "<p>姓名：{{name}}，年齡：{{age}}</p>", //{{ }}可以引用變量、函數
        data: function () {
            return {
                //返回對象
                name: "chy",
                age: 20,
            }
        },
    });
</script>

不管通過id、class、標籤名中的哪種來指定，一個Vue對象都只作用於一個元素，Vue對象中的東西都只對該元素有效。

如果匹配到多個元素，只使用第一個匹配的元素。

如果多個Vue對象操作同一個元素，位置靠前的Vue對象優先級更高。

 

template

• template會替換整個元素，並不是作爲innerHTML
• template中要有一個根元素
• 可以用反引號代替引號定界，尤其是模板中有引號時，使用反引號定界更方便

template: `<p>姓名：{{name}}，年齡：{{age}}</p>`,

• 模板可以寫在Vue對象的template中，也可以直接作爲元素，能解析其中的變量

<p id="#app">姓名：{{name}}，年齡：{{age}}</p>

 

data實質是一個返回對象的函數，有2種寫法

data:function(){  //指向匿名函數
    return {
        
    }  
}


data(){  //直接作爲函數名
    return {
        
    } 
}

 

常用指令

指令是元素屬性的形式，可以直接寫在元素中，也可以寫在template中
 

1、v-text、v-html 把變量值作爲innerText、innerHTML

<p id="#app" v-text="name"></p>  <!-- name是變量 -->
<p id="#app" v-html="name"></p>

<!-- 相當於 -->
<p id="#app">{{name}}</p>

v-text不解析變量值中的html標籤，直接作爲普通字符串處理；v-html會解析變量值中的html標籤

 

2、v-show 控制元素的顯示、隱藏

<p id="app" v-show="isDisplay">xxx</p>

爲true時顯示，爲false時隱藏（不再佔據空間）。

可以直接寫boolean值，但一般都是綁定變量，變量值爲true時顯示，爲false時隱藏。

 

3、v-if 條件判斷

<div id="app">
    <p v-if="score<60">不及格</p>
    <p v-else-if="score<80">一般</p>
    <p v-else-if="score<=100">優秀</p>
    <p v-else>數據不合法</p>
</div> 

條件爲true時才顯示對應的元素

 

4、v-for 遍歷數組、對象

<div id="app">
    <!-- 遍歷數組 -->
    <ul>
        <li v-for="(item,index) in arr">第{{index}}項：{{item}}</li>
    </ul>

    <!-- 遍歷對象 -->
    <ul>
        <li v-for="(value,key) in user">{{key}}：{{value}}</li>
    </ul>

    <!-- (item,index)、(value,key)4個都是臨時變量，名稱任意，但順序是固定的，必須是值在前面，index|key在後面 -->
</div>

<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                arr: ["手機", "平板", "電腦"], //數組
                user: { name: "chy", age: 20 }, //對象
            }
        },
    });
</script>

 

5、v-bind、v-model 數據綁定

將屬性值與變量綁定

<!-- v-bind:屬性名="變量名"，會自動用變量值替換變量名 -->
<input id="app" v-bind:value="name" /> 

<!-- 如果多個屬性都要綁定，冒號分隔即可，冒號前面不用加空格 -->
<a id="app" v-bind:href="url" :class="className">xxx</a>

<!-- 如果只綁定value屬性，可以缺省屬性名，直接寫成= -->
<input id="app" v-bind="name" /> 

<!-- v-model的用法和v-bind相同 -->

v-bind是單向數據綁定，內存（變量）-> 視圖，內存數據的變化會影響到視圖，視圖數據的變化不會影響內存。

v-model是雙向綁定，內存（變量） <-> 視圖，會相互影響。

 

6、v-on 事件綁定

<div id="app">
    <!-- v-on:事件="處理"，只用使用Vue對象中自定義的變量、方法，不能直接使用alert()、console.log()等方法 -->

    <!-- 使用變量 -->
    <button v-on:click="count++">count</button>

    <!-- 使用方法，方法名帶不帶()都行 -->
    <button v-on:click="tip1">tip1</button>

    <!-- 使用帶參方法，傳入實參。如果要使用變量，方法中直接用就是了，不用作爲參數 -->
    <button v-on:mouseover="tip2('hello')">tip2</button>

    <!-- 如果要綁定多個事件，要使用多個v-on，不能像數據綁定一樣冒號隔開 -->
    <button v-on:click="tip1" v-on:mouseover="tip2('hello')">tip1+tip2</button>
</div>

<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                count: 1,
            };
        },
        methods: {
            tip1() {
                //函數可以寫成 函數名(){ }，也可以指向匿名函數 函數名:function(){  }
                alert(this.count); //如果要使用變量，直接用就是了，不用作爲參數。this表示當前Vue對象
            },
            tip2(msg) {
                alert(msg);
            },
        },
    });
</script>

在方法中引用變量時，要通過this來引用

 

過濾器

{{var | 過濾器名}}，會先使用過濾器處理var，再使用處理後的值。

按作用域劃分，可分爲2種：組件內過濾器、全局過濾器
 

組件內過濾器 只能在對應組件中使用

<div id="app">
    <input v-model="content" /> <br />
    <p>原來的字符串：{{content}}</p>  <!--不使用過濾器-->
    <p>字符串反序：{{content | reversal}}</p>  <!-- 使用過濾器reversal -->
</div>

<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                content: "",  //最初變量爲null，split()會報錯，需要設置初始值
            };
        },
        filters: {
            //組件內過濾器
            reversal(val) {
                //過濾器名(參數表)，會自動把|前面的變量作爲實參傳入
                return val.split("").reverse().join(""); //字符串切分爲字符數組，數組反序，數組連接爲一個字符串
            },
            //可定義多個過濾器，逗號分隔即可
        },
    });
</script>

 

全局過濾器 全局可用

<div id="app">
    <input v-model="content" /> <br />
    <p>原來的字符串：{{content}}</p>
    <p>字符串反轉：{{content | reversal}}</p>
</div>

<script>
    //全局過濾器，參數：過濾器名、處理函數
    Vue.filter("reversal", function (val) {
        return val.split("").reverse().join(""); 
    });

    new Vue({
        el: "#app",
        data: function () {
            return {
                content: "",
            }
        },
    });
</script>

 

數據監聽

監聽變量值的變化，當值變化時做一些處理。

eg. 選擇省市，雙向綁定，當選擇的省份變化時，列出的下轄地區要變成相應的
 

watch 監聽單個變量值的變化

<input id="app" type="text" name="" v-model="content" />  <!--雙向綁定-->

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                content: "", //需要給變量賦初值
            }
        },
        watch: {  //watch中只能監聽一個變量
            content(newVal, oldVal) {   //要監聽的變量(新值,舊值) ，參數名任意，但順序只能是新值、舊值
                console.log(newVal, oldVal);
                if (newVal == "love") {
                    alert("the content is love");
                }
            },
        },
    });
</script>

 

watch的深度監聽
如果監聽的是複雜類型（數組、對象）變量，需要使用深度監聽纔有效，深度監聽會逐級往下監聽對象的屬性、數組的元素

<div id="app">
    姓名：<input type="text" name="" v-model="user.name" /><br />
    <!-- 雙向綁定到user對象的屬性 -->
    年齡：<input type="text" name="" v-model="user.age" /><br />
</div>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                user: {
                    name: "", //初始化
                    age: "", 
                },
            }
        },
        watch: {
            user: {  //要監聽的複雜類型變量
            	deep: true, //開啓深度監聽
                handler(newVal) { //處理函數只能是handler。深度監聽只記錄新值、不記錄舊值
                    console.log(newVal); 
                    if (newVal.name == "chy" && newVal.age == 20) {
                        alert("the name is chy and the age is 20");
                    }
                },
            }
        },
    });
</script>

 

computed 同時監聽多個變量值的變化

<div id="app">
    加數：<input type="text" name="" v-model="n1" /><br />
    另一個加數：<input type="text" name="" v-model="n2" /><br />
    和：<span>{{sum}}</span>  <!-- 只能用{{}}，不能用v-model。v-model只能綁定變量，{{}}可以引用變量、函數 -->
</div>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                n1: "",
                n2: "", 
            };
        },
        computed: {  //數據監聽
            sum() {  //函數。此處監聽了n1、n2兩個變量，只要有1個變量變化，就會觸發函數
                return Number(this.n1) + Number(this.n2);  //Number(String)可以將字符串轉換爲數值型
            },
        },
    });
</script>

 

事件監聽

<div id="app">
    <button @click="fn1">btn1</button>  <!-- 不帶參 -->
    <button @click='fn2("chy",20)'>btn2</button>   <!-- 帶參 -->
</div>

<script>
    new Vue({
        el: "#app",
        methods: {
            fn1() {
                alert("hello btn1");
            },
            fn2(name, age) {
                alert(name + "\t" + age);
            },
        },
    });
</script>

@事件=“處理”

事件可以是內置事件（不帶on），也可以是$emit()中自定義的事件；

處理可以是操作變量、調用自定義函數，但不能調用alert()、console.log()等內置函數 。