Vue框架之各種指令的使用

今天是劉小愛自學Java的第138天。 感謝你的觀看,謝謝你。 學習計劃安排如下:
昨天初步接觸瞭2個指令,繼承學其它指令。
這個指令數目有點多,有的一個指令還有多種用法,一次性全記下來顯然不太現實,隻能說跟著今後不斷地使用而加深記憶。
一、v-on:click指令
v-on指令用於給頁面元素綁定事件。 事件是有很多種的,這裡以非常常見的點擊事件為例做一個說明: ①v-on:click 這個寫法對應的也就是點擊事件,但是這樣寫的話有點復雜,所以就將其簡化成@click瞭。
本質上這兩者是一回事,不要看上圖例子中有報紅,實在代碼運行沒題目,當然一般都是使用@click這種寫法。 ②事件修飾符 @click.stop :阻止點擊事件的冒泡。 關於事件的冒泡,我大致說一個說明:
點擊按鈕,不僅觸發當前按鈕的點擊事件,還會觸發它的父節點div的點擊事件。 這就叫做事件的冒泡。 而@click.stop能夠阻止事件冒泡,隻觸發當前標簽的事件,例子中也就是btn。 關於事件修飾符,它是由點開頭的指令後綴來表示的,做一個小結:
.stop:阻止事件冒泡。
.prevent:阻止默認事件發生。
.capture:使用事件捕捉模式。
.self:隻有元素自身觸發事件才執行。(冒泡或捕捉的都不執行)
.once:隻執行一次。
以上都是見名知意的,就不逐一講述瞭,其中值得註意的是,修飾符可以疊加使用。
二、v-for指令
遍歷數據渲染頁面是非常常用的需求,Vue中通過v-for指令來實現。 1遍歷數組 在vue中隻有數組這個概念,Java中的各種集合在vue中都對應著數組。 格局:v-for=”user in
users”
這個相當於Java中的增強for輪回。
users:要遍歷的數組,需要優先在vue的data屬性中定義好。
user:輪回得到的數組元素的別號。
index:輪回到的當前元素索引,從0開始。
user.name即表示掏出user對象中的name值,其它屬性的掏出原理一樣。 關於索引index的使用 格局:v-for=”(user,index) in users” 例子中沒有做說明,就不專門再畫圖瞭,格局如上所示,也好理解。 2遍歷對象和數字 除瞭遍歷數組之外,還可以遍歷對象和數字。 ①遍歷對象 Users:即指要遍歷的對象。
value:第一個是對象鍵值對中的值。
key:第二個是對象鍵值對中的鍵。
index:第三個是索引,從0開始
例子中第一個參數v表示是value,第二個參數k表示為key,參數名都是自己命名的。 不管如何命名,第一、二個參數都分別對應著值和鍵,與名稱無關,隻與參數順序有關。 當然關於index上述例子中省略瞭。 ②遍歷數字 留意:數字的遍歷和索引不一樣,索引是以0開始的,而數字是以1開始的。
三、v-if和v-show
v-if,顧名思義,前提判定,當得到結果為true時,所在的元素才會被渲染。 這個指令厲害的地方在於它可以和v-for聯用,用一個例子來說明。 1v-if實現隔行變色 ①v-if
假如i%2==0,將背景色設置為紅色,假如隻有v-if,那麼即是隻有偶數行被渲染顯示。 ②v-else v-else是和v-if相連使用的,當v-if和v-for泛起在一起時,v-for優先級更高。 也就是說,會先遍歷,再判定前提。 此外還有v-else-if,顧名思義,充當 v-if的“else-if 塊”,可以連續使用。
值得註意的是: v-else元素必需緊跟在帶 v-if或者v-else-if的元素的後面,否則它將不會被識別。 2v-show實現切換 另一個用於根據前提展示元素的選項是v-show指令,用法大致一樣:
關於show是vue屬性data中的一個值,其設定的初始值為true,點擊切換將其取反也就成瞭false,從而達到一個切換的效果。 ①隱藏:當show切換成false時,實現隱藏。 ②顯示:當show切換成true時,實現顯示。 那v-if和v-show有什麼區別呢?
打開瀏覽器控制臺,點擊切換按鈕觀察代碼的變化,做一個對比: 從中我們可以看出:
v-if的元素隱藏時是直接將標簽弄沒瞭。
v-show的元素始終被渲染保存在DOM中。
v-show隻是簡樸地切換元素的 CSS 屬性display。
四、v-blid
它的作用在於,在屬性上使用vue數據, 首先color是vue的data屬性中一個數據。 我們以前要掏出這個數據使用,是利用差值表達式{{color}}。 但是這種方式在標簽對應的屬性上是沒法使用的,所以就需要使用到該指令瞭。
完整格局是:v-bind:class,隻不過一般都會被簡寫成:class。
最後
還沒學完,明天繼承,謝謝你的觀看。 假如可以的話,麻煩幫忙點個贊,謝謝你。

ozabc