iT邦幫忙

vue學習筆記相關文章
共有 333 則文章
鐵人賽 自我挑戰組 DAY 10

技術 Day10 一轉任務果然不是好吃的果子:將房間資料show到網頁畫面上(1)

本文同步發表於斜槓女紙部落格:Day10 將房間資料show到網頁畫面上(1) 承接昨天的進度,看到串接success的反饋訊息後,想說趁著這個運氣一口氣把...

鐵人賽 自我挑戰組 DAY 9
新手初探 Vue 系列 第 9

技術 鐵人賽Day09 - 表單與資料雙向綁定

這篇要來介紹,基本常用的一些表單元素,與 Vue 的資料綁定時會如何做我們一樣先把 Vue 的架構寫出來,只是這次在 data 內新增多個變數來存放不同的表單元...

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

技術 Day9 Vue指令V-if、V-show介紹

前言 昨天介紹完V-for,我們應該對於常見V-for用法有更深入的認識。如:顯示過濾資料,也介紹了使用V-for上需要注意地方,如:不要把V-for跟V-if...

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

技術 Day8 Vue 指令V-for介紹

前言 昨天介紹了V-bind用法,今天我們就來介紹v-for吧!本文同步發表於Andy's Blog 參考資料:官網v-for介紹練習檔案 V-for 用途:...

鐵人賽 自我挑戰組 DAY 9

技術 Day9 村長大大,罷~託讓我一轉:What is API?

本文同步發表於斜槓女紙部落格:Day9 What is API? 今天要進入房間列表的切版,進行到這兒要遇到對我來說比較具挑戰性的項目:串接API。 這次...

鐵人賽 自我挑戰組 DAY 8
新手初探 Vue 系列 第 8

技術 鐵人賽Day08 - 動態加上 class

這裡來介紹在 Vue 動態加上 class一樣先把 Vue 的架構先撰寫出來,而目標是想點擊按鈕時會在 .box 自動加上 rotate 這個 class,再點...

鐵人賽 自我挑戰組 DAY 21
vue.js 30天學習軌跡 系列 第 21

技術 Day21 vue.js - 元件插槽Slot

插槽可幫助您在components 中放置內容,允許以嚴格的父子關係以外的其他方式來組合components。 單個插槽(Single Slot) 使用&lt...

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

技術 Day7 Vue 指令V-bind介紹

前言 上一篇我們介紹了Vue指令:V-bind、V-on,那今天我們要學習另外一個Vue指令:V-bind本文同步發表於Andy's Blog V-bind...

鐵人賽 自我挑戰組 DAY 7
新手初探 Vue 系列 第 7

技術 鐵人賽Day07 - 修飾符

先前有講到 v-on 和 v-bind 指令v-on 用在事件上,v-bind 用在綁定標籤的屬性上而這些指令其實是有修飾符可以用的,意指縮寫。 拿前面章節的程...

鐵人賽 自我挑戰組 DAY 20
vue.js 30天學習軌跡 系列 第 20

技術 Day20 vue.js - 使用 $emit 向外傳遞

前幾篇講到的都是父组件使用 prop 傳遞數據给子组件,因此如果要透過子組件操作資料並異動父組件的話,這時就要透過 emit 事件通知父層。 demo thi...

鐵人賽 自我挑戰組 DAY 19
vue.js 30天學習軌跡 系列 第 19

技術 Day19 vue.js - props(4)

單向數據流(One-Way Data Flow) 所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定:父級 prop 的更新會向下流動到子組...

鐵人賽 自我挑戰組 DAY 6
新手初探 Vue 系列 第 6

技術 鐵人賽Day06 - v-on 綁定頁面行為

接下來要來介紹,如何綁定事件,以 click 事件來舉例: <div id="app"> <input type=&q...

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

技術 Day6 Vue 指令V-on、V-model介紹

本文同步刊載於Andy's Blog 前言 昨天我們簡單介紹了Vue的兩種模板語法:分別為插值(Mustache語法)跟指令v-開頭。而今天我們將先介紹V-...

鐵人賽 自我挑戰組 DAY 7

技術 Day7 切版任務(三):首頁畫面搭配ScrollReveal,網頁畫面動次動(2)

本文同步發表於斜槓女紙部落格:切版任務(三):首頁畫面搭配ScrollReveal,網頁畫面動次動(2) 嗨!又見面了,今天會持續將HTML標籤轉換成Vu...

鐵人賽 自我挑戰組 DAY 6

技術 Day6 切版任務(二):首頁畫面搭配ScrollReveal,網頁畫面動次動(1)

本文同步發表於斜槓女紙部落格:Day6 切版任務(二):首頁畫面搭配ScrollReveal,網頁畫面動次動(1) 今天終於要正式開始切版囉! 再看一次設計...

