上篇我們為 Navbar 設定好路由之後,接下來的需求則是希望能夠讓選取效果更為明顯,優化使用者體驗: hover 項目時,字體顏色顯示為紅色 ⇒ 跟隨游標移...
在前一篇中,我們已經了解父組件向子組件傳遞資料了,接著來認識子組件向父組件的溝通吧 子組件向父組件溝通: $emit 子組件(傳送) this.$emit(&q...
大家應該也發現到了,目前點選 Navbar 項目並沒有任何反應;但是點選公版中的 Home 和 About 時: 點選 About,網址跳轉至「 http:/...
本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeS...
在上一篇的內容中,已經介紹到了該如何寫一個組件並完成應用了,現在再繼續進入更深一點的運用吧~對於 Vue 的實體來說,我們稱之為 父組件,而在裡面所使用的稱之為...
承上篇,談到 v-for,就要說說它的最佳良伴——key。 v-for 必須綁定代表唯一值的 key 若未綁定 key 值,Terminal 會直接報錯,表示「...
當我們有時候某個功能的重複運用性較高,但每次都還要再寫一個一模一樣的功能,是不是很麻煩呢?那麼這時我們就可以好好利用 Vue 組件的功能,可以讓我們只寫一次,就...
目前為止,我們成功引入了 BootstrapVue 的元件 Navbar,也調整了樣式和內容。 突然發現少放了一個重要項目,於是趕緊補上一個 <b-nav...
本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeS...
成功渲染出 BootstrapVue Navbar 元件之後,接著來將預設樣式改成自己喜歡的專案色調和排版吧!依據文件介紹,我們可以利用修改 property...
讓我們接續昨天的模板語法介紹吧,昨天講了v-once跟v-html,今天來說說屬性跟JavaScript 表達式! Attribute Mustache語法不能...
本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeS...
雖然之前提過的 計算屬性 computed,就有監聽的功能了,不過有時候我們仍需要一個屬於自己定義的監聽器,這時就可以使用到 watch 這個更通用的方法了~點...
day-14 我們說明了 , 如何將 Vue 的 Component 轉換成 Web Component day-17 說明了 , 如何在 React 專案中...
上篇透過簡單的 vue add 指令就完成了 BootstrapVue 安裝和引入,其引入 bootstrap-vue plugin 的方式其實是備妥所有 Bo...
除了資料的操作, Vue 也還可以跟 網頁樣式 有關係,除了內容可以用 v-if 做切換,擁有會員資格的是不是也可以讓它的介面更華麗呢? 趕快來看看~ v-bi...
昨天我們講到了Vue的實體還有實體內會有的一些物件,今天就來用範例看看它內外互相響應的過程吧٩(ˊᗜˋ )و 數據和方法 當Vue實例被創建時,它會將data中...
本篇開始終於要進入解決需求的前置作業了!首先需要讓網站有個基本的置頂導覽列,讓我們有請 BootstrapVue 出場~直接交給 BootstrapVue 幫你...
本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeS...
Vue 裡面的事件處理,使用的方式會跟一般 JavaScript 的用法相近,下面跟著一起看吧~ 事件處理 v-on 使用的方式為 例1.<button...
當我們拿到一個現有的 Web Component 時 , 如果直接在 Vue 專案中使用會抱錯 今天來解決這個 issue 吧 ! 利用 vue-cli...
當我們有很多重復的架構,內容卻不一樣,以舊有無框架的開發,我們可能就需要手動一筆一筆的刻出來,更進步一點,會透過複製+貼上~再來更改內容(像是成績單,訂單,或者...
延續上篇最後提到 Webpack 設置了別名「@」來取代路徑「/src」,然而在模版語法中,「@」則是另外的用途,因此一開始先分辨清楚各自的定義,之後就能運用自...
天亮了 昨晚是平安夜 關於迷霧森林故事 Rock you,Rock you,Rock you 敲家門沒人應沒的 Rocky找不到先行離開招集會的父母有點著急沿著...
當我們有區分,在某種條件下看到的會是 A 畫面,某一些條件下看到的會是 B 畫面...的情形,例如每個會員權限不同所可以使用的功能不同就是一個簡單的例子,這時就...
繼上篇觀察整個專案資料夾結構之後,接著來觀察子層 components 資料夾裡的 HelloWorld.vue 和父層 views 資料夾裡的 Home.vu...
本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeS...
前面花了大把的時間 , 來建立跟 Vue 很像的 Web Components 其實 Vue CLI 也有提供建立 web-component 的方法 下方來說...
甚麼是計算屬性? 甚麼時候用計算屬性? 接下來帶大家來看看,也會搭配一些例子~ 甚麼是計算屬性? computed 是 Vue 提供的 計算屬性,它可以幫我們運...
建好專案之後,來看看專案裡已經幫你準備好哪些檔案吧!先大致認識每個資料夾如何分門別類的規則,日後自己在歸檔時也會相對有概念,更方便管理檔案、組織架構。 根目錄層...