Vue學習-2

将标簽頁渲染出來,而不是顯示标簽出來;

直接在标簽中添加v-html=你要改變的資料名;

顯示出來的就是加粗的前端

需要借助一個v-bind指令,後面寫你要添加的屬性

可以簡寫省略v-bind,直接<code>:+綁定的屬性</code>就可以;

注意一

當渲染屬性值為布爾值的時候(true)或者(false),效果就是不一樣了,并不是簡單的true或者false渲染出來,而是當值為false的時候,屬性會被移除;

我們通過v-bind指令的縮寫,給兩個<code>button</code>标簽屬性,設定一個為true,一個為false,效果是

注意二

支援JavaScript表達式

渲染出來結果為5 ;

渲染出來結果為yes

雖然vue支援JavaScript表達式運算,隻能在簡單的情況下才會這樣玩,運算比較複雜的時候,一定要用vue的computed屬性進行計算;

在視圖綁定資料的方法,Mustache文法(雙大括号文法),綁定純HTML,綁定屬性,支援JavaScript表達式寫法,以及表達式寫法和computed差別;

用于更新标簽包含的文本,作用和大括号一樣,隻是在标簽中綁定

元素的顯示和隐藏,控制display css屬性

取值為true/false.分别對應着顯示/隐藏

第一個p标簽的v-show,元素正常顯示;第二個p标簽的v-show設定為false,不顯示,解析代碼為

取值也是true或者false,控制元素是否被渲染出來;

解析效果為

看到了吧，設定為true的

标簽，成功渲染出來，而設定為false的

标簽，直接被一行注釋代替了，并沒有被解析渲染出來。

與v-show的差別也就顯示出來了,

注意 : 在需要頻繁切換顯示/隐藏,就用v-show,運作後不太可能需要切換顯示/隐藏,就用v-if

if和else在程式設計中一般都是成對出現的,在vue中也不例外,它沒有對應的值,但是要求一個兄弟節點必須使用v-if指令,也是,沒有if,哪有else;

下面說完我想吐槽下用markdown記筆記插圖檔的梗,很無語.

隻有第二個

被渲染出來了,第一個

标簽由于v-if指令的值為false,直接被忽視了,不渲染;

同理,一旦第一個标簽的v-if指令值為true,被忽視的就是第二個

.v-if和v-else隻有一個會被渲染出來;

見第一個最上面.

有時候data中存放的資料不是簡單的數字或者字元串,而是數組array類型,這個時候想把數組的元素顯示在視圖上,就需要用到vue提供的v-for指令,來實作清單的渲染;

item表示每個元素,我了解的相當于周遊了

想拿索引?

也很簡單,我們稍微改動下代碼,把html部分的代碼修改為

在循環過程中,我們不但要拿到數組的每個元素item,我們還擷取每個元素的索引,寫法如上,循環的時候加上(index,item)

效果圖/源碼圖為:

提醒：v-for指令除了可以疊代數組，還可以疊代對象和整數。 (這裡我沒測試,有興趣的可以測試告訴我哈哈)

這裡就不說了

v-on 指令相當于綁定事件的監聽器，綁定的事件觸發了，可以指定事件的處理函數,在前面vue一種介紹了methods選項的時候,用到了v-on(我記得),這裡還是配合methods示範

此外，如果你想給處理程式say( )傳參數，也是可以的，用法跟普通的方法一緻。

渲染出來的是:hello,Tom

一般用在表單輸入,它幫助我們實作表單控件和資料的雙向綁定,相對以前手動更新Dom,是不是很好;

隻要給input控件添加v-model指令,并關聯的資料msg,我們就可以輕松的把使用者輸入的内容都綁定在msg上,是不是感受到了MVVM帶來的快感哈哈哈

最後一個v-once指令,它的特點是隻渲染一次,後面元素中的資料在更新變化都不會重新渲染;

修改了

标簽,增加了v-once指令;

msg的初始值不再是空字元串;(這個我總忘,第一次渲染需要有内容的)

由于msg有了初始值,第一次渲染的時候,input控件和

标簽都有了内容,由于

标簽我們增加了v-once指令.是以,後期我們更新msg值的時候,

标簽的内容不會改變;

這節講了

v-html

v-bind

v-text

v-show

v-if

v-else

v-once

v-model

v-on

v-for

十個指令你會了幾個呢?是不是so easy? 都能看明白就是在實際開發中如何具體去應用了.

今日吐槽:

有的人應該知道,MarkDown引用的兩種方式,(這裡我籠統的歸結為兩種)

本地和線上,本地都知道,哪天圖檔丢失了,或者沒有上傳就無法顯示了,

本地可以直接建立檔案夾使用絕對路徑,這裡不多說.

線上上傳有很多種,什麼GitHub啊 ,上傳伺服器之類的,base64轉碼啊(超級麻煩)總之就是為了擷取線上圖檔的網址,反正就是很煩,可是又必須zheyan這樣,Mac人家可以直接線上線上就上傳到微網誌了,圖床(好像這個插件自帶的)具體是不是這兩字我也不知道,沒查,Windows不支援.,是以很郁悶,這裡的圖檔我是上傳到我微網誌,然後複制的位址,哪天微網誌dongtaish動态删了就沒有了,是以在微網誌我備注上部落格存圖.很心塞......

在MarkDown上還支援vue格式的代碼高亮顯示,到這裡jiubuzi就不支援了,全是白的,為了看着更突然清晰,手動一個個改成了java代碼塊風格,很是無無語,好了,吐槽完畢.

再見~