Vue實例、模板語法、計算屬性

CoffeX 發布于2019-08-20 19:04 / 3183人閱讀

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

Vue實例 構造器

每個 Vue.js 應用都是通過構造函數 Vue 創建一個 Vue 的根實例啟動的：

 var vm=new Vue({
           //選項
     })  //vm(ViewModel 的簡稱)是Vue的實例，Vue是vm的構造器

在實例化 Vue 時，需要傳入一個選項對象，它可以包含數據、模板、掛載元素、方法、生命周期鉤子等選項。

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

所有的 Vue.js 組件其實都是被擴展的 Vue 實例。

屬性與方法

每個 Vue 實例都會代理其 data 對象里所有的屬性：

{{msg}}

生命周期

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


   {{msg}}

模板語法 插值 純文本

數據綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值：

{{msg}}

Mustache 標簽將會被替代為對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。

通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上所有的數據綁定：

{{ msg }}//這個將不會改變

純html

雙大括號會將數據解釋為純文本，而非 HTML 。為了輸出真正的 HTML ，你需要使用 v-html 指令：

特性

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

nihao

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

插入表達式

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

指令

指令（Directives）是帶有 v- 前綴的特殊屬性。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM。

現在你看到我了

v-if 指令將根據表達式 seen 的值的真假來插入/移除

元素。

參數

“參數”，在指令名稱之后以冒號表示

v-bind 指令可以用于響應式地更新 HTML 屬性：

v-on 指令，它用于監聽 DOM 事件：

修飾符

修飾符（Modifiers）是以半角句號 . 指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。

 百度

過濾器

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


   {{msg|format|daxie}}
   dvjs

過濾器可以串聯


    {{msg|format|daxie}}

    {{msg|format|daxie}}
    dvjs

過濾器可以接收參數

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

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

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

縮寫 v-bind縮寫

v-on縮寫

計算屬性 計算屬性

模板內的表達式是非常便利的，但是它們實際上只用于簡單的運算。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：


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

這就是對于任何復雜邏輯，你都應當使用計算屬性的原因。

getter函數


    {{ReverseMsg}}

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

計算屬性的緩存 vs method方法

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


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

我們為什么需要緩存？假設我們有一個性能開銷比較大的的計算屬性 A，它需要遍歷一個極大的數組和做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用 method 替代。

計算屬性 vs Watched 屬性


    {{fullName}}

在控制臺修改 exp.fullName的值，那么 firstName 和 lastName 的值也會相應的更新

觀察 watchers

當你想要在數據變化響應時，執行異步操作或開銷較大的操作，這是很有用的。


    {{msg}}

 
    {{msg}}

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

云服務器 GPU云服務器 vue實例屬性 vue的計算屬性 vue.js 屬性修改實例屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85098.html

你想知道的vue的模板語法

摘要：模板語法插值文本數據綁定最常見的形式就是使用語法雙大括號的文本插值標簽將會被替代為對應數據對象上屬性的值。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于。通常更好的想法是使用屬性而不是命令式的回調。模板語法插值文本數據綁定最常見的形式就是使用 Mustache 語法（雙大括號）的文本插值： Message: {{ msg }} Mustache 標簽將會被...

LeviDing 2019-08-20 19:04 評論0 收藏0
Vue_Vue權威指南

摘要：效率不高，很多多余，稱之為臟檢查。通過索引設置數組元素并觸發視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數據的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構建數據驅動的Web界面的庫。 Vue通過簡單 API提供高效的數據綁定和靈活的組件系統輕量數據綁定指令插件化架構從傳統后臺MVC 向REST API + 前端MV*遷移DOM是數據的一種自然映...

SimonMa 2019-08-21 14:31 評論0 收藏0
# vue.js 之對vue.js基礎理解

摘要：之對基礎理解構造器是一個構造函數，編程中稱之為構造器每一個都是一個構造函數的實例，這個過程叫做實例化構造函數需要將其實例化后才會啟用構造器要求實例化時需要傳入一個選項對象組件其實都是被擴展的實例。 vue.js 之對vue.js基礎理解 Vue構造器 1 . Vue.js是一個構造函數，編程中稱之為構造器 2 . 每一個new Vue() 都是一個Vue構造函數的實例，這個過程叫...

Rainie 2019-08-20 19:04 評論0 收藏0
Vue.js起手式+Vue小作品實戰

摘要：本文是小羊根據文檔進行解讀的第一篇文章，主要內容涵蓋的基礎部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現附上代碼，然后根據代碼給予個人的一些理解，最后還放上在線編輯的代碼以供練習和測試之用在最后，我參考上的一篇技博，對進行初入的本文是小羊根據Vue.js文檔進行解讀的第一篇文章，主要內容涵蓋Vue.js的基礎部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現附上代...

CompileYouth 2019-08-21 11:18 評論0 收藏0
Vue.js起手式+Vue小作品實戰

摘要：本文是小羊根據文檔進行解讀的第一篇文章，主要內容涵蓋的基礎部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現附上代碼，然后根據代碼給予個人的一些理解，最后還放上在線編輯的代碼以供練習和測試之用在最后，我參考上的一篇技博，對進行初入的本文是小羊根據Vue.js文檔進行解讀的第一篇文章，主要內容涵蓋Vue.js的基礎部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現附上代...

付倫 2019-08-01 16:07 評論0 收藏0