iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0

今天要開始寫點簡單的vue,首先先說明為什麼要用資料綁定!
現今的網站開始使用component觀念,也就是將會重復使用到的網頁結構寫成一個「元件」,在需要用到它時,將它引用進頁面裡,再靠「資料」去控制需呈現的內容,這麼做可有效提高工作效率,並且讓維護更輕鬆,只要更新資料就能更新內容,接下來幾天裡我們就能開始體會這個優點了。

現在先從資料綁定開始嘗試,開起昨天完成的vue網站,並找到src資料夾下的 App.vue檔,這個檔就是我們的首頁,為了讓練習畫面清處點,可先將範例內容刪除,如下:

<template>
  <div id="app">
    
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style></style>

vue檔內容解說

  • <template>是我們放html標籤的地方,它有個要注意的限制!就是一定要用一個標籤包起所有內容,因此我留下<div id="app">做為包起所有內容的父層標籤。
  • <script>是寫vue程式的地方。
  • export default是默認導出模塊,這樣就能引用裡面的內容出來使用。
  • <style>當然就是用來寫css的地方了!

範例實做

簡單的介紹完,現在就來試著綁一句文字內容進去吧!
我先在<div id="app">寫入一個簡單的標籤<h1></h1>,這是我要放文字的地方!
接著寫入vue,如下範例:

<template>
  <div id="app">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        title:'vue好簡單'
      }
    }
  }
</script>

<style></style>

實做解說

首先先說明我在<script>內寫入的內容:

  • name:指的是「為組件命名」,可不寫,但有名字的組件會有更清處的警告信息。
  • data()是我們要放資料的function(函數)。
  • return裡面是要回傳給我們的內容。
  • title是我自已為這組資料取的名字,當然後面就是它的內容了,記得使用單引號包起文字!

接下來說明標籤<h1></h1>內的{{ title }}

  • {{ }}是用來表示「綁定資料」,裡面就是剛剛我為資料取的名字,簡單說就是我要把資料內容放在裡。

再來依照昨天教的如何將網站起起來(起一個伺服器)並開起網頁,你就能看到成品囉!超簡單的是不是?
https://ithelp.ithome.com.tw/upload/images/20181015/20111956sU7GtqC4I8.png


上一篇
Vue[04]-安裝Vue ui
下一篇
Vue[06]-資料雙向綁定
系列文
網頁設計靠 Vue.js 轉前端30

尚未有邦友留言

立即登入留言