tag vue.js

標籤
貢獻371
404
05:55 PM · Oct 25 ,2025
tuzixiansen_63d4d65909d62 頭像 opentiny 頭像 u_17148819 頭像 u_9849794 頭像 8848_62c77d4bb2532 頭像 u_15967048 頭像 tanking 頭像 refanbanzhang 頭像 kangkaidafangdezi 頭像 kestrel_task 頭像 u_13738137 頭像 u_16307147 頭像

@vue.js / 博客 RSS 訂閱

tanking 頭像

TANKING - Vue3.3.4+Vite使用組合式API開發一個簡單的博客+打包上線

摘要 本次案例是使用Vue3.3.4的組合式API實現一個簡單的博客開發流程和組件使用示例代碼，比較簡單，主要是通俗易懂，瞭解組合式API的使用。 創建項目 Windows cmd創建一個Vue3.2項目（使用cnpm國內鏡像高速構建） 開發 組件 views/Index.vue 首頁組件 components/blogList.vue 博客列表 components/SingleB

vue.js , vite , vue3 , 博客 , Javascript

收藏 評論

opentiny 頭像

OpenTiny社區 - 2025年OpenTiny年度人氣貢獻者評選正式開始

前言 攜手共創，致敬不凡！ 2025年，OpenTiny持續在前端開源領域紮根，每一位開發者都是推動項目共同前行的寶貴力量。從bug修復，到技術探討；從參與開源活動，到輸出技術文章；從使用項目，到參與共建，每一步跨越，都凝聚了開發者的智慧與汗水。 致敬所有在OpenTiny社區裏默默付出、積極貢獻、引領創新的傑出個人，我們正式啓動“OpenTiny年度貢獻者評選”活動！快為你喜愛的人氣貢獻者

vue.js , 前端 , Javascript

收藏 評論

u_14587 頭像

bugouhen - Vue--內置組件 - 前端筆記的個人空間 -

動態組件 語法 有些場景會需要在兩個組件間來回切換，比如 Tab 界面, 可通過component動態組件實現 !-- Home為組件名 -- component is="Home"/component component :is="'Home'"/component !-- currentTab 改變時組件也改變 -- co

vue.js , 緩存 , Css , ci , 前端開發 , HTML , 前端 , Javascript

收藏 評論

jello_5c89ccf558dcc 頭像

Jello - vue項目中安裝和使用vux組件

vux是一款基於Vue構建的移動UI組件庫（https://doc.vux.li/zh-CN/） 1.使用npm安裝vux npm install vux --save 2.安裝vux-loader（vux2必須配合vux-loader使用） npm install vux-loader --save-dev 3.安裝less-loader（用以正確編譯less源碼，否

vue.js , vux , Javascript

收藏 評論

heath_learning 頭像

heath_learning - Mustache底層原理及簡單實現

用過vue的都知道在模板中我們可以使用{{xx}}來渲染data中的屬性，這個語法叫做Mustache插值表達式，用法簡單，但心中也有一個疑問，它是如何做到的呢？接下來就讓我們一探究竟吧！ 1、使用正則來實現 比如説有這樣一個模板字符 let tempStr2 = '我是一名{{develpoer}}，我在學習{{knowledge}}知識！'; 現在需要將字符串裏面{{xxx}}替換成數據

vue.js , 模板引擎 , mustache , Javascript

收藏 評論

mengdong_5927a02673e54 頭像

夢動 - 基於vue2.0 +vuex+ element-ui 後台管理系統

xxx金融後台管理系統 A magical vue element touzi admin. 效果演示地址 github地址 About 此項目是 vue2.0 + element-ui + node+mongodb 構建的後台管理系統，所有的數據都是從服務器實時獲取的真實數據，具有真實的註冊、登錄、數據顯示、新增數據、修改數據、刪除數據等功能。 如果對您對此項目有興趣，可以點

vue.js , vue-router , node.js , vuex , webpack2

收藏 評論

fjc0k 頭像

fjc0k - Vue 中實現雙向綁定的 4 種方法

1. v-model 指令 input v-model="text" / 上例不過是一個語法糖，展開來是： input :value="text" @input="e = text = e.target.value" / 2. .sync 修飾符 my-dialog :visible.sync="dialogVisible" / 這也是一個語法糖，剝開來是： my-dialog :vi

vue.js , 雙向綁定 , Javascript

收藏 評論

echo_numb 頭像

