2020it邦鐵人賽-30天手把手的Vue.js教學 Day1-什麼是Vue.js?

tags: Vue.js ItIron2020

前言

第一次參加鐵人賽,首先還是不可免俗地說一下為什麼會選擇這樣的主題參賽,一直以來每當我需要學習新東西的時候,it邦的資訊總是常常成為我的得力助手之一,裡面許多的資源都幫了我這個菜鳥工程師解決了不少問題。所以這次決定參賽時,心裡有一部分就是抱著希望自己也能多少回饋一下這個社群,讓更多人可以藉由中文化的資源來學習,不用因為語言的關係導致受限,再加上我還真的很喜歡協助他人學習的感覺,這樣的目的會讓我更有動力完賽😁。希望藉由這次參賽,讓未來的一些學習者可以少走一點彎路,同時也加深自己對vue的一些理解,其中如果有任何錯誤、建議也請各位前輩儘管提出,任何回饋都是歡迎的👍

到底什麼是Vue.js? 可以吃嗎?

Vue.js是一個開源的前端框架,好了,說明完畢。說實在我不是在講幹話,當然其中還有許多歷史和淵源,有興趣的可以自行了解,但我相信大家好奇的不是這個,而是在這麼多前端框架中,為什麼我們要選擇vue.js? 這個問題就問得很好,vue.js被認為有以下的優點,讓它得以成為近年來受歡迎的前端框架之一。


  • 撰寫良好的官方文件
  • 輕量、高彈性
  • 簡潔的語法
  • 較低的學習曲線
  • 穩定的社群成長

最後一點可以從stack overflow提供的survey看出來,以下為該調查中最受喜愛的前端框架排名,在幾年前vue還在挺~後面的。

Most-loved frameworks, libraries, and tools.
Most-loved frameworks, libraries, and tools.

聽起來很不錯,那我該如何開始呢?

vue當然也有在本地建立專案的做法,不過在許多常見的線上編輯器(codepen、JSfillde)也有著設置好的vue環境讓你可以輕鬆地使用,以下介紹幾種常見的使用方法!

  1. 利用CDN載入

你可以在你的HTML檔案中直接載入vue的cdn,就像你在使用fontawesome或是jquery一樣!

<!-- development version, includes helpful console warnings -->
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
  1. 直接利用線上編輯器

或是你可以像我剛剛提到的,直接利用線上編輯器設置好的環境開始使用,這系列的文章會使用codepen中的vue pen進行範例demo。

首先請你到codepen的官方網站,點選左邊的pen下拉選單,你應該會看到以下的畫面

vue pen

點選紅筆標示的地方,看到以下的畫面就表示你順利建立一個新的vue專案囉!

vue pen finished

  1. 利用vue-cli建立本地專案

vue-cli是個可以快速打造vue專案的工具,在製作side-project時相當的方便,會在未來的系列文中介紹,這邊就容我先賣個關子吧!

hold on

知道方法了,那馬上來打造我們的第一個vue專案吧!

請你藉由上方的教學,在codepen中建立一個vue專案,並將一些預設的程式碼刪除,只留下上方的

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

以下下方的

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!'
    };
  }
};
</script>

style的部分可以保留沒關係,它不影響我講解,就饒它一命唄! 如果你懶得做這些刪除,那你可以直接fork這個pen作為起始。

畫面中你應該可以看到一行Welcome to Vue!,神奇的是它與下方script內的message的值一模一樣! 這不可能是巧合吧! 你想得沒錯,這是vue一個核心的概念,在vue中我們可以輕易的將js的值渲染至你想要的DOM節點,你可以用兩個大括號在template中表示變數,它會自動去script中尋找是否有對應的值進行渲染!

<h1>{{message}}</h1>

現在我們動一點小手腳,請你將L12的message改為任何你想要的值

message: '30天內教你學會vue.js'

你應該會發現畫面中的文字也同樣更動了! 雖然很無趣,但這就是我們的今天的牛刀小試了:D 下一篇文章我們會開始介紹vue instance(每一個vue檔案你都可以先視為一個vue的實體)中的data & methods屬性,並了解這些屬性如何與template中的DOM元素進行互動,敬請期待!

參考資源

此文章同時發布於it邦,也可以去那邊看,排版更為精美一些:D

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s