Vue實(shí)例、模板語法、計(jì)算屬性

CoffeX 發(fā)布于2019-08-20 19:04 / 3188人閱讀

摘要：然而，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要還沒有發(fā)生改變，多次訪問計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。這是計(jì)算屬性無法做到的。

Vue實(shí)例 構(gòu)造器

每個(gè) Vue.js 應(yīng)用都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個(gè) Vue 的根實(shí)例 啟動(dòng)的：

 var vm=new Vue({
           //選項(xiàng)
     })  //vm(ViewModel 的簡稱)是Vue的實(shí)例，Vue是vm的構(gòu)造器

在實(shí)例化 Vue 時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項(xiàng)。

 var vm=new Vue({
            el:"#app",
            data:{
                msg:"hallo vue.js"
            } 
       })

所有的 Vue.js 組件其實(shí)都是被擴(kuò)展的 Vue 實(shí)例。

屬性與方法

每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性：

{{msg}}

生命周期

每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如，實(shí)例需要配置數(shù)據(jù)觀測(data observer)、編譯模板、掛載實(shí)例到 DOM ，然后在數(shù)據(jù)變化時(shí)更新 DOM 。在這個(gè)過程中，實(shí)例也會(huì)調(diào)用一些 生命周期鉤子 ，這就給我們提供了執(zhí)行自定義邏輯的機(jī)會(huì)。  針對(duì)vm實(shí)例，不同生命周期提供了不同的鉤子函數(shù)。(created mounted updated destroyed)


   {{msg}}

模板語法 插值 純文本

數(shù)據(jù)綁定最常見的形式就是使用 “Mustache” 語法（雙大括號(hào)）的文本插值：

{{msg}}

Mustache 標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上 msg 屬性的值。無論何時(shí)，綁定的數(shù)據(jù)對(duì)象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。  
通過使用 v-once 指令，你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新。但請(qǐng)留心這會(huì)影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定：

{{ msg }}//這個(gè)將不會(huì)改變

純html

雙大括號(hào)會(huì)將數(shù)據(jù)解釋為純文本，而非 HTML 。為了輸出真正的 HTML ，你需要使用 v-html 指令：

特性

mustache 語法不能作用在 HTML 特性上，遇到這種情況應(yīng)該使用 v-bind 指令：

nihao

這同樣適用于布爾類特性，如果求值結(jié)果是 falsy 的值，則該特性將會(huì)被刪除：

插入表達(dá)式

{{ number + 1 }}
{{ ok ? "YES" : "NO" }}
{{ message.split("").reverse().join("") }}

指令

指令（Directives）是帶有 v- 前綴的特殊屬性。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。

現(xiàn)在你看到我了

v-if 指令將根據(jù)表達(dá)式 seen 的值的真假來插入/移除 
 元素。

參數(shù)

“參數(shù)”，在指令名稱之后以冒號(hào)表示

v-bind 指令可以用于響應(yīng)式地更新 HTML 屬性：

v-on 指令，它用于監(jiān)聽 DOM 事件：

修飾符

修飾符（Modifiers）是以半角句號(hào) . 指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。

 百度

過濾器

用作一些常見的文本格式化。過濾器可以用在兩個(gè)地方：mustache 插值和 v-bind 表達(dá)式。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符指示：


   {{msg|format|daxie}}
   dvjs

過濾器可以串聯(lián)


    {{msg|format|daxie}}

    {{msg|format|daxie}}
    dvjs

過濾器可以接收參數(shù)

 
    {{msg|format(11)|daxie}}

    {{msg|format(22)|daxie}}

這里，filterA 被定義為接收三個(gè)參數(shù)的過濾器函數(shù)。其中 message 的值作為第一個(gè)參數(shù)，普通字符串 "arg1" 作為第二個(gè)參數(shù)，表達(dá)式 arg2 取值后的值作為第三個(gè)參數(shù)。

縮寫 v-bind縮寫

v-on縮寫

計(jì)算屬性 計(jì)算屬性

模板內(nèi)的表達(dá)式是非常便利的，但是它們實(shí)際上只用于簡單的運(yùn)算。在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)。例如：


  {{ message.split("").reverse().join("") }}

這就是對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性的原因。

getter函數(shù)


    {{ReverseMsg}}

vm.ReverseMsg 的值始終取決于 vm.msg 的值。