echo_numb - vue生命週期及雙向綁定

這篇文章不是原創，看了其他人的分析貼，記錄下自己學到的。本篇主要記錄一下vue內部流程，以及雙向綁定原理。Vue的可愛之處在於他的雙向綁定及Virtual DOM的思想。 vue內部流程 如圖所示，實例化組件時，調用init方法，初始化事件，屬性，data等。初始化data,是實現雙向綁定的重要一步（後面再詳細説）。掛載（$mount）時，根據傳入的模版解析編譯成 render function

vue.js , 雙向綁定

收藏 評論

taotao123 頭像

風雨後見彩虹 - vue+vuecli+webapck2項目配置文件詳解

1.文件結構 ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-loader.conf.js │ ├─webpack.base.conf.js │ ├─webpack.dev.conf.js │ ├─webpack

vue.js , 配置文件 , vue-cli , webpack2

收藏 評論

taotao123 頭像

風雨後見彩虹 - vue+vuecli+webapck2實現多頁面應用

準備工作 在本地用vue-cli新建一個項目，首先安裝vue-cil，命令： npm install -g vue-cli 新建一個vue項目,創建一個基於"webpack"的項目,項目名為vuedemo： vue init webpack vuedemo 這裏有一個地方需要改一下，在執行npm install命令之前，在package.json裏添加一個依賴,後面會用到。 修改webpa

vue.js , 多頁面應用 , vue-cli , webpack2

收藏 評論

obkoro1 頭像

OBKoro1 - 160行代碼仿Vue實現極簡雙向綁定[詳細註釋]

前言 現在的前端面試不管你用的什麼框架，總會問你這個框架的雙向綁定機制，有的甚至要求你現場實現一個雙向綁定出來，那對於沒有好好研究過這方面知識的同學來説，當然是很難的，接下來本文用160行代碼帶你實現一個極簡的雙向綁定機制。如果喜歡的話可以點波贊/關注，支持一下，希望大家看完本文可以有所收穫。 本文是在面試題：你能寫一個Vue的雙向數據綁定嗎？的基礎上仔細研究+改動，並添加了詳細註釋，而成的。

vue.js , 前端框架 , 雙向綁定 , 前端 , Javascript

收藏 評論

tingtinger 頭像

小野 - webpack的可視化資源分析工具webpack-bundle-analyzer的使用

隨着項目越來約龐大，導致構建包的時候速度緩慢！ 首先推薦使用wepback的可視化資源分析工具。以下給出webpack-bundle-analyzer配置【vue-cli構建項目時會自動配置好】 安裝webpack-bundle-analyzer 控制枱輸入npm/cnpm install --save-dev webpack-bundle-analyzer config/i

vue.js , webpack2 , Javascript

收藏 評論

jamesfancy 頭像

邊城 - 揭密 Vue 的雙向綁定

Vue 中需要輸入什麼內容的時候，自然會想到使用 input v-model="xxx" / 的方式來實現雙向綁定。下面是一個最簡單的示例 div id="app" h2What's your name:/h2 input v-model="name" / divHello {{ name }}/div /div new Vue({ el: "#app",

vue.js , 雙向綁定

收藏 評論

yugu 頭像

裕谷 - Vue實戰

創建Vue項目 # 全局安裝 vue-cli $ cnpm install --global vue-cli # 創建一個基於 webpack 模板的新項目 $ vue init webpack my-project 項目運行 # 開發者模式運行[默認訪問：localhost:8080] $ npm run dev # 打包運行[默認訪問：localhost:5000] $ npm run bu

vue.js , vue-router , vue-resource , vue-cli

收藏 評論

yixiaoxuan_5aa7726674d5c 頭像

南喬 - Vue 中父傳子組件傳值，開發項目中總會遇到這樣或那樣的坑，作為前端小白，每天都在填坑中度過。。。

