iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 4
0
Modern Web

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

Vue 的雙花括號表達式的用法

One Piece 已要啟航,我們要跳船嗎?

昨天我們已經大略的介紹了 vue 的使用方法與基本要素,來複習一下吧!

在我們的文件裡至少要有這三個元素,才能使 Vue.js 正常的運作:

  • 載入 Vue.js 文件
  • 指定渲染目標 Div
  • 建立 Vue 實例物件

指定渲染目標的 Div 裡,除了有網站結構的 HTML 與在這些結構裡的樣式,也會大量使用 Vue 專屬的模板語法(Mustache)與 Vue 的專屬指令(Directives),這些指令都是以v-為開頭,我們會在後續一一介紹,我們可以透過這些指令來控制元素執行或綁定許多行為。

大家都有看過以手在上方控制的「線人偶」吧?我們可以把綁在人偶身上不同部位的點,想像是 HTML 裡的這些用v-開頭與{{ }}雙花括號,再把人偶上方、手在控制的十字木條想像成 Vue 的實例物件,這些人偶的動作與行為,基本上都是 Vue 實例裡的資料、方法或實例生命週期鉤子在控制。這樣比喻或許可以比較簡單且容易理解這些用v-開頭與{{ }}、雙花括號和實例物件的關係。

Vue 模板語法 -- {{Mustache}}

要用{{ }}雙花括號之前,先來了解一個這個{{ }}模板語法可以裝什麼,只要{{JS 表達式}}這樣記是不是清楚很多?怎麼分辨 JS 的表達式?可以看看六角卡斯伯在這次鐵人賽的這篇JavaScript 表達式觀念及運用 - JS Expression,會釐清許多語法的觀念喔。

我們也可直接說{{ }}雙花括號的模板語法是 Mustache 「表達式(Expression)」,而能控制{{ }}模板語法裡面的那條線的另一端,就是用於渲染 Vue 實例物件裡的 data物件的內容語法。
重點:

  • 表達式{{}}雙花括號只能從「Vue 實例」物件的data中獲取數據資料;
  • 表達式{{}} 中不能出現「陳述式(Statement)」,比如:流程控制 if () {} / 迴圈for(var i =0 ...) {}/ 宣告var num = 1/ 其它像是importexport...等等;
  • 表達式{{}} 不能在 HTML 元素的屬性上起作用;

所以{{ }}模板語法可以裝:

<div id="app">
    <h1>{{ message }}</h1>
    <p>{{ 1 + 2 }}</p>
    <p>{{ ['a', 'c', 'b'] }}</p>
    <p>{{ ['a', 'c', 'b'].join('-') }}</p>
    <p>{{ msg + ' -- Paris' }}</p>
    <p>{{ age > 3 ? '大班' : '幼幼班' }}</p>
    <p>{{ Math.random() }}</p>
</div>
<script>
  const vm = new Vue({
    el:'#app',
    data:{
      message:'Bonjour !',
      age:3
    }
  })
</script>

直接來看執行結果吧![CodePen]](https://codepen.io/tsuifei/pen/YzqJYVm)

今天是週末,放鬆一下吧~明天就來說說我們定義的 Vue 實例裡會裝什麼,明天見囉~

每日一句法文有益身心:Bon appétit ! 繃.那.杯踢! 祝你有好胃口(吃飯開動前說)


上一篇
Vue.js 的基礎使用與雙花括號表達式
下一篇
Vue 實例介紹
系列文
Déjà-vu ? 要 Vue 過才知道30

1 則留言

0
mangoSu
iT邦新手 5 級 ‧ 2020-09-27 18:12:26

vue 起來~/images/emoticon/emoticon12.gif

我要留言

立即登入留言