Vue.js 快速入門
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可以省略，這兩種寫法是一樣意思的:
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
20會員
161Content count
留言0
查看全部
你可能也想看
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
<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
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
<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