iT邦幫忙

vue.js相關文章
共有 1413 則文章
鐵人賽 Modern Web DAY 28

技術 不只懂 Vue 語法:試說明有哪些方式可以全域註冊方法?

問題回答 全域註冊的方法,意思是每個 Vue 元件都能使用的方法。在 Vue 2 會有以下方法: Vue.prototype plugin mixin...

鐵人賽 Modern Web DAY 14

技術 14. Nuxt 透過 asyncData 動態產生頁面內容

這篇主題講「Nuxt 如何用 asyncData 動態產生頁面內容」 用來補充頁面細部設定 asyncData 在執行順序中,排在頁面渲染(render)前,回...

鐵人賽 Modern Web DAY 4

技術 [Day 4] Vue Quasar Framework 頁面Layout介紹

今天就讓我們直接開始吧~! 前面幾天我們有執行過部署的指令了 不過我們這邊再複習一下 $ quasar init helloworld $ cd hellow...

鐵人賽 Modern Web DAY 8
Vue.js 30天隨身包 系列 第 8

技術 Day08 - [Directives] 資料綁定(Data Binding)

推薦好用的工具:Vue.js devtools 這篇介紹開始之前,最近發現一個開發vue時還不錯用的chrome插件,想推薦大家使用,這個插件是Vue.js d...

鐵人賽 Modern Web DAY 16
勇者鬥Vue龍 系列 第 16

技術 Vue.js Core 30天屠龍記(第16天): 事件處理

Vue.js 中可以使用 v-on 監聽 DOM 事件,當事件觸發時可以叫用設定的函數或是 JavaScript 陳述式做相關的處理。 使用 JavaScrip...

鐵人賽 Modern Web DAY 9

技術 09. Nuxt 頁面元件細部設定

Nuxt 頁面元件跟 Vue File 哪裡不同? Nuxt Routing 自動映射介紹過,/pages 的 Vue File 對應各個頁面。 雖然寫法一樣,...

鐵人賽 Modern Web DAY 15

技術 15. Nuxt 透過 fetch 動態產生內容,並在 Client 使用

這篇主題講「Nuxt 如何用 fetch 動態產生頁面內容」 用來補充頁面細部設定 複習一下 Nuxt 收到請求後的處理流程 asyncData 和 fetc...

達標好文 技術 Vue.js - 來做一個 Plugin 吧!

我們平常寫 code 遇到複雜的功能時,總會先找找有沒有人寫過類似的插件,或者要為自己專案擴充一些功能時也可以使用插件,那麼插件該如何寫呢?官網其實也有說明,以...

鐵人賽 Modern Web DAY 24
Nuxt 3 學習筆記 系列 第 24

技術 [Day 24] Nuxt 3 搜尋引擎最佳化 (SEO) 與 HTML Meta Tag

前言 選擇使用 Nuxt 3 作為網站開發框架的開發者,多數都是為了要使用 SSR 或 SSG 來加強對 SEO 的優化設置,這篇將會講述 Nuxt 提供的幾個...

鐵人賽 Modern Web DAY 23
Nuxt 3 學習筆記 系列 第 23

技術 [Day 23] Nuxt 3 實作部落格 - 頁面的導航守衛與切換效果

前言 前一篇,我們完成了新增文章的頁面與流程,在網站開發的過程中,有些頁面是具有瀏覽的限制,例如,我們不希望一般的使用者能進到管理者頁面專用的頁面進行操作,這時...

鐵人賽 Modern Web DAY 2
VueJS 從前端到後端 系列 第 2

技術 VueJS 快速入門 Day 1

部落格同步刊登 [IT 鐵人賽] VueJS 快速入門 Day 1 VueJS 算是最近比較熱門的項目之一,官方文件也相對齊全。我們這裡要看的目前還是以 V...

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

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

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

鐵人賽 Modern Web DAY 6

技術 不只懂 Vue 語法:Vue 3 如何使用 Proxy 實現響應式(Reactivity)?

問題回答 Vue 3 會為 data 建立一個 Proxy 物件,並在裏面建立 getter 和 setter 來取值和更新值,藉此實現響應式。因此不用直接操作...

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

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

鐵人賽 Modern Web DAY 4

技術 記帳程式 (04):用 Vue CLI 3 建置專案

技術架構 以下簡單列一下這個專案的技術架構規劃,也有可能會再調整,一開始會先以前端為主,後期有需要會加上後端系統。 前端 Vue CLI 3 Ele...

