iT邦幫忙

vue學習筆記相關文章
共有 161 則文章
鐵人賽 自我挑戰組 DAY 7
與Vue相遇 系列 第 7

技術 Day07-toDoLis實做

聽完Vue的介紹後,既然這麼好用,趕緊回到家,利用Vue來練習toDoList: 因為框架的原因,寫起來十分得心應手。在代辦事項及完成事項來說,只需要透過v-...

鐵人賽 自我挑戰組 DAY 4
跟 VueJS 認識的30天 系列 第 5

技術 [DAY05]跟 Vue.js 認識的30天 - Vue 的屬性綁定

很多時候我們會利用 class 來切換樣式,這時候其實就可以利用 Vue 的指令 v-bind 來動態切換 class 。 v-bind:class 屬性綁定...

鐵人賽 自我挑戰組 DAY 6
與Vue相遇 系列 第 6

技術 Day06-Virtual DOM與畫面渲染(二:效能探討)

聽Vue這麼說,實在是感到心動。但我的問題是,客戶資料非常龐大,前端render真的能夠快速處裡這些數據嗎? Vue再次用銳利的眼神看了我一眼,並說道:我們的服...

鐵人賽 自我挑戰組 DAY 5
與Vue相遇 系列 第 5

技術 Day05-Virtual DOM與畫面渲染(一:基本探討)

對於Vue的資料管理上,我想我是了解了。但客戶不只是在數據上做大量的修改,畫面上也會因為數據的改動而造成建置和維護的複雜性,是否有更好的辦法可以有效處裡呢? V...

鐵人賽 自我挑戰組 DAY 4
跟 VueJS 認識的30天 系列 第 4

技術 [DAY04]跟 Vue.js 認識的30天 - Vue 的資料偵聽(watch)

