Vue 初學指南 二
記錄繼續vue的學習
Mustache
<span v-bind:title="msg">
{{ message }}
</span>資料繫結“Mustache”語法 (雙大括號{{xxx}}) 的文字插值,就瞭解一下他的名字Mustache
<span v-bind:title="msg" v-once>
{{ message }}
</span>如果在span上加了v-once屬性,那麼Mustache的插值只能被執行一次,包括該節點上的其他Mustache,如果span節點裡面還巢狀著其他的節點,也是隻能被執行一次
Mustache中可以出現javasricprt的表示式,例如: {{num+1}},{{a==1?b:c}},{{str.split(',').reverse().join(',')}}<=這好像是js的函式,反正這些都是支援的,不可以在Mustache中訪問定義的全域性變數,可以訪問全域性變數的一個白名單(這句還不懂:mark,回補)
v-html 對html輸入真正的html,但是很不安全,瞭解即可
v-bind v-on
Mustache語法不能作用在HTML特性上,指南是這麼說,但覺得有點瑕疵,個人更習慣的叫他標籤的屬性,比如<div xxx="">中的xxx
使用v-bind,v-on等指令來控制,v-bind 縮寫成 :XXX ,v-on 縮寫成 @XXX ,這兩個指令是最頻繁使用的,所以特例設定了簡寫
比如 v-bind : href --> :href , v-on : click --> @click
計算屬性
還是圍繞著Mustache,說是如果把表示式都寫在Mustache中,會造成一長串,不容易維護,然後設計了一個計算屬性 computed,用來計算複雜的邏輯,得到一個結果,然後再Mustache插值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 第一步 引入環境 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 第二步 建立一個div --> <div id="app"> <span v-bind:title="msg" v-once> {{ message }} <p> {{getMsg}} </p> </span> </div> </body> <!-- 第三步 Dom資料渲染 --> <script> var app=new Vue({ el: '#app', data: { message: 'data-message', }, methods:{ getMessage(){ return this.message+"hi" } }, computed:{ getMsg(){ return this.message+"hello" } } }) </script> </html>
會發現使用methods和computed的時候,可以獲取同樣的效果,那麼他們的區別是什麼,瞭解到計算屬性是基於他們的依賴進行快取,不是很明白,但是快取就是為了方便,速度,後面知道,剛才計算的getMsg(),依賴於message屬性,只要該屬性不發生變化,他的值就會被快取,每次就可以不執行getMsg,直接快取取值即可,methods裡面的函式,每次渲染都會重新執行一次,對比之下就可以知道適當的不同環境使用不同的屬性
偵聽屬性指南中有說到 watch ,然而我並不知道是什麼,感覺像是監聽回撥檢查一類的屬性,用計算屬性方式來代替重複性的偵聽屬性
對於getter和setter的屬性,作為後端的人來說還是很熟悉的,先學到這裡,明天繼續,下班了..~
---------------------------------------------------------------------------------------