鐵人賽 自我挑戰組 DAY 5
新手初探 Vue 系列 第 5

技術 鐵人賽Day05 - v-for & v-if

這篇要來介紹 v-for 和 v-if 這兩個指令相當於 JavaScript 的 for 迴圈跟 if 判斷式一樣先把 Vue 的基本架構寫出來: <d...

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

技術 Day5 Vue模板語法、V-text、V-html、V-once介紹、Vue指令概述

本篇文章同時刊載於Andy's Blog 前言 上一篇文章中我們介紹了Vue的生命週期,了解Vue背後是如何把資料渲染到畫面上,也知道如何在不同life h...

鐵人賽 自我挑戰組 DAY 4
新手初探 Vue 系列 第 4

技術 鐵人賽Day04 - v-bind 動態屬性指令

接下來要來介紹一個新的指令 v-bind,它是用來綁定 HTML 標籤的屬性照慣例,Vue 的架構如下: <div id="app"&...

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

技術 Day4 - Vue 生命週期介紹

前言 上一篇文章中,我們已經為大家簡單介紹Vue Instance,並且透過範例讓大家初步了解該如何使用Vue 。而這篇文章我將為大家介紹Vue元件生命週期。...

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

技術 Day3 Vue Instance(實體)介紹

上一篇文章我們簡單介紹了Vue的幾個重要特性(漸進式框架、MVVM、元件、載入方式)。若不清楚的話,可以點擊上篇觀看Day2 - Vue 基本介紹(漸進式框架、...

鐵人賽 自我挑戰組 DAY 4

技術 Day4 新手村的探險:專案環境設定和指令(Directives)

本文同步發表於斜槓女紙部落格:Day4 新手村的探險:專案環境設定和指令(Directives) 嗨!今天終於要打開VSCode準備開始撰寫專案了!先讓大...

鐵人賽 自我挑戰組 DAY 3
新手初探 Vue 系列 第 3

技術 鐵人賽Day03 - 試著把 Vue 的資料呈現在頁面上

前面一篇我們建立應用程式的時候把資料呈現在頁面上的方法是使用兩個大括號包覆的方式,如下: <div id="app">...

鐵人賽 自我挑戰組 DAY 3

技術 Day3 工欲善其事,必先利其器:編輯器擴充套件設定+引入Vue.js

本文同步發表於斜槓女紙部落格:Day3 編輯器擴充套件設定+引入Vue.js 嗨~今天要來說說我習慣使用的開發環境,由於我的mac已經設定好了,捨不得打掉重...

鐵人賽 自我挑戰組 DAY 2
新手初探 Vue 系列 第 2

技術 鐵人賽Day02 - 在 Vue 建立應用程式

Vue 的引入跟 jQuery 一樣,這裡就不多贅述,版本一樣有壓縮版本跟開發人員版本。當引入好 Vue 之後,我們就可以先來建立第一個應用程式。 首先我們先在...

鐵人賽 自我挑戰組 DAY 2

技術 Day2 了解你的敵人:Vue.js是什麼?

本文同步發表於斜槓女紙部落格:Day2 了解你的敵人:Vue.js是什麼? 首先,我大膽假設證,在看文章的你知道JavaScript是什麼東東。 什麼?你...

鐵人賽 自我挑戰組 DAY 1
新手初探 Vue 系列 第 1

技術 鐵人賽Day01 - 新手初探 Vue 序

這是我第一次參加鐵人賽,先說目標吧,我想藉由這樣的比賽來提升自己研究技術的能力。過去幾個月的我,把這樣一個重要的能力流失掉了。 我還記得我剛開始接觸 web 的...

鐵人賽 自我挑戰組 DAY 1

技術 Day1 前言:頭腦一熱就...

本文同步發表於斜槓女紙部落格:Day1 前言:頭腦一熱就… 故事是這樣開始的 嗨!我是鍾小呆。靠著自學自修,繼踏入設計坑之後,又邁入前端坑,目前是一個前端...

技術 Element UI-[Select] 全選

遇到問題 在使用 Element UI 的 Select 想要在多選的時候有全選的功能 解決方法 這裡我在我自己的 communitys 加入一個全選...

技術 Vue.js [watch]: 物件屬性如何用 watch

遇到問題 在使用 Vue 的 watch 的時候,一般都是用這樣的 watch:{ text:{ handler(newValue){...

技術 Element UI-[Select] :Value

遇到問題 在使用 Select 的時候遇到了一個問題是如果我的 Value 想要讓它是 Object 該怎麼做呢?下面的程式碼看起來是可以運作也把 :valu...