tag 雙向綁定

標籤
貢獻22
71
12:15 PM · Nov 05 ,2025
biubiu_5deda9568bbf1 頭像 u_9849794 頭像 u_16213652 頭像 u_13200571 頭像 fjc0k 頭像 echo_numb 頭像 obkoro1 頭像 jamesfancy 頭像 yixiaoxuan_5aa7726674d5c 頭像 jingzhaoxia 頭像 yelloxing 頭像 liuoomei 頭像

@雙向綁定 / 博客 RSS 訂閱

biubiu_5deda9568bbf1 頭像

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

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

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

收藏 評論

apicloud 頭像

YonBuilder - YonBuilder移動開發平台 AVM框架 封裝虛擬數字鍵盤組件

AVM（Application-View-Model）前端組件化開發模式基於標準Web Components組件化思想，提供包含虛擬DOM和Runtime的編程框架avm.js以及多端統一編譯工具，完全兼容Web Components標準，同時兼容Vue和React語法糖編寫代碼，編譯工具將Vue和React相關語法糖編譯轉換為avm.js代碼。 基於標準 Web Components 組件化思想

雙向綁定 , 移動開發模式 , 組件化 , Android , avm.js

收藏 評論

_607c00baa52ff 頭像

懟懟 - 【vue】MVVM、雙向綁定

MV*模式 MVC MVP MVVM 1 MVC 一個應用分為三部分 模型 (Model)：數據保存 應用程序的數據、控制與修改這些數據的業務規則 Model改變時：通知View，為View提供查詢Model相關狀態的能力，為Controller提供訪問封裝在Model內部的應用程序功能的能力。 視圖 (View)：用户界面

vue.js , 雙向綁定 , 代理 , mvvm , 響應式

收藏 評論

websx 頭像

赫特莫勒 - 用原生寫一個簡易雙向綁定的例子

var obj = {}; Object.defineProperty(obj,'hello',{ get:function(){ //我們在這裏攔截到了數據 console.log("get方法被調用"); }, set:function(newValue){ //改變數據的值，攔截下來額 console.log("set方法被調用"); do

雙向綁定 , vue3

收藏 評論

ishy 頭像

ishy - vue使用wangeditor4.0版本，並實現編輯器內容雙向綁定

下載安裝 npm i wangeditor --save 封裝組件Editor 新建Vue組件Editor 初始化編輯器組件 template lang="html" div id="editor" /div /template script import E from 'wangeditor' export default { name:

vue.js , 編輯器 , 雙向綁定 , wangeditor , 前端

收藏 評論

nanian_5cd6881d3cc98 頭像

那年 - vue 使用computed報錯 .. was assigned to but it has no setter.

問題： a-radio @change="chooseOther" v-model="tempReadio"其他/a-radio computed: { tempReadio() { if (this.reasonValue == 7) { return true; } else { return false; }

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

收藏 評論

yolindeng 頭像

YoLinDeng - 使用Proxy實現簡易的vue雙向數據綁定

在實現vue雙向數據綁定之前，先了解Proxy相關的概念和用法 proxy概念 Proxy 對象用於定義基本操作的自定義行為（如屬性查找、賦值、枚舉、函數調用等）。 一些術語 handle 包含捕捉器（trap）的佔位符對象，可譯為處理器對象 traps 提供屬性訪問的方法。這類似於操作系統中捕獲器的概念。 target 被 Proxy 代理虛擬化的對象。 語法 const p

vue.js , 雙向綁定 , 代理

收藏 評論

csep27 頭像

CSep27 - 【筆記】Vue-1-響應式原理

響應式 是一種面向數據流和變化傳播的編程範式。這意味着可以在編程語言中很方便地表達靜態或動態的數據流，而相關的計算模型會自動將變化的值通過數據流進行傳播。 Vue 2+ 版本基於Object.defineProperty實現數據雙向綁定，即數據變化時，視圖也變化。 Object.defineProperty用法： let obj = {} Object.defineProperty(ob

vue.js , 雙向綁定

收藏 評論

original_intention 頭像

zhangjinpei - vue雙向數據綁定原理圖(簡易)

雙向數據綁定的概念，相信大家都耳熟能詳，簡單來説，數據變化更新視圖，視圖變化更新數據。為了實現這一效果，在 Vue 中，採用了 數據劫持結合發佈訂閲者模式 的方式來實現。 通過 Object.defineProperty() 實現數據劫持，監聽數據的變化。 通過 發佈者Dep() 訂閲者Watcher 實現發佈訂閲者模式，達到視圖與數據之間相互更新的解耦。 關於如何實現一個簡單的數據雙向綁定，網上

vue.js , 雙向綁定 , mvvm

收藏 評論

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

收藏 評論

zhanglei_5b040a0fa2e41 頭像

張磊 - javascript用defineProperty實現簡單的雙向綁定

defineProperty Object提供的方法，用於給對象添加自定義屬性具體用法如下： const obj = { _value: 1 }; Object.defineProperty(obj, 'value', { get: function() { console.log('get方法執行'); return this._value; }

雙向綁定 , defineproperty , object , 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

收藏 評論

u_9849794 頭像

子丶不語 - 告別繁瑣 Emits！Vue 3.4+ defineModel() 讓組件通信從未如此優雅

前言 你是否曾經在寫 Vue 組件時，為了實現一個簡單的雙向綁定（v-model），不得不反覆編寫props接收modelValue，再在emits裏聲明update:modelValue，最後還要寫一個計算屬性或者事件處理函數來觸發更新？ 這種“樣板代碼”不僅由於繁瑣降低了開發效率，還打斷了代碼的邏輯流。 隨着Vue 3.4+defineModel()宏終於轉

vue.js , 修飾符 , 雙向綁定 , Vue , 前端開發

收藏 評論

liuoomei 頭像

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

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

vue.js , 雙向綁定

收藏 評論

yelloxing 頭像

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

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

react , vue.js , 雙向綁定

收藏 評論

jingzhaoxia 頭像

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

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

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

收藏 評論

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 , 雙向綁定

收藏 評論

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 , 雙向綁定

收藏 評論

obkoro1 頭像

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

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

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

收藏 評論

echo_numb 頭像

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

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

vue.js , 雙向綁定

收藏 評論

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

收藏 評論

u_13200571 頭像

鹽焗西蘭花 - 鴻蒙學習實戰之路：從API 9到20的技術演進與個人成長

鴻蒙學習實戰之路：從API 9到20的技術演進與個人成長 作為一名前端開發者，我與鴻蒙技術的結緣始於2023年。這段學習歷程不僅讓我掌握了一項新興技術，更讓我親歷了國產操作系統從起步到成熟的關鍵階段。今天想和大家分享這段充滿挑戰與收穫的技術之旅，希望能給正在或即將踏上鴻蒙開發之路的朋友一些參考。 一、鴻蒙啓蒙：師資培訓為我打開新世界的大門 2023年11月，我有

移動開發 , API , 雙向綁定 , Android , 開發者 , harmonyos

收藏 評論

u_16213652 頭像

mob64ca1408d5ff - blazor 部署到docker

Blazor 西裝外套·佈雷澤 在Razor模板中使用html css來構建頁面 使用c#來編寫邏輯 將他們組合起來為組件 https://blazor-university.com/ 組件 blazor的默認模板將組件放在Shared和Pages目錄下 Shared 表示公共組件

雲計算 , 雙向綁定 , 賦值 , blazor 部署到docker , Css , Docker

收藏 評論