鐵人賽 Modern Web DAY 19

技術 【D19 - 用Vue實作網頁】請GET我然後POST我出去吧!

HTTP Request 一直以來都是一個很大的課題,他也牽扯到了API的概念,所以這篇基本上我們就要好好聊聊API是甚麼? Vue 要怎麼用到HTTP re...

徵才 【網飛訊科技】誠摯招募 ASP.NET C# MVC 軟體工程師

我們是網飛訊科技 提供優質工作機會其他軟體開發領域高手,請查看官網最新職缺對各類職務有任何問題歡迎加Line詢問,ID:@uby0617e 【所需技術】 熟悉...

鐵人賽 Modern Web DAY 25

技術 25. Nuxt Plugin 如何讓 Axios 更好用 (下)

上一篇解釋 Nuxt 插件 (Plugins)用於管理特定執行環境的程式碼片段,並在 Nuxt App 自動載入、執行 Plugin 使用 一貫簡單風格,需要載...

技術 [Vue.js] 擴充元件(Component)

以 ElementUI 的 Button 為例 這是 ElementUI 的 Button預設沒有提供這樣的樣式該如何做到呢? 建立一個新元件,命名為 ElBu...

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

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

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

鐵人賽 Modern Web DAY 12

技術 [重構倒數第19天] - i18n什麼的交給前端來處理吧(二) Vue3 載入Vue-i18n

前言 該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗...

鐵人賽 Modern Web DAY 24

技術 24. Nuxt Plugin 如何讓 Axios 更好用 (上)

複習一下 asyncData 動態產生頁面,作業得透過 axios 拉 product api,藉此產生商品頁面的情境 安裝 Axios $ yarn add...

鐵人賽 Modern Web DAY 19

技術 19. Nuxt Middleware,請求與回應間的中盤商

本篇要回溯「Nuxt 請求處理流程」,介紹 validate() 前一步驟 - Middleware Middleware 中文翻譯為 中介軟體、中間件、中介...

技術 Vue 畫面處理 & API 串接 自學筆記

接續前個文章 API的基本操作 https://ithelp.ithome.com.tw/articles/10232465我們直接來透過實戰練習如何串接API...

鐵人賽 Modern Web DAY 4
Vue.js套件介紹及範例 系列 第 4

技術 vue-i18n (1) - Getting started

vue-i18n (1) - Getting started 多國語系套件 Github kazupon/vue-i18n 範例(使用常數值之語系字典) J...

鐵人賽 Modern Web DAY 22

技術 不只懂 Vue 語法:為何 v-for 的 key 必須是唯一值?v-for 與 v-if 能否同時使用?

問題回答 v-for 的 key 必須是唯一值,才可以讓 Vue 在更新 v-for 所產生的列表時,能準確更新節點。相反,如果使用 index 作為 key,...

鐵人賽 Modern Web DAY 1

達標好文 技術 Day 01:「排版神器 Tailwind CSS?」 - 和兔兔一起快速上手漂亮的元件開發

嗨各位大家好,我是搋兔~! 相信大家一定都對我很陌生吧! 先來自我介紹一下,我是兔兔教的兔兔,我在「Tailwind CSS 臺灣」的職位是兔兔,而兔兔們的工...

鐵人賽 Modern Web DAY 2

達標好文 技術 Day 02:「Tailwind CSS?那好吃嗎?」- 淺談 Tailwind 的核心概念

嗨各位! 我們終於度過了昨天那篇漫長的業配文了,很快的我們就要開始進入主餐部分。 雖然你們已經把刀叉拿好了,但是在上主餐之前,必須提醒一下剛吃完前菜的你們:...

鐵人賽 Modern Web DAY 28
Nuxt 3 學習筆記 系列 第 28

技術 [Day 28] Nuxt 3 渲染模式 (Rendering modes) 與網站使用體驗核心指標 (Core Web Vitals)

前言 Nuxt 3 作為一個完整的全端框架,也兼具了開箱即用的特性,當你選擇 Nuxt 3 開發網站準備建構正式環境的專案時,可以根據使用方式與解決情境,選擇是...

鐵人賽 Modern Web DAY 10
用範例理解 Vue.js 系列 第 10

技術 用範例理解 Vue.js #10:Conditional Rendering

今天是鐵人賽第 10 天,我開始了另一個自我挑戰賽,題目為「三十天學 LodashJS」,也是不知道哪來的勇氣發佈自己寫的糞Code在網路上。我認為要多認識強者...