iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 18
0
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 18

Vue 的其餘內建指令補充

我們總是和時間賽跑,卻忘記了沿途的風景有多美好。

前幾篇介紹了許多 Vue 專屬的內建指令用法,這裡要介紹最後幾個也會常用到的內建指令refv-cloakv-once
先來 codepen 看看:Vue.Js ref 唯一識別與 v-cloak 隱藏表達式

指令 作用 Vue
v-if 如果為 true, 當下的標籤元素才會輸出渲染到頁面
v-html 更新元素的 innerHTML
v-else 如果為 false, 當前標籤才會輸出到頁面
v-show 通過控制 display 樣式來達到控制顯示和隱藏效果
v-for 遍歷陣列或物件,渲染出列表
v-text 更新元素的 textContent
v-on 綁定事件監聽, 一般簡寫為@
v-bind 強制綁定解析表達式, 可以省略 v-bind 一般簡寫為:
v-model 雙向資料綁定
ref 為某個元素註冊一個唯一標識, vue 物件通過 $refs 屬性訪問這個元素物件
v-cloak 使用它防止閃現表達式, 與 css 配合: [v-cloak] { display: none }

ref 元素的唯一識別

給需要一個標籤一個唯一識別,可用ref,但如何透過我們給標籤的ref取得標籤的內容,在實例的方法裡,可以使用$refs這個方法取得:this.$refs.content.textContent,可選用innerText或者是textContent效果是一樣的。

ref的作用是為某個元素註冊一個唯一標識, vue 物件會透過 $refs 屬性來訪問這個元素物件或其內容。

參考:API — Vue.js ref

v-cloak 防止在頁面出現 Vue 的表達式

因為程式是一行行執行的,有時因為頁面跳轉的關係,程式還沒讀取完即出現在頁面上,這時 Vue 的表達式像是{{ 表達式 }}就會被看見,為了避免這樣的狀況產生,可以使用在標籤上使用v-cloak,並在 Style 以屬性選擇器[v-cloak]選取,並給予display:none先隱藏它,直到程式讀取到資料後,這個屬性會自動地被拿掉,就可預防出現 Vue 的表達式。
HTML 部分

來看看使用refv-cloak的範例

<p ref="content">Hello Paris</p>
<button @click="hint">Hint</button>
<!-- v-cloak -->
<p v-cloak>Hello Taipei</p>

JavaScript 部分

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Taipei',
  },
  methods: {
    hint() {
      alert(this.$refs.content.textContent);
      alert(this.$refs.content.innerText);
    },
  },
});

參考:API — Vue.js v-cloak

v-once 只渲染元素和元件一次

有些元素在頁面中並不需要每次都渲染,如果使用v-once,Vue 就只會渲染元素和元件一次,之後如果重新渲染,元素/元件及其所有 DOM Tree 的子節點就會被視為靜態的內容並略過,這樣可以有助於優化效能。
HTML 部分

<div id="app">
    <div v-once>
        {{content}}
    </div>
</div>

JavaScript 部分

const app = new Vue({
  el: '#app',
  data: {
    content: '第一次的文字內容',
  },
});
// 第二次給值渲染
app.content = '第二次的文字更新';

以上的範例即使使用app.content再次選染,但值還是會是第一次被選染的值,因為渲染一次之後就會被當成靜態元素處理。

參考:API — Vue.js v-once

每日一句法文有益身心:J'ai faim ! --> 姐.放! --> 我餓了!


上一篇
Vue.js 資料格式化的好幫手:過濾器 Filters
下一篇
Vue 自定義指令 Custom Directives
系列文
Déjà-vu ? 要 Vue 過才知道30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
Chris
iT邦新手 4 級 ‧ 2020-10-03 21:46:23

「this.$refs.content.textContent,可選用 innerHTMl 或者是 textContent 效果是一樣的。」在插入 HTML 的時候,還會是一樣的效果嗎?還是 textContent 畫面會出現 HTML 的原始碼,而 innerHTML 會將 HTML 渲染出來?

tsuifei iT邦新手 4 級 ‧ 2020-10-04 21:00:29 檢舉

謝謝提示,打錯了,是innerText 馬上更正。

0
Chris
iT邦新手 4 級 ‧ 2020-10-04 07:10:19

好想要聽法文,用看的不會唸!QQ

tsuifei iT邦新手 4 級 ‧ 2020-10-04 20:47:08 檢舉

加我 line 唸給你聽!哈~

我要留言

立即登入留言