iT邦幫忙

vue學習筆記相關文章
共有 332 則文章
鐵人賽 自我挑戰組 DAY 16
前端新手筆記-Vue.js 系列 第 16

技術 Day16 Vue Component(元件) props、emit介紹

本文同步發表於Andy's Blog 前言 昨天認識了Component特性後,我們今天要來介紹Component之間如何傳遞資料 元件溝通方式 元件與元件...

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

技術 Day 20 Vue Component(元件)-props.sync 溝通方式

本文同步發表於Andy's Blog 前言 昨天介紹完this.$parent、this.$child方法後,突然想到沒有介紹到.sync這個語法糖。OK,...

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

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

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

跟 VueJS 認識的30天 系列 第 12

技術 [DAY12]跟 Vue.js 認識的30天 - Vue 模組資料傳遞(`props`)

props 的命名及使用 HTML attribute 是大小寫不敏感的,所以必須要注意 prop 的命名跟使用。 命名 可以使用 PascalCase (首...

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

技術 Day 26 Vue-router簡介

前言 昨天介紹完Vue CLI2、3如何建立後,我們今天來認識一下Vue-router怎麼使用吧! Vue Router簡介 Vue Router就是由前端模...

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

技術 Day 15 Vue Component(元件) 介紹、建立方式、特性

本文同步發表於Andy's Blog 前言 今天終於要進入Vue Component單元勒(撒花),而在接下來幾天我們會來慢慢介紹元件的相關內容,那我們就開...

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

技術 [DAY09]跟 Vue.js 認識的30天 - Vue 的資料雙向綁定

在別人都完成30天鐵人賽的路上,我真的是太難了QQ,我才發現我一個禮拜的產量竟然只有1-2篇,在看文件的時候才發現自己之前練習 Vue 遇到的問題,真的是絕大部...

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

技術 Day17 Vue Component(元件) - props使用注意細項(1)

本文同步發表於Andy's Blog 前言 昨天介紹了元件與元件之間的溝通方式:props in,emit out,而我們今天要針對Props操作上細部介紹...

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

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

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

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

技術 Day 13 Vue Filter 過濾器介紹

本文同步發表於Andy's Blog 前言 昨天我們將computed、methods()、watch,三個屬性做了一個簡單比較。而今天我們將要介紹另外一個...

跟 VueJS 認識的30天 系列 第 11

技術 [DAY11]跟 Vue.js 認識的30天 - Vue 的模組註冊(`component`)

模組的命名 一個模組的命名關係到我們是否能快速地知道這個模組的功能是甚麼,同時可以避免跟現有的 HTML 標籤相衝突。 在Vue.js - 风格指南中, com...

技術 Element UI-[Select] :Value

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

技術 Element UI-[Table] 篩選資料

遇到問題 想要透過 Input 來篩選 Table 裡面的資料 解決方法 Element UI 很方便直接使用 Vue 的 Scoped slot...

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

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

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

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

技術 Day26 vue.js - 使用mixin將多個組件混入

mixin Mixins是為Vue組件分發可重用功能的靈活方法。mixin對象可以包含任何組件選項(生命週期、data、computed、 methods.....

跟 VueJS 認識的30天 系列 第 13

技術 [DAY13] 跟 Vue.js 認識的30天 - Vue 模組自定義事件(Custom Events)

每次寫筆記都在想要怎麼寫得讓大家(包含未來的我)看得懂,所以每次都要寫很久,但好像自己的內容有點太無聊了 XD 。 自定義事件( Custom Events )...

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

技術 Day28 vue.js - Vue cli 3.0 環境建置

介紹 Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統 通過 @vue/cli 搭建交互式的項目腳手架。 通過 @vue/cli + @vu...

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

技術 鐵人賽Day16 - Vue.js 基礎元件認識

在 Vue 裡面,我們可以使用元件來動態掛載 HTML而元件到底是什麼? 如果以 HTML 來說的話,就會類似像是 Header Content 這樣一個區塊一...

鐵人賽 自我挑戰組 DAY 20

技術 Day 20 : Vue-cli 建立開發環境與新增專案

Vue-cli 3 建立開發環境與新增專案 基礎介紹基本上就到一個段落,接下來最後的這幾天會介紹一些 Vue 的生態。首先介紹該如何建立 Vue 的開發環境與新...

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

技術 Day19 Vue Component溝通($parent、$children)

本文同步刊載於Andy's Blog 前言 這兩天介紹完Vue第一種元件之間的溝通方式,props in ,emit out,並且針對props使用上也做了...

技術 Element UI-[Select] 預設值設定

遇到問題 在做生日的年月日時,因為我們接觸的客群年齡層大概是民國 40~60 年的人,所以希望可以把“年”這個的預設值調整成西元 1971 年、民國 60 年...

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

技術 Day29 vue.js - Vue cli 3 UI安裝介面及項目結構介紹

Vue cli 3 UI安裝介面 Node 版本要求Vue CLI需要Node.js 8.9或更高版本(推薦8.11.0+)。 使用以下指令進行安裝 np...

技術 Element UI-[Table] 欄位文字太長解決方式

遇到問題 上班時會遇到一些小問題,也透過這樣一點一滴的把自己學的分享給大家,如果有誤歡迎大家指正 Table 欄位裡面文字過長問題 解決方法一 一...

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

技術 Day016-Component組件-傳值(props和$emit)

Vue:我們透過組件,來模塊化我們的功能。我知道你很好奇,到底如何從根模塊,傳值給組件,使組件可以渲染資料於table中,對吧?如果,仔細觀察昨天的程式碼,你會...

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

技術 Day22 Vue Component(元件) is動態切換元件

本文同步發表於Andy's Blog 前言 昨天介紹完event bus,那我們今天來了解如何用is動態切換元件 is動態切換元件介紹 用途:最常使用在頁籤...

鐵人賽 Modern Web DAY 27

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day27. Vue3 ref & reactive 小練習

說了那麼多,感覺還是有點模糊~ 沒關係,我可能也差不多 ( 哈哈 所以還是透過實作練習,讓自己更了解,看見那更明朗的天空吧 目標 : 透過串接 API 接收取到...

跟 VueJS 認識的30天 系列 第 14

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

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

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

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

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

鐵人賽 自我挑戰組 DAY 18

技術 Day 18 : Vue extend

Vue extend 當我們有數個元件的內容很相近,只有少部分內容不一樣的時候,我們可以使用 extend 來建立重複的部分,來看下面範例: <div i...

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

技術 [DAY08]跟 Vue.js 認識的3天 - Vue 的事件監聽

在 JS 中有監聽器 addeventListener ,而 Vue 也有自己一套 DOM 元素監聽器的指令 v-on , Vue 也配置了幾個修飾符來替代像是...