前面一篇我們建立應用程式的時候把資料呈現在頁面上的方法是使用兩個大括號包覆的方式，如下: <div id="app">...
Vue：設定基本路由，可以拆解成以下步驟： 定義模板 template 配置模板路線(routes)(每一條路線，都會對應到相應的component；而這邊的...
在某些時候，我們會希望內容在特定的情況下才顯示，例如頁籤的效果，雖然可以透過 v-if 來判斷，並顯示元件但元件一多的時候，反而不是一個理想的方法，所以才有 i...
心血來潮 Vue基於 相容性（ie目前已知...恩） 語意化版本 Semantic Versioning 開發除錯工具 VueTools 到底該如何使用...
帶參數 mock mock_adapter.onGet("/todo-list", { params: { id: "1"...
蘇
‧
2021-09-27
Vue：實做部落格最後一步驟，就是修改文章！上一篇已經了解如何將id生成，如此才可以做個別文章上的操作。原先，在Article頁面上，我們可以加上一個標示，讓文...
這裡開始是實戰的學習紀錄，首先我們要先創建一個新專案，採用 Vue Cli安裝辦法參考這裡 鐵人賽Day28 - Vue Cli 接著進行 vue router...
輸出完 header 元件後，試著在 App.vue 引入 TaiHeader.vue。App.vue* <template> <div i...
官方文件：https://cli.vuejs.org/#getting-started Install:先用npm安裝 npm install -g @vue/...
作法 定義好單一元件 (template+區域樣式)，在畫面內引入元件，並根據需求再做調整如：樣板迴圈 v-for、傳資料回元件。不將資料寫在小元件內，是避免後...
Vue：還記得在Vue CLI建置專案時候，也有遇上Vue Router嗎？無論你是使用history mode或hash mode，設置路由，將可以導入到正確...
本文同步發表於斜槓女紙部落格：Day19 閒不下來的史萊姆(二)：網站基本資料統整與footer元件實作 相信跟我一樣在切版的大家都有跟我同樣的經驗，總是...
解題思維 const app = new Vue({ el: "#app", data() { return...
在這個範例裡，是用單一方式去驗證active是否為true <div v-bind:class="{ active: isActive }&qu...
本文同步發表於斜槓女紙部落格：Day 12 喘口氣，打好基礎再繼續攻城掠地 依照先前進度，原本該繼續切版的行程。將房間列表中的房間設施藉由主辦方提供的第二組...
在 vue router 文件中有提到一些方法，可以讓我們使用參考資訊 我們先在 menu.vue 內新增兩個 <a> 連結，一個是切換到指定頁面，...
紀錄一下我的作品當中點擊get details按鈕跳出Popup組件，按下叉叉可關閉Popup組件的操作。 父組件MenusDetails.vue <te...
前面講到 props，它是由外而內傳遞資料的一種屬性不同於 props，emit 是一種事件，而且特性是由內至外有一種情境是，當我們在 Vue 的 method...
Vue Devtools 是一款擴充 Chorme 瀏覽器的套件，只需要按照官網上的指示，在瀏覽器上擴充後可以用來檢查組件的資料。 較常利用 Vue Devt...
props 是從 Vue 實體傳送資料進去元件內，若是元件想要改變 Vue 實體本身的資料，這時候就會需要 emit 了props 是一個方法，但 emit 是...
Vue：隨著你使用vue的狀況，你更應該要了解元件模組化的概念。vue不但在資料上面有所規劃，他在元件模組化也有所強大，讓你可以輕鬆地管理好你的元件。在進行案例...
先建置 Vue 資料的基本狀態: <script> var app = new Vue({ el: '#app', data: {...
在前面我們有稍微提到了 v-for，現在來複習一下，一樣先建構 Vue 的基本結構和資料: <script> var app = new Vue({...
在開發Vue專案時，時常會使用binding的技巧，用以動態變更參數的值，如下 <div class="sensorlist_icon&quo...
Instance Lifecycle Hooks Hooks到底是什麼？ 中文解釋就是鉤子，其實Vue就有點像是一個掛著一個的感覺，所以才叫Hooks（很多個所...
接下來要來介紹一個新的指令 v-bind，它是用來綁定 HTML 標籤的屬性照慣例，Vue 的架構如下: <div id="app"&...
今天來講條件渲染(Conditional Rendering)，也就是可以依照條件變化改變渲染元素的 Directives，會舉例讓大家知道v-if跟v-sho...
前面我們製作了 localhost:8080/#/page 的頁面現在我們要製作 localhost:8080/#/page/child1localhost:8...
Vue：文章為本專案的共用資料。當許多頁面都需要用到時，這個時候使用Vuex就是最佳時機。下圖，可以看到，在其中一個元件下(Add-Article元件)新增文章...
先前有講到 v-on 和 v-bind 指令v-on 用在事件上，v-bind 用在綁定標籤的屬性上而這些指令其實是有修飾符可以用的，意指縮寫。 拿前面章節的程...
Jerry Huang
EdwardXiong
鍾小呆
ㄆㄩ
iThome鐵人賽
看影片追技術