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。
最後
還沒學完，明天繼承，謝謝你的觀看。 假如可以的話，麻煩幫忙點個贊，謝謝你。