計(jì)算屬性的緩存 vs method方法

我們可以將同一函數(shù)定義為一個(gè) method 而不是一個(gè)計(jì)算屬性。對(duì)于最終的結(jié)果，兩種方式確實(shí)是相同的。然而，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。相比之下，每當(dāng)觸發(fā)重新渲染時(shí)，method 調(diào)用方式將總是再次執(zhí)行函數(shù)。


    {{ReverseMsg}}
    {{ReverseMsg}}
    {{ReverseMsg1}}
    {{ReverseMsg1}}

我們?yōu)槭裁葱枰彺?？假設(shè)我們有一個(gè)性能開銷比較大的的計(jì)算屬性 A，它需要遍歷一個(gè)極大的數(shù)組和做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請(qǐng)用 method 替代。

計(jì)算屬性 vs Watched 屬性


    {{fullName}}

在控制臺(tái)修改 exp.fullName的值，那么 firstName 和 lastName 的值也會(huì)相應(yīng)的更新

觀察 watchers

當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時(shí)，執(zhí)行異步操作或開銷較大的操作，這是很有用的。


    {{msg}}

 
    {{msg}}

在這個(gè)示例中，使用 watch 選項(xiàng)允許我們執(zhí)行異步操作 (訪問一個(gè) API)，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這是計(jì)算屬性無法做到的。

云服務(wù)器 GPU云服務(wù)器 vue實(shí)例屬性 vue的計(jì)算屬性 vue.js 屬性修改實(shí)例屬性

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/85098.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

CoffeX

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

新智能硬件創(chuàng)新沙龍&大賽

閱讀 1891·2021-11-17 09:33
華納云(hncloud)，美國云服務(wù)器測評(píng)，CN2+OpenStack云平臺(tái)，默認(rèn)送10G DDOS

閱讀 6484·2021-10-12 10:20
怎么連接云主機(jī)-云主機(jī)怎么使用？

閱讀 2306·2021-09-22 15:50
主機(jī)帶寬怎么選-選購新睿云云主機(jī)帶寬怎么選？

閱讀 1793·2021-09-22 15:10
英偉達(dá)：已完成對(duì)高清地圖創(chuàng)企 DeepMap 的收購

閱讀 626·2021-09-10 10:51
基于STM32f103c8t6和L292N驅(qū)動(dòng)設(shè)計(jì)避障小車（核心函數(shù)的建立為自己所寫）

閱讀 630·2021-09-10 10:50
DMIT，LAX.Pro系列VPS進(jìn)行免費(fèi)的流量升級(jí)，加量不加價(jià)，SHAREv2由1.0T升級(jí)為1.

閱讀 3048·2021-08-11 11:19
小程序瀑布流效果，解決左右兩邊高度差距過大的問題

閱讀 1786·2019-08-30 15:55

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Vue實(shí)例、模板語法、計(jì)算屬性

相關(guān)文章

**你想知道的vue的模板語法**

Vue_Vue權(quán)威指南

**# vue.js 之對(duì)vue.js基礎(chǔ)理解**

Vue.js起手式+Vue小作品實(shí)戰(zhàn)

Vue.js起手式+Vue小作品實(shí)戰(zhàn)

發(fā)表評(píng)論

0條評(píng)論

CoffeX

男|高級(jí)講師

TA的文章

新智能硬件創(chuàng)新沙龍&大賽

華納云(hncloud)，美國云服務(wù)器測評(píng)，CN2+OpenStack云平臺(tái)，默認(rèn)送10G DDOS

怎么連接云主機(jī)-云主機(jī)怎么使用？

主機(jī)帶寬怎么選-選購新睿云云主機(jī)帶寬怎么選？

英偉達(dá)：已完成對(duì)高清地圖創(chuàng)企 DeepMap 的收購

基于STM32f103c8t6和L292N驅(qū)動(dòng)設(shè)計(jì)避障小車（核心函數(shù)的建立為自己所寫）

DMIT，LAX.Pro系列VPS進(jìn)行免費(fèi)的流量升級(jí)，加量不加價(jià)，SHAREv2由1.0T升級(jí)為1.

小程序瀑布流效果，解決左右兩邊高度差距過大的問題

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Vue實(shí)例、模板語法、計(jì)算屬性

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Vue實(shí)例、模板語法、計(jì)算屬性