Vue實例成員(方法)

時間 2019-12-19

標籤 vue 實例成員方法简体版

原文原文鏈接

Vue實例

el：建立實例

new Vue({
    el: '#app'
})
// 實例與頁面掛載點一一對應
// 一個頁面中能夠出現多個實例對應多個掛載點
// 實例只操做掛載點內部內容

每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的
一個 Vue 應用由一個經過 new Vue 建立的根 Vue 實例，以及可選的嵌套的、可複用的組件樹組成。

數據與方法

數據

當一個 Vue 實例被建立時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的全部的屬性。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。
只有當實例被建立時 data 中存在的屬性纔是響應式的
若是你知道你會在晚些時候須要一個屬性，可是一開始它爲空或不存在，那麼你僅須要設置一些初始值

實例方法

Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來html

vm.$el
vm.$data
vm.$watch(dataAttr, fn)

data：數據

<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '數據',
        }
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data爲插件表達式中的變量提供數據 -->
<!-- data中的數據能夠經過Vue實例直接或間接訪問-->

methods：方法

methods

methods用來裝載能夠調用的函數，你能夠直接經過 Vue 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定爲 Vue 實例。vue

注意，不該該使用箭頭函數來定義 methods 函數（例如 plus: () => this.a++）。理由是箭頭函數綁定了父級做用域的上下文，因此 this 將不會按照指望指向 Vue 實例，this.a 將是 undefined。示例代碼以下。緩存

若是你要經過對 DOM 的操做來觸發這些函數，那麼應該使用 v-on 對操做和事件進行綁定app

<style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">測試</p>
    <p class="box" v-on:mouseover="pOver">測試</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            pClick () {
                // 點擊測試
            },
            pOver () {
                // 懸浮測試
            }
        }
    })
</script>
<!-- 瞭解v-on:爲事件綁定的指令 -->
<!-- methods爲事件提供實現體-->

computed：計算

一、computed中定義的是方法屬性，data中定義的也是屬性，因此不須要重複定義(省略data中的)
二、方法屬性的值來源於綁定的方法的返回值
三、方法屬性必須在頁面中渲染後，綁定的方法纔會被啓用(調用)
四、方法中出現的全部變量都會被監聽，任何變量發生值更新都會調用一次綁定的方法，從新更新一下方法屬性的值
五、方法屬性值不能手動設置，必須經過綁定的方法進行設置異步

模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護,這時候應該使用計算屬性函數

<body>
    <div id="app">
        <input type="text" v-model="v1">
        +
        <input type="text" v-model="v2">
        =
        <button>{{ res }}</button>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '',
            v2: '',
            // res: '結果',
        },
        computed: {
            res () {
                console.log('該方法被調用了');
                return this.v1 && this.v2 ? +this.v1 + +this.v2 : '結果';
            }
        }
    })
</script>
<script>
    console.log(1 + '2');
    console.log(1 - '2');
    console.log(+'2');
</script>

watch：監聽

一、watch中給已有的屬性設置監聽方法
二、監聽的屬性值一旦發生更新，就會調用監聽方法，在方法中完成相應邏輯
三、監聽方法不須要返回值(返回值只有主動結束方法的做用)測試

雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的偵聽器。這就是爲何 Vue 經過 watch 選項提供了一個更通用的方法，來響應數據的變化。當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的this

<body>
    <div id="app">
        <p>
            姓名：<input type="text" v-model="full_name">
        </p>
        <p>
            姓：<span>{{ first_name }}</span>
        </p>
        <p>
            名：<span>{{ last_name }}</span>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: '',
        },
        watch: {
            full_name() {
                if (this.full_name.length === 2) {
                    k_v_arr = this.full_name.split('');
                    this.first_name = k_v_arr[0];
                    this.last_name = k_v_arr[1];
                }
            }
        }
    })
</script>

methodes,computed,watch三者區別

它們三者都是以函數爲主體，可是它們之間卻各有區別。spa

計算屬行與方法

咱們能夠將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是徹底相同的。然而，不一樣的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 message 尚未發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。插件

相比之下，每當觸發從新渲染時，調用方法將總會再次執行函數。

計算屬性與偵聽屬性

watch擅長處理的場景：一個數據影響多個數據
computed擅長處理的場景：一個數據受多個數據影響

delimiters：分隔符

用來修改插值表達式符號

delimiters: ['{[', ']}']

<body>
    <div id="app">
        <p>{{ num }}</p>
        <!--<p>{[ num ]}</p>-->
        <p>{ num ]}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 100
        },
        // 用來修改插值表達式符號
        // delimiters: ['{[', ']}'],
        delimiters: ['{', ']}'],
    })
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。