定義路由
首先先來定義路由，先把上一篇寫的 home.vue 定義在根路由。
打開 src/router/index.ts，在 routes 內定義
path 定義 url，component 定義要指向哪個 vue 頁面，component:()=>import('@/components/hom

學習

職場產業

健康與情感

定義路由

install element-plus

full import

icon

導入 UI component library

使用元件

<h2 class="draft-block draft--h2" name="header-9ebv9">定義路由</h2>
<div class="draft-block draft--p left">首先先來定義路由，先把上一篇寫的 home.vue 定義在根路由。</div>
<div class="draft-block draft--p left">打開 <span style="font-weight: bold; ">src/router/index.ts</span>，在 <span style="font-weight: bold; ">routes</span> 內定義</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">{     path: '/',     name: 'home',     component:()=&gt;import('@/components/home.vue') }</pre></pre>
<div class="draft--imgNormal draft-block"><div><div style="height:1626px" class="image-block-prerender" data-src="https://images.vocus.cc/7d4a9cda-b31c-402c-8ec1-c989739fdbb3.png" data-width="1626" data-height="1150" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">path</span> 定義 <span style="font-weight: bold; ">url</span>，<span style="font-weight: bold; ">component</span> 定義要指向哪個 vue 頁面，<span style="font-weight: bold; ">component:()=&gt;import('@/components/home.vue')</span> 裡面的 <span style="font-weight: bold; ">@</span> 指的是 <span style="font-weight: bold; ">src/</span> 路徑</div>
<h2 class="draft-block draft--h2" name="header-ar0tr">導入 UI component library</h2>

v-bind
v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數，舉個例子
可以改寫成這樣
最後效果是一樣的，在標籤內 v-bind 可以簡寫成 :
v-model
上一篇已經提到了，就是可以透過網頁上的操作去改變資料的值，比方說表單、輸入欄等等。
v-for
迴圈，

[6] Vue 指令

首先先來定義路由，先把上一篇寫的 home.vue 定義在根路由。

打開 src/router/index.ts，在 routes 內定義

{     path: '/',     name: 'home',     component:()=>import('@/components/home.vue') }

path 定義 url，component 定義要指向哪個 vue 頁面，component:()=>import('@/components/home.vue') 裡面的 @ 指的是 src/ 路徑

在寫頁面之前，先來介紹 Vue 頁面結構。
首先先在 src/components 底下建立一個 home.vue
跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。
template
就是相當於原生 html 檔

付費限定文章
[5] 寫一個 Vue 頁面

定義路由

導入 UI component library

以行動支持創作者！付費即可解鎖

付費限定文章[5] 寫一個 Vue 頁面

定義路由

導入 UI component library

以行動支持創作者！付費即可解鎖

付費限定文章
[5] 寫一個 Vue 頁面