Vue 2 | Part 3 常用指令合集

walterrwu 發布于2019-08-20 13:43 / 2606人閱讀

摘要：修改的值可以看到元素中增加了，原來的文字也被隱藏了當然也可以賦值為其它東西，但是最后都會轉換為布爾值來決定目標元素是否顯示。

本期跟大家分享的，是Vue里面除了v-bind和v-on之外的指令。因為都挺簡單的，所以就一次性解決了。

v-text

直接把文字綁定到html。之前我們一直使用大胡子語法往html里面綁定數據，如果數據是純字符串的話，也可以使用v-text。

當然也可以綁定其它類型的數據，它們會以字符串的輸出。

v-html

相當于jq的html方法，把數據中的html字符串嵌入到目標元素里面。

注意v-text和v-html兩者，往html里插入數據以后新數據和使用指令的元素

之間的層級關系。

v-if/v-else-if/v-else

我會把這三兄弟描述為：在html中進行狀態控制的快捷指令。

下面用一個簡單的例子來演示。假設我們的數據中status可能會返回loading、ready、fail三者之一，在頁面需要根據這個字段來顯示不同的東西：


    
        loading
    
    
        ready
    
    
        fail

在console中直接改變status值，可以看到效果：

同時要留意，使用這三兄弟的時候，vue只會生成判定為true的那個節點：

v-show

根據布爾值決定目標元素的css display值。


    {{ info }}

修改showHeader的值

> app.showHeader = false

可以看到元素中增加了css style，原來的文字也被隱藏了：

當然showHeader也可以賦值為其它東西，但是最后都會轉換為布爾值來決定目標元素是否顯示。

v-show和v-if的區別

打開chrome devtools來查看兩者渲染出來的dom。可以看到v-show只改變元素的css，但是v-if會決定是否生成這個dom節點（可查看上方截圖）。

v-once

只根據數據渲染一次。往后數據改變時，目標元素不再重新渲染。

我們用v-text和v-once進行對比：


    v-once: {{ once }}
    mustache: {{ once }}

保存代碼并刷新瀏覽器后，兩句話是一樣的：

對數據中的once值進行修改后，使用v-once的元素不更新：

這期就到這里，敬請期待下一期：v-bind綁定屬性和class。

寫在最后

源碼地址：https://github.com/levblanc/v...

視頻攻略：小的不才，為求一贊，自制本期視頻攻略在此。

GPU云服務器云服務器 Part-2 Vuejs常用指令 linux常用指令常用linux指令

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81205.html

Vue 2 | 基礎API系列文章合集

摘要：在大家的鞭策和鼓勵下，這個基礎的系列終于完成了。關于更新的頻率，因為是我自己一個人在做，文案視頻都準備好了才發的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因為公司放假了。不過月份的更新速度真的不能保證，抱歉。在大家的鞭策和鼓勵下，這個基礎API的系列終于完成了。所幸是沒有真的更到一百期才完結（笑）。最初是因為覺得錄視頻好玩，才挖的這個坑。也想過中途放棄，關掉專欄，但由于...

instein 2019-08-20 14:00 評論0 收藏0
Vue 2 | PART 2 雙向綁定和vue-devtools

摘要：雙向數據綁定這將是全宇宙最簡單的雙向數據綁定示例。這是一個專門針對表單的指令。也就是說，上面談到的這幾處地方，它們指向的數據源是同一個。所以，當其中一處對數據源進行了修改，其它地方也會馬上得到體現。雙向數據綁定這將是全宇宙最簡單的雙向數據綁定示例。上一期我們已經成功地通過Vue給html綁定了數據，也在console里面看到了數據是可以實時進行更改的。想要實現在網頁上根據用戶的輸...

Richard_Gao 2019-08-20 13:35 評論0 收藏0
vue 2.x項目 vue-qriously 生成二維碼并下載、cliploard復制粘貼

摘要：近日，重構項目某一老模塊時，有一個功能是生成二維碼并下載，還可以復制鏈接。先想著新模塊中是否有生成二維碼的插件，看了下。項目中封裝了一個指令。一份用來顯示的。順帶說一下，復制粘貼復制粘貼老模塊中是用的倉庫。近日，重構項目某一老模塊時，有一個功能是生成二維碼并下載，還可以復制鏈接。列表每項都有二維碼、下載二維碼和復制鏈接和列表上方總的二維碼。老模塊是用的qrocode中文文檔，qrco...

littlelightss 2019-08-22 17:16 評論0 收藏0
Vue 2 | Part 5 列表渲染和事件監聽

之前在vue里面綁定數據，都只是單個地綁定。這期我們來看一下怎樣渲染列表，然后通過事件監聽方法往列表里面增加item。列表渲染廢話不多說，直接上代碼： {{ item }} var app = new Vue({ el: #app, data: { list: [ ...

Nekron 2019-08-20 13:55 評論0 收藏0
Vue 2 | Part 8 組件通信

摘要：實例和組件之間的通信先來看一下我們最后要完成的效果吧。在組件的內部監聽到用戶的事件后，執行自身的方法，把信號發布出去。所以可以直接把實例作為一個，在組件之間進行通信。比方說，我們希望點擊按鈕以后，另外一個組件可以接收到這個信號。當組件監聽到用戶的行為，需要觸發一些界面交互的時候，實例與組件之間、組件相互之間就需要進行通信了。Vue里面有兩個api可以幫助我們輕松地完成這件事，它們是$...

MartinDai 2019-08-20 13:58 評論0 收藏0