成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue的模板語法和計算屬性

waterc / 3471人閱讀

摘要：模板語法上一篇入門，屬性和指令下一篇的與綁定插值文本最常用的文本插值方法是使用語法標(biāo)簽將會被替代為對應(yīng)數(shù)據(jù)對象上屬性的值。計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。

模板語法 
上一篇：Vue 入門，Vue屬性和指令：https://segmentfault.com/a/11...


下一篇：Vue 的 Class 與 Style 綁定：https://segmentfault.com/a/11...
插值 文本

最常用的文本插值方法是使用"Mustache"語法

Message:{{msg}}

Mustache 標(biāo)簽將會被替代為對應(yīng)數(shù)據(jù)對象上 msg 屬性的值。無論何時，綁定的數(shù)據(jù)對象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會更新。

通過使用 v-once 指令，可以執(zhí)行一次性的插值，當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容便不會再更新

這個數(shù)據(jù)將不會改變{{msg}}
純HTMl

{{}}會將數(shù)據(jù)解釋為純文本，為了能夠輸出HTML，可以使用 v-html 指令

{{msg}}

屬性 rewHtml 會將這個 div 內(nèi)的內(nèi)容替換，也就是說原來綁定的 msg 屬性被忽略，rewHtml 將作為 HTML 被直接添加

hello world
特性

Mustache 語法不能用在設(shè)置 HTML 特性上，這時候就可以使用 v-bind 指令：

哈哈哈哈

布爾類特性可以這樣設(shè)置，值為 false ，則該特性就會被刪除

如上，當(dāng)我們把 tit 的值改為 false 時，則 button 中的 disabled 會被刪除，按鈕也就可以點擊了

javascript 表達(dá)式

Vue 也提供了對js表達(dá)式的支持

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


gfedcba

這些表達(dá)式會在所屬 Vue 實例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達(dá)式，所以下面的例子都不會生效。


{{ var a = 1 }}

{{ if (ok) { return message } }}
指令

指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的值預(yù)期是單個 JavaScript 表達(dá)式（v-for 是例外情況，稍后我們再討論）。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。我上一篇文章中也提到過了


    
顯示

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

元素。

參數(shù)

一些指令能夠接收一個“參數(shù)”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用于響應(yīng)式地更新 HTML 屬性：

在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 屬性與表達(dá)式 url 的值綁定。

另一個例子是 v-on 指令，它用于監(jiān)聽 DOM 事件，也在我的上一篇文章中也提到了

修飾符

修飾符（Modifiers）是以半角句號 . 指明的特殊后綴，用于指出一個指令應(yīng)該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 event.preventDefault()：

過濾器

過濾器可以被用作一些常見的文本格式化，規(guī)定好過濾器的方法，便可以在模板里調(diào)用了。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達(dá)式。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符指示：


{{ message | capitalize }}




{{ message|reverse}}

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



{{message|reverse|split}}


[ "g", "f", "e", "d", "c", "b", "a" ]

在這個例子中，reverse 被定義為接收單個參數(shù)的過濾器函數(shù)，表達(dá)式 message 的值將作為參數(shù)傳入到函數(shù)中，然后繼續(xù)調(diào)用同樣被定義為接收單個參數(shù)的過濾器函數(shù) split，將 reverse 的結(jié)果傳遞到 split 中。

過濾器是 JavaScript 函數(shù)，因此可以接收參數(shù)：

{{ message | filterA("arg1", arg2) }}

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

縮寫

Vue.js 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：

v-bind 縮寫
v-on 縮寫
計算屬性 getter函數(shù) 



    
正向{{message}}

    
反向{{reMessage}}

結(jié)果如下

正向abcdefg

反向gfedcba

這里我們聲明了一個計算屬性 reMessage。我們提供的函數(shù)將用作屬性 vm.reMessage 的 getter 函數(shù)：

console.log(exp.reMessage) // --> "gfedcba"
exp.message="Hello"
console.log(exp.reMessage) // --> eybdooG

當(dāng)我們在控制臺修改exp.message的值時，exp.reMessage 的值也會更新

計算屬性 vs method 方法

其實針對上面的例子，使用method方法也可以達(dá)到

反向{{reMessage}}

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

而使用method方法時，每次重新渲染時，都要再次執(zhí)行函數(shù)

計算屬性 vs Watched 屬性 

    {{fullName}}

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

Vue 方法 
事件
methods:{

}
過濾器
filters:{

}
計算
conputed:{

}
觀察
watch:{

}
鉤子函數(shù)
created:function(){
//創(chuàng)建
},
mounted:function(){
//掛載
},
updated:function(){
//更新
},
destoryed:function(){
//銷毀
)
To be continue...... 
上一篇：Vue 入門，Vue屬性和指令：https://segmentfault.com/a/11...


下一篇：Vue 的 Class 與 Style 綁定：https://segmentfault.com/a/11...

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85101.html

相關(guān)文章

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

    摘要：然而，不同的是計算屬性是基于它們的依賴進(jìn)行緩存的。計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。這就意味著只要還沒有發(fā)生改變，多次訪問計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。這是計算屬性無法做到的。 Vue實例 構(gòu)造器 每個 Vue.js 應(yīng)用都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個 Vue 的根實例 啟動的： var vm=new Vue({ //...

    CoffeX 評論0 收藏0

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

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

    LeviDing 評論0 收藏0

  • Vue_Vue權(quán)威指南

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

    SimonMa 評論0 收藏0

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

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

    CompileYouth 評論0 收藏0

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

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

    付倫 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<