之前也都沒使用過 watch ,所以趁這個機會好好了解一下它。 如何使用偵聽屬性(watch) 基礎範例 const vm = new Vue({ el:'...

鐵人賽 自我挑戰組 DAY 4
與Vue相遇 系列 第 4

技術 Day04-v-model雙向綁定

說了v-bind,綁定了數據資料,使的我們在管理資料上面更加容易。但怎麼看都是單方面的,並且除了在標籤屬性上面有做資料管理外,這到底還能夠做什麼呢? Vue:其...

鐵人賽 自我挑戰組 DAY 3
跟 VueJS 認識的30天 系列 第 3

技術 [DAY03]跟 Vue.js 認識的30天 - Vue 的資料計算(computed)

在講計算(computed)之前,先來說說 Vue 自己擁有的屬性 $data: 以[DAY02]跟 Vue.js 認識的30天 - Vue 的模板語法(Tem...

鐵人賽 自我挑戰組 DAY 3
與Vue相遇 系列 第 3

技術 Day03 v-bind屬性綁定

Vue:既然知道了初步的概念,首先我們來看看v-bind屬性綁定吧: v-vind綁定class,如下: <body> <div...

鐵人賽 自我挑戰組 DAY 2
與Vue相遇 系列 第 2

技術 Day02 CDN-Vue初始化

疫情影響,既有業務轉型。平常有在寫程式的我,突然被老闆叫去一個專案,開發客戶平台。 起先,還是挺興奮的,直到了解客戶需求後,先是愣住。因為內容表格增刪查找較多,...

鐵人賽 自我挑戰組 DAY 2
跟 VueJS 認識的30天 系列 第 2

技術 [DAY02]跟 Vue.js 認識的30天 - Vue 實體的生命週期(Lifecycle Hooks)及模板語法(Template Syntax)

學了 VueJS 一段時間,總是會不定期的回頭看下面這張圖: 這張圖從上到下就是 Vue 實體產生的一系列過程,並且在過程中不同階段,會運行一些生命週期鉤子(...

鐵人賽 自我挑戰組 DAY 1
跟 VueJS 認識的30天 系列 第 1

技術 [DAY01]跟 Vue.js 認識的30天 -前言

其實早在8月就有想過要參加這一次IT鐵人幫,但是那時候還深陷在六角學院「 JS 作品直播班 」的作業泥淖中,也一直不確定自己的主題要訂甚麼,後來才決定寫 Vue...

技術 Vue Cli 3 部屬到 Github 上 ( windows )

Vue Cli 部屬到 Github 上,研究了許久,以下這裡做步驟筆記,這裡是以 windows 系統為主,需要先安裝 Git 工具,連結放在最下面: 在桌...

鐵人賽 自我挑戰組 DAY 1
與Vue相遇 系列 第 1

技術 Day01-初見Vue(前言)

身處金融業的我,從未想過有天還能在工作上,返回開發工程師的行列。一直以來,對於JS的喜愛依舊不減,假日時,偶爾還會開著電腦,寫寫JS。但對於框架語言,從未接觸。...

技術 2020 六角學院 - JS 實戰班心得文章

當初為什麼報名這堂課? 買了許多線上課程,要鞭策自己每天都學習,還要能整理筆記,對於我這種毅力不夠的人,簡直就是買來放心安的。 因此自己的轉職道路才遙遙無期,...

技術 Vue cli 使用

vue create 專案名稱 新增專案 Props(父 => 子) 父畫面 <ProductCard :product=&qu...

技術 Vue 之 Vue.filter()

Vue.filter() 可以用做單一值的修改,例如:為數字加上千分位逗號、轉換時間格式...等 基本的結構會如下: <div id="app&...

技術 Vue & Typescript 學習

vue & typescript 這天小E 提及到幾個問題 Vue 的 Single-File Component 混合HTML / Code 內容放一...

技術 Vue 之溫習 component 的世界 - slot

網頁上難免有些內容,會需要差不多的架構,僅替換部分的內容,簡單來說,我們前面講到的元件拿來重複利用,只是我們要替換掉部分的內容,讓元件可以達到最佳的利用化,這時...

技術 Vue 之溫習 component 的世界 - 3

props 是從 Vue 實體傳送資料進去元件內,若是元件想要改變 Vue 實體本身的資料,這時候就會需要 emit 了 props 是一個方法,但 emit...

技術 Vue 之溫習 component 的世界 - 2

元件內的內容並非固定,有時候我們會透過 Ajax 撈資料回來再渲染到頁面上,而通常我們撈回來的資料都會存放到 Vue 實體的 data 內,這時候元件想要讀取...

技術 Vue 之溫習 component 的世界 - 1

最近又再重複的溫習了 Vue 的 component,希望能重新幫自己整理思緒 component 俗稱元件,在網頁我們每一個區塊內容都可以封裝成一個獨立的元件...

技術 Vue 之溫習 - 使用 is 動態切換元件

在某些時候,我們會希望內容在特定的情況下才顯示,例如頁籤的效果,雖然可以透過 v-if 來判斷,並顯示元件 但元件一多的時候,反而不是一個理想的方法,所以才有...

技術 vue element UI input 自動提交問題

資料來源:https://blog.csdn.net/weixin_42762988/article/details/84951265 文章內附詳細程式碼~~...

技術 從Vue 的新手走路 - computed 學習筆記

建立虛擬屬性-由狀態組合而成 從 文件上面看 計算屬性的結果會被緩存,除非依賴的響應式屬性變化才會重新計算。注意,如果某個依賴(比如非響應式屬性)在該實例範疇...

技術 [學習筆記] Vue 專案在ie下卻跑不動了 白屏!!!

[參考文章] https://blog.csdn.net/u014054437/article/details/82983259 因專案問題,遇上了強大ie!...

技術 [學習筆記] Vue router監聽-解決router-push到相同component需重新渲染問題

教學文章(參考 导航完成后获取数据):https://router.vuejs.org/zh/guide/advanced/data-fetching.html...

技術 Day36 - 實戰之引入 Bootstrap套件,客製化樣式

準備好之後,接下來我們要來引入 Bootstrap 套件了,參考 鐵人賽Day28 - Vue Cli 我們除了可以在 App.vue 的 style 引入 B...

技術 Day35 - 實戰之開啟新專案

這裡開始是實戰的學習紀錄,首先我們要先創建一個新專案,採用 Vue Cli 安裝辦法參考這裡 鐵人賽Day28 - Vue Cli 接著進行 vue route...

技術 Day34 - 自定義切換路由方法

在 vue router 文件中有提到一些方法,可以讓我們使用 參考資訊 我們先在 menu.vue 內新增兩個 <a> 連結,一個是切換到指定頁面...

技術 Day33 - 同一個路徑載入兩個頁面元件

如果我們想要在 App.vue 執行兩個 <router-view> 是否可行 ? 答案是可以的 我們先到 App.vue 在原先的 <rou...