第一種情況： 簡單傳值，子組件只負責顯示； 父組件向子組件傳遞一個hello word; 子組件接收並顯示出來； 父組件Father.vue template div id="app" Child :msg = "message"/ /div /template script import Child from './Child' export default {

vue.js , 雙向綁定

收藏 評論

jingzhaoxia 頭像

Pink - iview中 form+table 渲染的問題？？？？

描述 需求 在表格裏面渲染form表單，數字保留2位小數，不足的自動補齊。 選用 選用的是 iview 的組件 Form 、Input、Table。 Form表單的數據可以雙向綁定，這樣在對輸入的數據做補零操作後，更新Form表單的model綁定的數據，即可更新。 沒有使用 InputNumber 是因為它的交互用户體驗不是很友好，而選用了常用的Input。 但問題不是出在這裏，請繼續往下看

vue.js , form , 雙向綁定 , table , iview

收藏 評論

yelloxing 頭像

心葉 - vue&react源碼思考之:雙向綁定

作者：心葉 時間：2019-07-18 10:34 本文章構思的實現方法在github上有對應的項目已經實現，項目依舊在不斷改進中:watcher.js 核心方法説明 Object.defineProperty(obj,key,{ get(){ // todo1 }, set(newValue){ // todo2 } });

react , vue.js , 雙向綁定

收藏 評論

zs_staria 頭像

zs_staria - 關於vue-cli3跨域配置筆記

vue-cli3跨域配置： 在vue-resource的數據請求中，一般我們會將請求方式GET/POST修改為jsonp的請求方式就可以實現跨域。 但是對於只支持GET/POST兩種請求方式的api，修改jsonp，就會出錯。需要進行跨域的配置。 (1) 在文件根目錄下，創建vue.config.js配置文件，具體配置如下： module.exports={ //將b

vue.js , vue-resource , vue-cli3

收藏 評論

liuoomei 頭像

liuoomei - vue數據已經改變但是頁面並沒有及時相應的問題

vue數據已經改變但是頁面並沒有及時相應的問題 $set() $nextTick() $forceUpdate() 其他： 數組： [...arr] 對象： Object.assign()

vue.js , 雙向綁定

收藏 評論

biubiu_5deda9568bbf1 頭像

巴斯光年 - js實現數據單向綁定

如果你在學習一種前端框架，如vue、angular等，那麼你一定不會對數據的單向綁定陌生。 何為數據的單向綁定？ 傳統開發模式下，如使用jQuery開發，我們想將一個變量顯示到html中，首先要定義一個變量name，然後通過jq代碼操作dom將變量放到HTML中，如果name發生修改，還要再次通過jq代碼操作dom將新的變量值放到HTML中。這就是傳統的MVC框架，其中的Model和View是我們

vue.js , 雙向綁定 , 前端 , Javascript

收藏 評論

biubiu_5deda9568bbf1 頭像

巴斯光年 - js實現數據雙向綁定

接上一篇文章《js實現數據單向綁定》 上篇文章中用原生js實現了數據的單向綁定。本篇文章繼續介紹如何用js實現數據的雙向綁定。綁定的方式模仿vue中的v-model指令。 創建標籤 div id="div1" input type="text" v-model="name" br 姓名：{{name}} /div 創建一個輸入框，使用v-model屬性綁定變量name，注意這裏只是模

vue.js , 雙向綁定 , 前端 , Javascript

收藏 評論

sctec 頭像

樑柱 - 3.vue請求數據

請求數據的方式： vue-resource 官方提供的 vue的一個插件 axios fetch-jsonp vue-resource的使用 使用步驟： 1、安裝vue-resource模塊 cnpm install vue-resource --save 2、在 main.js 引入 vue-resource import VueResource from 'vue-reso

vue.js , vue-resource , Axios , 前端

收藏 評論

huolang_5a14e07d2f2ff 頭像

火狼 - ES5和ES6函數你不知道的區別【面試篇】

前言 JS 中函數是高等公民,但是function 和 class 的區別你真的清楚嘛? 本文從PolyFill 實現,再到性能分析,再複習哈基礎篇的使用; 另外深圳前端求坑，有坑的大佬麻煩內推一下。 1. PolyFill 1.利用原生 js 擼一個簡單的 class; 2.根據上面的用法知道 class 必須通過 new 調用,不能直接調用; // 阻止直接()調用,

react , vue.js , ecmascript-6 , es5 , Javascript

收藏 評論

populus 頭像

populus - composition events於v-model中的使用

前言：我們都知道vue中v-model指令可以實現雙向數據綁定，但他本質是一個語法糖，比如組件上的v-model默認會利用名為value的 prop 和名為input的事件。在自定義實現的過程中，發現在使用輸入法時，輸入拼音選擇候選詞同樣會觸發原生input標籤的input事件，從而更新value。但element-ui的input組件便不會如此，其實就是用到了composition events

vue.js , 雙向綁定 , input標籤 , element-ui

收藏 評論