iT邦幫忙

vue相關文章
共有 792 則文章
鐵人賽 Modern Web DAY 12
Vue.js 什麼意思 系列 第 12

技術 Day 12:Router 繞去哪-active-class & exact-active-class

上篇我們為 Navbar 設定好路由之後,接下來的需求則是希望能夠讓選取效果更為明顯,優化使用者體驗: hover 項目時,字體顏色顯示為紅色 ⇒ 跟隨游標移...

鐵人賽 Modern Web DAY 17

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day17.父子組件的溝通-$emit

在前一篇中,我們已經了解父組件向子組件傳遞資料了,接著來認識子組件向父組件的溝通吧 子組件向父組件溝通: $emit 子組件(傳送) this.$emit(&q...

鐵人賽 Modern Web DAY 11
Vue.js 什麼意思 系列 第 11

技術 Day 11:Router 怎麼繞-router-link、router-view

大家應該也發現到了,目前點選 Navbar 項目並沒有任何反應;但是點選公版中的 Home 和 About 時: 點選 About,網址跳轉至「 http:/...

鐵人賽 Modern Web DAY 13

技術 D12 - 「數位×IN×OUT」:建立控制組件

本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeS...

鐵人賽 Modern Web DAY 16

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day16.父子組件的溝通-props

在上一篇的內容中,已經介紹到了該如何寫一個組件並完成應用了,現在再繼續進入更深一點的運用吧~對於 Vue 的實體來說,我們稱之為 父組件,而在裡面所使用的稱之為...

鐵人賽 Modern Web DAY 10
Vue.js 什麼意思 系列 第 10

技術 Day 10:v-for 註定綁個 key

承上篇,談到 v-for,就要說說它的最佳良伴——key。 v-for 必須綁定代表唯一值的 key 若未綁定 key 值,Terminal 會直接報錯,表示「...

鐵人賽 Modern Web DAY 15

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day15.組件介紹

當我們有時候某個功能的重複運用性較高,但每次都還要再寫一個一模一樣的功能,是不是很麻煩呢?那麼這時我們就可以好好利用 Vue 組件的功能,可以讓我們只寫一次,就...

鐵人賽 Modern Web DAY 9
Vue.js 什麼意思 系列 第 9

技術 Day 09:遍歷資料好便利-v-for

目前為止,我們成功引入了 BootstrapVue 的元件 Navbar,也調整了樣式和內容。 突然發現少放了一個重要項目,於是趕緊補上一個 <b-nav...

鐵人賽 Modern Web DAY 11

技術 D10 - 「數位×IN×OUT」

本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeS...

鐵人賽 Modern Web DAY 8
Vue.js 什麼意思 系列 第 8

技術 Day 08:深仍可測的元件樣式-Deep Selectors

成功渲染出 BootstrapVue Navbar 元件之後,接著來將預設樣式改成自己喜歡的專案色調和排版吧!依據文件介紹,我們可以利用修改 property...

鐵人賽 Modern Web DAY 14

技術 Day 14. 模板語法Template Syntax – 插值 Attribute、JavaScript 表達式

讓我們接續昨天的模板語法介紹吧,昨天講了v-once跟v-html,今天來說說屬性跟JavaScript 表達式! Attribute Mustache語法不能...

鐵人賽 Modern Web DAY 10

技術 D09 - 打開第一扇窗:建立 Vue Component

本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeS...

鐵人賽 Modern Web DAY 14

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day14.監聽器

雖然之前提過的 計算屬性 computed,就有監聽的功能了,不過有時候我們仍需要一個屬於自己定義的監聽器,這時就可以使用到 watch 這個更通用的方法了~點...

鐵人賽 Modern Web DAY 18

技術 [Day18] - 打包 Element-UI 的 Vue Component to Web Component

day-14 我們說明了 , 如何將 Vue 的 Component 轉換成 Web Component day-17 說明了 , 如何在 React 專案中...

鐵人賽 Modern Web DAY 7
Vue.js 什麼意思 系列 第 7

技術 Day 07:大人更要懂選擇-BootstrapVue 部分引入

上篇透過簡單的 vue add 指令就完成了 BootstrapVue 安裝和引入,其引入 bootstrap-vue plugin 的方式其實是備妥所有 Bo...

鐵人賽 Modern Web DAY 13

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day13.Class 與 Style 綁定

除了資料的操作, Vue 也還可以跟 網頁樣式 有關係,除了內容可以用 v-if 做切換,擁有會員資格的是不是也可以讓它的介面更華麗呢? 趕快來看看~ v-bi...

鐵人賽 Modern Web DAY 11

技術 Day 11. Money money Vue的$$哪裡來-數據和方法

昨天我們講到了Vue的實體還有實體內會有的一些物件,今天就來用範例看看它內外互相響應的過程吧٩(ˊᗜˋ )و 數據和方法 當Vue實例被創建時,它會將data中...

鐵人賽 Modern Web DAY 6
Vue.js 什麼意思 系列 第 6

技術 Day 06:小孩子才做選擇-BootstrapVue 全部引入

本篇開始終於要進入解決需求的前置作業了!首先需要讓網站有個基本的置頂導覽列,讓我們有請 BootstrapVue 出場~直接交給 BootstrapVue 幫你...

鐵人賽 Modern Web DAY 8

技術 D07 - 聽話,給我資料!

本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeS...

鐵人賽 Modern Web DAY 12

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day12.事件處理

Vue 裡面的事件處理,使用的方式會跟一般 JavaScript 的用法相近,下面跟著一起看吧~ 事件處理 v-on 使用的方式為 例1.<button...

鐵人賽 Modern Web DAY 16

技術 [Day16] - 在 Vue 中引入現成的 Web Component

當我們拿到一個現有的 Web Component 時 , 如果直接在 Vue 專案中使用會抱錯 今天來解決這個 issue 吧 ! 利用 vue-cli...

鐵人賽 Modern Web DAY 11

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day11.列表渲染

當我們有很多重復的架構,內容卻不一樣,以舊有無框架的開發,我們可能就需要手動一筆一筆的刻出來,更進步一點,會透過複製+貼上~再來更改內容(像是成績單,訂單,或者...

鐵人賽 Modern Web DAY 5
Vue.js 什麼意思 系列 第 5

技術 Day 05:簡寫好用一直用-v-on、v-bind

延續上篇最後提到 Webpack 設置了別名「@」來取代路徑「/src」,然而在模版語法中,「@」則是另外的用途,因此一開始先分辨清楚各自的定義,之後就能運用自...

鐵人賽 Software Development DAY 6

技術 [第六隻羊] 迷霧森林建築工事 V 哈囉世界安安vue

天亮了 昨晚是平安夜 關於迷霧森林故事 Rock you,Rock you,Rock you 敲家門沒人應沒的 Rocky找不到先行離開招集會的父母有點著急沿著...

鐵人賽 Modern Web DAY 10

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day10.條件渲染

當我們有區分,在某種條件下看到的會是 A 畫面,某一些條件下看到的會是 B 畫面...的情形,例如每個會員權限不同所可以使用的功能不同就是一個簡單的例子,這時就...

鐵人賽 Modern Web DAY 4
Vue.js 什麼意思 系列 第 4

技術 Day 04:.vue 檔三層櫃

繼上篇觀察整個專案資料夾結構之後,接著來觀察子層 components 資料夾裡的 HelloWorld.vue 和父層 views 資料夾裡的 Home.vu...

鐵人賽 Modern Web DAY 6

技術 D05 - 準備前端環境:建立 Vue 開發環境

本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeS...

鐵人賽 Modern Web DAY 14

技術 [Day14] 利用 Vue CLI 3 來建立 Web Components 的 JS 檔

前面花了大把的時間 , 來建立跟 Vue 很像的 Web Components 其實 Vue CLI 也有提供建立 web-component 的方法 下方來說...

鐵人賽 Modern Web DAY 9

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day9.計算屬性 computed

甚麼是計算屬性? 甚麼時候用計算屬性? 接下來帶大家來看看,也會搭配一些例子~ 甚麼是計算屬性? computed 是 Vue 提供的 計算屬性,它可以幫我們運...

鐵人賽 Modern Web DAY 3
Vue.js 什麼意思 系列 第 3

技術 Day 03:觀察資料夾

建好專案之後,來看看專案裡已經幫你準備好哪些檔案吧!先大致認識每個資料夾如何分門別類的規則,日後自己在歸檔時也會相對有概念,更方便管理檔案、組織架構。 根目錄層...