iT邦幫忙

vue相關文章
共有 351 則文章

達標好文 技術 [筆記][Vue.js]打開Vue.js世界的大門(1)-第一次接觸及認識基本用法

其實這次標題有點騙人,因為對小弟來說也不算第一次接觸了,但也只是前幾天讀過官方文件的等級而已,所以如果有些地方解釋的不對,還請各位大大留言告訴我了,在此小弟感激...

鐵人賽 Modern Web DAY 1

達標好文 技術 01. Nuxt.js 小跑起步

前言 寫文是為了將最近用 Vue.js + Nuxt.js 的使用細節整理,供日後參考。順序也許跟官網不太一樣,請多多包涵。 官方範例其實已涵蓋的大量情境,若是...

技術 [筆記][Vue.js]打開Vue.js世界的大門(4)-讓v-model雙向綁定抓住你的資料

HI!記得我們在第一篇的時候有提過如何將Vue.js的資料綁定到View上面嗎?如果忘記的話可以看一下以下最簡單的範例: HTML <input id=&...

鐵人賽 Modern Web DAY 3

技術 #3: Nuxt.js 簡介 & 學習連結分享

上一篇,在不知道 Nuxt 是什麼的情況下,使用create-nuxt-app建立了一個 Nuxt 應用。 今年 9/21 在倫敦舉辦的 Vue Confere...

技術 vue安裝起手式(一)

首先架構Vue環境 # 最新稳定版 npm install vue # 全局安装 vue-cli npm install --global vue-cli #...

技術 [筆記][Vue.js]打開Vue.js世界的大門(6)-讓watch來當你的眼睛!

HI!大家好啊!緊接著computed之後,今天再來學習新的Vue.js的屬性watch吧! watch 這是什麼? 如果我們要在一個表單上的值發生改變的時候...

鐵人賽 Modern Web DAY 11

技術 Day11 - Vue & Axios 封裝

今天換來做 VUE 先前已經將ROUTER & MATERIAL套用進來, 這一次想實作封裝HTTP的功能,如 VUE官方推薦,我們要用axios。 簡...

鐵人賽 Modern Web DAY 4
30天學會Vue.js 系列 第 4

技術 Day 4 Vue物件

vue的基本介紹與語法前三天已經介紹完了,基本過程是先載入vue.js,然後在html裡面寫templete,在js裡面宣告vue物件綁定至dom並寫入data...

鐵人賽 Modern Web DAY 3

技術 03. Nuxt.js 怎麼處理 SSR 問題?擔任什麼角色?

關於 Universal Rendering 前一篇提到,原本前後端的 View 各自分開 隨著前端漸漸吃重,為了讓畫面邏輯不需要分散各處,有人提出新的架構 -...

鐵人賽 Modern Web DAY 3
VueJS 從前端到後端 系列 第 3

技術 Component 基本入門 Day 2

部落格同步刊登 [IT 鐵人賽] Component 基本入門 Day 2 現今算是 Web Component 當道,如果撇除 HTML5 原生的元件,那麼其...

鐵人賽 Modern Web DAY 1

技術 [Day 1] Vue Quasar Framework介紹與安裝

Quasar 是一款基於Vue.js開發的UI Framework。可以讓你輕鬆就搞定網站介面之餘還不失美觀,更重要的是他還能讓你輕鬆就做好RWD,除此之外還能...

Vuex 學習筆記 系列 第 18

技術 [Vue.js] Vuex 學習筆記 (18) - 開發工具 Vue.js devtools

Vue.js devtools Vue.js devtools 是一個在開發時很實用的 Chrome 套件,我們可以在裡面檢查組件的資料,也可以查看 Vuex...

鐵人賽 Modern Web DAY 7

技術 07. Nuxt 頁面怎麼切會更好?以電商登入頁為例

本來打算介紹 Nuxt 版面依功能劃分、由哪些區塊組成。 想到六角學院才比完《甜點電商PK賽》,現成切好的版面很好找,參賽選手也不少,拿來說明與練習再適合不過。...

鐵人賽 Modern Web DAY 25

技術 vue & vuex 25 - Login - II (router auth、rouetr beforeEach)

昨天我們做了一個登入頁面,可是使用者還是可以任意轉跳到其他頁面,今天我們要讓其它頁面加上驗證項目,讓登入頁面變成我們的大門。 今天目標: 設定 router...

技術 vue router-link + 引入bootstrap4 (四)

