#1 hello Vue 一最簡單vuejs例子 - 30天學會vue系列文 | seansie blog

Jan 14, 2025

好，介紹完vuejs的優點了，大家如果願意點開這個網站，想必是對他蠻有興趣的。

本篇文章將會用 hello world等級的例子來簡單著介紹vuejs的大致使用方法，以及它所需要觀念

。

而vuejs可以簡單地透過 script 標籤匯入，並且直接在中使用，不像react還要操作各種繁複的終端機 npm 之類的，恐怕要嚇跑一堆初學者了，本人就是被嚇跑的那個www。

這時候在第0章所介紹的優點又體現出來了，vuejs的漸進式性質，可以提供比較低的學習曲線。

匯入

在你的 html檔案的之下，加上這個標籤就完成了。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

建立第一個網頁應用程式

先在文字編輯器

加入一個 script標籤，在裡面新增以下內容

<script>
Vue.createApp({
	data(){
		return{
			msg : "hello world"
		}
	}
);
</script>

簡介一下

Vue.createApp 從 Vue 模組中，呼叫 createApp 函數，而參數是元件邏輯，可以簡單想像程這個網頁的大腦
data() 函數可以想像成網頁記憶體，裡面可以儲存必要資料。

接著新增 html 主幹

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	=> vuejs要掛載在這裡
</body>
</html>

對了，這些主幹如果你是用 vscode 的(本人強推)，因為裡面內建 emmet ，可以透過快速簡寫來產生這些，方法如右 : 輸入 : +Tab ，就能產生了。

`{{ }}` 語法介紹

剛剛在第零章有介紹到， vuejs有同步渲染內部物件到外部畫面的功能，那要怎麼用呢，很簡單，還記得剛剛的 data() 記憶體嗎，他就是內部物件的一種。

只要用 {{}} 包住內部物件的名字，例如 {{ msg}} ，就可以把他跟內部物件同步起來。

而外面的 <h1> 標籤代表一級(最大)標題，如下圖所示。

		<h1>hello {{ msg}} </h1>

div 標籤介紹

剛剛完成了及時渲染之後，不過不覺得缺了甚麼嗎， vuejs 不會通靈，他需要你來指令需要渲染的區域在哪裡，舉第零章老闆和秘書的例子，就算聘請了祕書，還要讓他來公司上班才能真的幫到老闆嘛!。

而這個指定區域的術語叫做掛載 mount

而掛載的位置是以標籤為單位的，你可能會想說，剛剛不是有 <h1> 標籤嗎?那可就錯了，因為還記得第0章提到，現代化的網頁都有數以萬計的標籤嗎(不信的話你按下 F12 看看)，怎麼可能一一掛載，而且 vuejs 也只能掛載一個標籤，一定顧此失彼。

更務實的做法是用 <div> 標籤把所有標籤包在一起，就像袋子一樣，不論有多少東西，放進袋子就整體上變成一個東西了。

此外，如果有眾多的div 標籤要怎麼辦(這在網頁開發是很常見的事情喔)，直覺想到的方法就是取名字， HTML 所提供的方法就做 id 跟 class (類別)，語法如下，下面用 class 做為例子， id 亦同。

 <div class="app"></div>

而不論 id 跟 class 在 HTML 中都被稱為屬性，可以簡單理解成html標籤的形容詞，而 class="app" 的 app稱為屬性值。

接著用剛剛完成的 div 標籤把全部需要的標籤包裹進來。

 <div class="app">
 <h1>hello {{ msg}} </h1>
 <h1>你好 {{ msg}} </h1>
 <h1>久仰大名 {{ msg}} </h1>
 </div>

最後回到 <script> 標籤，是裡面有 createApp 的那個，在最後加上

<script>
	Vue.createApp({
		data(){
			return{
				msg: "Vuejs"
			}
		},
	}).mount(".app")
</script>

註: . 代表 class 、 # 代表 id ，例如 .app = <div class=”app”> 、 #app = <div id="app">

然後打開這個 html 檔案，如果是用 vscode 的可以按下 F5 執行

如果沒有意外的話就會出現以下畫面

常見錯誤示範

如果內含 vue 程式碼的<script> 標籤在 div#app 標籤之前，例如下面錯誤例子，就會出現以下錯誤

<!DOCTYPE html>
<html lang="en">
<head>
	中略....
	<script>
		Vue.createApp({
			data(){
				return{
					msg: "Vuejs"
				}
			},
		}).mount(".app")
	</script>
</head>
<body>
	<div class="app">  // 目標掛載標籤
		<h1>hello {{ msg}} </h1>
	</div>
</body>
</html>

vue.global.js:2263 [Vue warn]: Failed to mount app: mount target selector ".app" returned null.
warn$1	@	vue.global.js:2263
normalizeContainer	@	vue.global.js:12270
app.mount	@	vue.global.js:12190
(anonymous)	@	vue.html:15

這個原因就是網站是由上而下讀取的，如果該標籤比 div.app 還早被讀到，當然沒辦法存取 div#app (因為根本還沒讀到阿) ，所以就會出現錯誤。

人非聖賢孰能無過，在使用 vuejs 的時候也會常常出現錯誤，學習怎麼獨立處理錯誤也是很重要的，本人預計會寫一篇文章專門講解。

匯入

建立第一個網頁應用程式

{{ }} 語法介紹

div 標籤介紹

常見錯誤示範

`{{ }}` 語法介紹