Vue學習筆記（三）

時間 2020-07-25

標籤 vue 學習筆記简体版

原文原文鏈接

1 監聽

在Vue.js中能夠經過watch來監聽數據的變化，好比經過watch實現的簡單計數器：css

<div id="app">
    <p>計數器：{{count}}</p>
    <button @click="count++">點我增長</button>
    <p id="info"></p>
</div>

var vm = new Vue({
    el: '#app',
    data:
    {
        count:0
    }
})

vm.$watch('count',function(newValue,oldValue)
{
    document.getElementById("info").innerHTML = "修改前："+oldValue+"<br>修改後："+newValue;
})

效果以下：

watch有兩個參數，一個是要監聽的變量，另外一個是回調函數，回調函數接受兩個參數，第一個參數是新值，第二個參數是舊值。html

下面再來看一下有關單位換算的例子：數組

<div id="app">
    噸：<input type="text" v-model="ton">
    千克：<input type="text" v-model="kilograms"><br>
    噸：<p id="tonInfo"></p>
    千克：<p id="kilogramsInfo"></p>
</div>

var vm = new Vue({
    el: '#app',
    data:
    {
        ton:0,
        kilograms:0
    },
    watch:
    {
        ton:function(val)
        {
            this.kilograms = (this.ton = val) * 1000;
        },
        kilograms:function(val)
        {
            this.ton = (this.kilograms = val) / 1000;
        }
    }
})

vm.$watch('ton',function(newValue,oldValue)
{
    document.getElementById("tonInfo").innerHTML = "修改前："+oldValue+"<br>修改後："+newValue;
})
vm.$watch('kilograms',function(newValue,oldValue)
{
    document.getElementById("kilogramsInfo").innerHTML = "修改前："+oldValue+"<br>修改後："+newValue;
})

2 樣式綁定

class與style是HTML元素的屬性，用於設置元素的樣式，能夠利用v-bind來設置樣式屬性。v-bind在處理class以及style時專門加強了，表達式的結果類型除了是字符串外，還能是對象或者數組。app

2.1 `class`綁定

能夠爲v-bind:class設置一個對象，從而動態切換class：函數

<style>
    .active
    {
        width:100px;
        height: 100px;
        background: green;
    }
</style>
<div id="app">
    <div v-bind:class="{'active':isActive}"></div>
</div>

vm = new Vue({
    el: '#app',
    data:
    {
        isActive:true
    }
})

也能夠傳入多個屬性來動態切換多個class：測試

.class0
{
    width:100px;
    height: 100px;
}
.class1
{
    background: green;
}
.class2
{
    background: red;
}

<div id="app">
    <div class="class0" v-bind:class="{'class1':active1,'class2':active2}"></div>
</div>

var vm = new Vue({
    el: '#app',
    data:
    {
        active1:true,
        active2:true
    }
})

效果：

也能夠利用對象進行簡化：this

<div id="app">
    <div class="class0" v-bind:class="classObject"></div>
</div>

var vm = new Vue({
    el: '#app',
    data:
    {
        classObject:
        {
            class1:true,
            class2:true
        }
    }
})

2.2 計算屬性

在v-bind:class中除了是一個對象還能綁定返回對象的計算屬性，好比：spa

<div id="app">
    <div v-bind:class="classObject"></div>
</div>

var vm = new Vue({
    el: '#app',
    data:
    {
        active1:true,
        error:{
            value:true,
            type:'fatal'
        }
    },
    computed:{
        classObject:function() {
            return {
                class0:true,
                class1: this.active1 && !this.error.value,
                class2: this.error.value && this.error.type === 'fatal'
            }
        }
    }
})

效果以下：
3d

2.3 數組

也能夠傳遞給v-bind:class一個數組，數組的元素爲變量，變量的內容爲對應的CSS類名：code

<div id="app">
    <div v-bind:class="[active1,active2]"></div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        active1:'class0',
        active2:'class1'
    }
})

也能夠利用三元表達式來切換：

<div id="app">
    <div v-bind:class="[active1,active2 ? 'class1' : 'class2']"></div>
</div>

3 內聯樣式

能夠在v-bind:style中直接設置樣式（注意先後帶{}）：

<div id="app">
    <div v-bind:style="{color:color,fontSize:fontSize+'px'}">測試</div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        color:'#FF0000',
        fontSize:30
    }
})

固然也能夠像綁定class同樣直接綁定到一個對象上：

<div id="app">
    <div v-bind:style="styleObject">測試</div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        styleObject: {
            color:'#FF0000',
            fontSize:'30px'
        }
    }
})

也可使用數組進行綁定多個樣式：

<div id="app">
    <div v-bind:style="[styleObject1,styleObject2]">測試</div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        styleObject1: {
            color:'#FF0000',
        },
        styleObject2:{
            fontSize:'30px'
        }
    }# 5 
})

另外當v-bind:style須要特殊前綴的CSS時，好比transform，Vue會自動偵測並添加相應前綴。

4 事件處理

4.1 `v-on`

事件監聽可使用v-on：

<div id="app">
    <button v-on:click="count += 1">點擊增長1</button>
    <p>這個按鈕被點擊了{{count}}次</p>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        count:0
    }
})

一般來講單擊按鈕會觸發一個方法調用，在methods中指定便可：

<div id="app">
    <button v-on:click="test">點擊觸發事件</button>
</div>

var vm = new Vue({
    el: '#app',
    methods:{
        test:function(){
            alert('Hello')
            //event表示是原生DOM事件
            if(event) {
                alert(event.target.tagName)
            }
        }
    }
})

固然也可使用內聯的JS語句：

<div id="app">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>

var vm = new Vue({
    el: '#app',
    methods:{
        say:function(val){
            alert(val)
        }
    }
})

4.2 事件修飾符

Vue爲v-on提供了事件修飾符來處理DOM事件細節，如event.preventDefault()或event.stopPropagation()，經過.表示的指令調用修飾符：

.stop：阻止事件冒泡
.prevent：提交事件再也不重載頁面，如<form v-on.submit.prevent="onSumbit"></form>
.capture：事件捕獲模式
.self：只當事件在該元素自己（而不是子元素）觸發時回調
.once：事件只能點擊一次

4.3 按鍵修飾符

Vue容許在v-on在監聽鍵盤事件時添加按鍵修飾提示符：

<!--只有keyCode爲13時調用submit()-->
<input v-on:keyup.13="submit">

keyCode值對應ASCII表，爲了方便，Vue爲經常使用的按鍵提供了別名：

.esc
.delete（刪除+退格）
.enter/.space/.tab
.up/.down/.left/.right
.ctrl/.alt/.shift/.meta

固然也能夠進行按鍵的組合，使用.鏈接便可。
例子以下：

<div id="app">
    <input type="text" placeholder="請按下空格" v-on:keyup.space="spacePressed"><br>
    <input type="text" placeholder="請按下Ctrl+C" v-on:keyup.ctrl.67="ctrlCPressed">
    <!-- <input type="text" placeholder="請按下Ctrl+C" @keyup.ctrl.67="ctrlCPressed"> -->
    <p id="info"></p>
</div>

var vm = new Vue({
    el: '#app',
    methods:{
        spacePressed:function(){
            document.getElementById("info").innerHTML = "您按下了空格";
        },
        ctrlCPressed:function(){
            document.getElementById("info").innerHTML = "您按下了Ctrl+C";
        }
    }
})