將連結改成router-link 若增加tag標籤為button,屬性則變為按鈕 <li> <router-link :to="...

技術 vue filter(七)

使用filter過濾器 const app = new Vue({ el: "#app", data: { friends:...

技術 如何在vue裡引進自己所撰寫的sass檔案(二)

首先在src資料夾裡,建立styles資料夾,並新增style.sass 開啟main.js,加入require('./styles/style.sass')...

鐵人賽 Modern Web DAY 4

技術 04. Nuxt 環境建立

這篇寫常用情境 產生新 Nuxt 專案 Vue.js SPA 寫一半,得追加 SSR 產生完整 Nuxt 專案 入門寫 Vue.js,新專案用 Vue-cl...

鐵人賽 Modern Web DAY 26

技術 vue & vuex 26 - 使用 SASS 管理 CSS - webpack sass-loader

今天我們將改變 CSS 引用方式,改為使用 SASS 開發,管理我們的 CSS,因此 style tag 也可以寫 SCSS 囉! 今天目標: 移除從 st...

鐵人賽 Modern Web DAY 2

技術 02. 講歷史,話說 SSR...

什麼叫做 SSR? Server-Side Rendering,頁面由後端渲染,HTML由後端產生     傳統做法整頁HTML不就完全由後端產生嗎? 使用...

技術 LPI (Linux Professtional Institute)

Linux認證 據IDC 日前表示,Linux使用人口正急速增加中,到公元 2004 年光是在美國,這塊市場就成長到3億1千1百萬美金。因此,可想而知當前Lin...

鐵人賽 Modern Web DAY 6

技術 06. Nuxt Routing 規則入門

前一章我們新增 /pages/product.vue 編輯即可在 http://localhost:3000/product 預覽頁面。 pages/ --|...

技術 [筆記][Vue.js]打開Vue.js世界的大門(3)-既然長得差不多,就用迴圈吧!

終於輪到迴圈了(其實也才剛開始三篇而已XD)!說到迴圈大家一定不陌生,除了最初的起點Hello!world!以外,應該就是九九乘法表了,那當迴圈融入前端框架時,...

技術 [筆記][Vue.js]打開Vue.js世界的大門(9)-事件綁定的後綴修飾符Part1篇

HI!其實第一篇已經簡單介紹過事件綁定了,但是我看他官方文件上面好像還有很多可以講,就在這裡把他獨立出來了XD 再講新的之前先複習一下之前學過的綁定方式: H...

鐵人賽 自我挑戰組 DAY 3
Vuex 學習筆記 系列 第 8

技術 [Vue.js] Vuex 學習筆記 (8) - actions 的核心概念

Actions Actions 類似於 mutations,但仍然有些不同: Action 提交(commit)的是 mutations ,而不是直接變更 s...

技術 [筆記][Vue.js]打開Vue.js世界的大門(5)-太複雜的事情就交給computed吧!

嗨啊!大家好!經過昨天耍了一天廢後,今天繼續闖蕩Vue世界吧! 孔子說「溫故而知新」所以在進入正文之前我們先簡單複習一下資料綁定,看能不能因此獲得新的知識XD...

鐵人賽 自我挑戰組 DAY 16
前端新手筆記-Vue.js 系列 第 16

技術 Day16 Vue Component(元件) props、emit介紹

本文同步發表於Andy's Blog 前言 昨天認識了Component特性後,我們今天要來介紹Component之間如何傳遞資料 元件溝通方式 元件與元件...

鐵人賽 Modern Web DAY 4

技術 #4: nuxt.config.js

這篇稍微介紹一下 nuxt.js 的設定檔: nuxt.config.js。 可以將以下專案 clone 下來,了解一下基本目錄結構。 github repos...

鐵人賽 Modern Web DAY 8

技術 08. Nuxt 客製《甜點電商》SEO 基本資訊

客製 SEO 資訊 上一章讓登入頁有了基本樣貌,但需要 SSR 是為了解決兩大問題 SEO SMO 具體怎麼做? 前端最基本的,在 埋對應的 Meta T...

鐵人賽 自我挑戰組 DAY 3
Vuex 學習筆記 系列 第 17

技術 [Vue.js] Vuex 學習筆記 (17) - 帳號登入 pluging

前言 使用 Vuex 時我們一定會想到説可以應用在帳號登入,紀錄一些使用者的資訊,這邊我們來試著做一個帳號登入的功能。 Login Page 首先建立一個登入...