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

第 12 屆 iThome 鐵人賽

DAY 3

Modern Web

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

12th鐵人賽 vue.js

tsuifei

2020-09-18 18:03:05

1467 瀏覽

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

對 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 ! 已經對應渲染到畫面裡了。