Vue.js 快速入門
閱讀時間約 2 分鐘
Vue 2 Options API寫法: data(), methods
data() method
續上篇，這邊修改一下HomeView.vue的code。
- Before:
- After:
在頁面最下方顯示 name: Vic，data method直接回傳name變數，在template中可以直接用{{ name }}將變數顯示出來。
- 結果如下:
methods 屬性
續上述程式碼，改成下拉選單onChange，修改name的值:
- 一開始在data() method中設定name=Vic，所以一開始會看到name: Vic，直到下拉選單onChange，使用this.name把value換成下拉選單current value。
- 值得一提的是，如果沒有data() method把name return的話，即使在changeValue method中使用this.name來改變值，也不會被render到網頁上，但把this.name console.log出來值是有變的。
- v-on:change可以簡寫成@change:
v-model
將上述程式碼，改成用V-Model來做雙向資料綁定，可以達成一樣的效果。
- 好處是不用自己寫onChange method，程式碼可以精簡化。
v-for, v-bind
繼續修改上述code，實務上data會從後端來，必定會需要用到for loop(v-for)，v-bind則是用在html屬性上。
- 加上v-bind:key是為了讓vue在排序的時候，有比較好的效能。
- v-bind可以省略，這兩種寫法是一樣意思的:
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
<template>
<div id="charge">
<el-card class="box-card">
<ul class="msg-box">
<li>
<h4>充值</h4>
</li>
<li>
<template>
<div id="queryAcc">
<!-- 由於Element-UI官方支援的ICON圖標比較少，這裡我們自訂一個貨幣圖標-->
<i class="el-icon-xxx"/><br/>
<div>
<span>金額</span>
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Introduction: In today's digital landscape, the demand for exceptional web development services continues to soar.
Vue.js 基本介紹
Vue.js 是個漸進式 JavaScript 框架 (Progressive JavaScript Framework)，用於建立用戶界面。被設計成逐步增強的框架，可輕鬆整合到現有項目中，或從頭構建新的應用程序。
Vue.js 的特點
1. 輕量級：Vue.js 的核心庫非
最近在把 Tailwind CSS 加入我的技能樹中，其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具
但是我其實對美工比較沒那麼大的興趣，我對功能、效能、安全比較感興趣，所以後端、架站、DevOps、一些安全防護玩了一圈，現在來加強我的排版功力
在寫頁面之前，先來介紹 Vue 頁面結構。
首先先在 src/components 底下建立一個 home.vue
跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。
template
就是相當於原生 html 檔
專案建好了，那先來講 Vue 的專案架構
詳細內容很多，所以我挑重點講
public
index.html
public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
前言
Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。
javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一
State management
首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts
Login
所有頁面每隔一段時間自動刷新 token
Logout
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
<template>
<div id="charge">
<el-card class="box-card">
<ul class="msg-box">
<li>
<h4>充值</h4>
</li>
<li>
<template>
<div id="queryAcc">
<!-- 由於Element-UI官方支援的ICON圖標比較少，這裡我們自訂一個貨幣圖標-->
<i class="el-icon-xxx"/><br/>
<div>
<span>金額</span>
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Introduction: In today's digital landscape, the demand for exceptional web development services continues to soar.
Vue.js 基本介紹
Vue.js 是個漸進式 JavaScript 框架 (Progressive JavaScript Framework)，用於建立用戶界面。被設計成逐步增強的框架，可輕鬆整合到現有項目中，或從頭構建新的應用程序。
Vue.js 的特點
1. 輕量級：Vue.js 的核心庫非
最近在把 Tailwind CSS 加入我的技能樹中，其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具
但是我其實對美工比較沒那麼大的興趣，我對功能、效能、安全比較感興趣，所以後端、架站、DevOps、一些安全防護玩了一圈，現在來加強我的排版功力
在寫頁面之前，先來介紹 Vue 頁面結構。
首先先在 src/components 底下建立一個 home.vue
跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。
template
就是相當於原生 html 檔
專案建好了，那先來講 Vue 的專案架構
詳細內容很多，所以我挑重點講
public
index.html
public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
前言
Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。
javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一
State management
首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts
Login
所有頁面每隔一段時間自動刷新 token
Logout