iT邦幫忙

vue學習筆記相關文章
共有 222 則文章

技術 CMoney軟體工程師戰鬥營_Vue框架_Week 15

歐拉~ 本週結束了分領域 雖然每週都為了Web的演示以及龐大的作業量追著跑 但是結束並沒有感到鬆一口氣 因為接下來迎接我的就是 。 。 。 期末專題拉! 真的同...

技術 [Vue2] 從初學到放棄 Day8-綁定Class&&Style

在這個範例裡,是用單一方式去驗證active是否為true <div v-bind:class="{ active: isActive }&qu...

技術 [Vue2] 從初學到放棄 Day7-怎麼變化裡面的值

先用官網裡面的範例 <div id="example"> <p>Original message: "...

技術 [Vue2] 從初學到放棄 Day6-Template Syntax

Template Syntax Vue.js 最主要是基於HTML,在使用JQuery或者Js的時候DOM應該不陌生。 在Vue裡最主要使用的是viturl D...

技術 [Vue2] 從初學到放棄 Day5-生命週期Hooks

Instance Lifecycle Hooks Hooks到底是什麼? 中文解釋就是鉤子,其實Vue就有點像是一個掛著一個的感覺,所以才叫Hooks(很多個所...

技術 [Vue2] 從初學到放棄 Day4-開始使用Vue

Vue Instance var vm = newVue() 使用Vue時,主要概念會是先使用Instatnce,接下來才開始做每一個項目的實作 TODOLi...

技術 [Vue2] 從初學到放棄 Day3-Vue架構

Vue 主要架構 此圖片來源 Vue官方網站 建立compoent // Define a new component called todo-item Vu...

技術 [Vue2] 從初學到放棄 Day2

心血來潮 Vue基於 相容性(ie目前已知...恩) 語意化版本 Semantic Versioning 開發除錯工具 VueTools 到底該如何使用...

技術 Vue出一個展開 / 隱藏 功能

今天練習的主題是用Vue實現列表的展開與隱藏功能 會分為兩個範例讓大家做演練 範例一 先將isShow默認為false 接著在function內判斷當前的列表...

技術 Vue出一個行事曆 Calendar

前言: 此單元較為複雜,若元件觀念較不熟悉的同學,請斟酌觀看 這裡會運用到props、emit、ES6、day.js 讓我們先來觀看成品圖吧 首先我們將行事...

技術 [Vue2] 從初學到放棄 Day1

初心 寫code開始,義大利麵到框架,後端碰到前端。為什麼到現在才寫Vue2呢?最主要的想法,是想把這個技術做個梳理,自學到哪?最後放棄的時候究...

技術 如何取出物件中重複/不重複的值

在上一篇中寫了關於陣列的做法 假如今天我們將陣列改成物件,該怎麼去實現它呢? 先給一個全域值: const person = [ { name: &quot...

技術 如何取出陣列中重複/不重複的值

前幾天在群組剛好看到有人發問: 有一組陣列:[1, 8, 2, 3, 4, 5, 4, 6, 2, 7] 該如何取出不重複值讓陣列變成:[1, 8, 2, 3,...

技術 Promise實際操演

Promise JavaScript 是屬於同步的程式語言,因此一次僅能做一件事情,但遇到非同步的事件時,就會將非同步的事件移動到程式碼的最後方,等到所有的原始...

技術 Cookie與Session

Cookie Cookie 是伺服器(Server)傳送給瀏覽器(Client)的一小片段資料,並請瀏覽器保存起來,以便往後向相同的伺服器發送請求時,附上這 C...

技術 Vue.js實做星星評分功能

今天要來簡單的實做星星評分的功能 在這項單元內也會簡單的講解到props與$emit的傳遞 先附上成品圖: 先在components中新增一個Star的元件...

技術 (JS地下城)九九乘法表 步驟解析

解題思維 const app = new Vue({ el: "#app", data() { return...

技術 $emit 簡單範例分享

先介紹一下Props與$emit的功用 Props:父層若要將內容傳遞進去子層元件就需要用到props這個屬性。 再命名上需要注意的是: 子層Props使用駝峰...

技術 VueCli $Props簡單範例分享

從一張白紙開始學習前端,掐指一算也大概一年了 但對於$Props的應用,一直無法深入理解 可能礙於本身邏輯能力較差的關係,再加上網路的文章教程都是以下這種寫法...

技術 [筆記]vue-cli i18n 多語系應用練習

參考文章: https://medium.com/easons-murmuring/%E5%9C%A8-vue-cli-%E4%B8%AD%E4%BD%BF%E...

跟 VueJS 認識的30天 系列 第 21

技術 [DAY21]跟 Vue.js 認識的30天 - Vue 過濾器(`filter`)

這是一個在 Vue 3 被拿掉的功能,但還是來了解一下。 filter 用途及用法 filter 是讓雙花括號({{}})或 v-bind 表達式中的值通過...

跟 VueJS 認識的30天 系列 第 20

技術 [DAY20]跟 Vue.js 認識的30天 - Vue 插件(Plugin)

這一篇說實在的,現在的我還不能寫出有用的插件,所以這一篇筆記主要也是學習使用別人寫好的插件。 使用插件 Vue.use('PluginName', { //...

跟 VueJS 認識的30天 系列 第 19

技術 [DAY19] 跟 Vue.js 認識的30天 - Vue 自定義指令(`directive`)

在粗淺的看過這一章時,覺得 Vue 真的有好多功能啊,目前的我似乎還是沒辦法很熟用 Vue 的每項語法,只希望未來在遇到各種問題時,我能有印象可以使用哪種語法。...

跟 VueJS 認識的30天 系列 第 18

技術 [DAY18]跟 Vue.js 認識的30天 - Vue 混入(`mixin`)

混入(mixin)似乎也是個初學 Vue 比較少被用到的功能,但還是照順序的了解一下。 基礎運用 在模組中如果有重複出現的模組 option 內容,就可以透過...

跟 VueJS 認識的30天 系列 第 17

技術 [DAY17]跟 Vue.js 認識的30天 - Vue 過渡(轉場)及動畫效果下篇(`<transition-group>`) - 多個元素的過渡及列表過渡

這一篇就來接續寫完 Vue 過渡及動畫的內容啦!希望能順利寫完我的 Vue 筆記。 多個元素的切換轉場 以後就用 .v-* 跟 .transitionName-...

跟 VueJS 認識的30天 系列 第 16

技術 [DAY16]跟 Vue.js 認識的30天 - Vue 過渡(轉場)及動畫效果上篇(`<transition>`)

先看上圖來了解 Vue 將動畫進入跟離開這 2 種階段,而在進入跟離開階段又分別配置了 3 種狀態 — 初始狀態(進入前、離開前)、進行中狀態、結束狀態(進入...

跟 VueJS 認識的30天 系列 第 15

技術 [DAY15]跟 Vue.js 認識的30天 - Vue 動態模組(Dynamic Components)

這次寫的內容是之前都沒使用過的,所以就盡量讓自己有概念,希望之後能使用到。 使用 v-bind:is 來切換模組 切換模組的基本語法 <component...

跟 VueJS 認識的30天 系列 第 14

技術 [DAY14]跟 Vue.js 認識的30天 - Vue 模組插槽(`slot`)

最近在 youtube 找到一個學習 webpack 很好用的教學影片,所以正努力的學習 webpack 中,一個不小心就太沉迷在新技術的練習了,導致有點忽略...

技術 Vue ⑅:v-bind 動態綁定 HTML 屬性

如標題 (⑅•ᴗ•⑅) v-bind 可以動態綁 HTML 屬性、將資料傳遞到元素上。   幾個重點 ( 官方文件參照 ★ ) v-bind 可以直接縮寫成...

技術 Vue ⑅:將資料呈現在畫面上

Vue Data 呈現於畫面上有以下幾種方法: {{ }}:神奇的雙大括號 v-text:跟神奇大括號一樣的效果,但是寫在標籤裡 v-once:綁定的標籤只會...