iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
0
Modern Web

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

Vue.js 的基礎使用與雙花括號表達式

人生中如果沒有雙花括號,那我們之間就無法有秘密了。

對 Vue.js 有了基本的背景了解後,一定會手癢開始想動手做吧!今天就直接來使用 Vue.js 吧!

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

  • Vue.js
  • 渲染目標 Div
  • Vue 實例物件

將下來我們實際來操作一遍:

1.在文件裡載入 Vus.js

使用 Vue.js 的起手式,是要先以 CDN 的方式將 Vue.js 載入我們的.html文件裡。載入的版本有兩種選擇:「開發環境版本」或「生產環境版本」,初學建議使用「開發環境版本」。

// 開發環境版本,包含了有幫助的命令行警告
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
或者:

// 生產環境版本,優化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 在 HTML 裡建立 DIV 元素

.html文件的 HTML 裡,以 ID 屬性建立一個 div區塊,這個區塊也就是之後 渲染的目標,這裡的 ID 為 APP。

3. 在 裡建立一個物件實例

.html文件的 HTML 裡的<script>區塊,以 New 的方式建立一個 Vue 的物件實例,在裡面設定初始值

<body>
  <div id="app">
  <!-- Vue 渲染的目標範圍 -->
  </div>

  <script>
      // 用來初始化 Vue 實例
      const vm = new Vue({

      })
  <script>
<body>

Vue 物件實例的基本要素

上面的例子我們已經把最基本的部分寫好了,接下來的只要在這個物件中,將初始資料與渲染目標的連結寫好,最基本的使用 vue 框架的網頁就寫好了!

在這個物件中,有兩個屬性(Key)是一定要的: el: 這個物件要渲染的目標、data:渲染在畫面上的初始值。而data:物件裡資料,將會透過 Vue 的模板語法:雙花括號{{ Mustache }}來與data:裡的資料做聯繫。

<body>
  <div id="app">
  <!-- 資料綁定 -->
  {{ message }}
  </div>

  <script>
      const vm = new Vue({
        // 綁定渲染目標
        el: '#app',
        // 初始資料
        data: {
          message : 'Bonjour !',
        }
      })
  <script>
<body>

現在我們從瀏覽器就可以看到{{ message }}所對應的message : 'Bonjour !' ,這個值 Bonjour ! 已經對應渲染到畫面裡了。

每日一句法文有益身心:Bon voyage ! 繃.窩訝舉 --> 旅途愉快!


上一篇
Vue.jS 的二三事
下一篇
Vue 的雙花括號表達式的用法
系列文
Déjà-vu ? 要 Vue 過才知道30

1 則留言

0
RURU Tseng
iT邦新手 4 級 ‧ 2020-09-18 22:47:02

Bon voyage! /images/emoticon/emoticon42.gif

tsuifei iT邦新手 5 級 ‧ 2020-09-21 17:39:55 檢舉

/images/emoticon/emoticon24.gif

我要留言

立即登入留言