js實現數據單向綁定
如果你在學習一種前端框架，如vue、angular等，那麼你一定不會對數據的單向綁定陌生。 何為數據的單向綁定？ 傳統開發模式下，如使用jQuery開發，我們想將一個變量顯示到html中，首先要定義一個變量name，然後通過jq代碼操作dom將變量放到HTML中，如果name發生修改，還要再次通過jq代碼操作dom將新的變量值放到HTML中。這就是傳統的MVC框架，其中的Model和View是我們
昵称 巴斯光年
@vue.js
贡献者142
粉丝0
贡献者
@vue.js
动态 列表
js實現數據雙向綁定
接上一篇文章《js實現數據單向綁定》 上篇文章中用原生js實現了數據的單向綁定。本篇文章繼續介紹如何用js實現數據的雙向綁定。綁定的方式模仿vue中的v-model指令。 創建標籤 div id="div1" input type="text" v-model="name" br 姓名：{{name}} /div 創建一個輸入框，使用v-model屬性綁定變量name，注意這裏只是模
昵称 巴斯光年
composition events於v-model中的使用
前言：我們都知道vue中v-model指令可以實現雙向數據綁定，但他本質是一個語法糖，比如組件上的v-model默認會利用名為value的 prop 和名為input的事件。在自定義實現的過程中，發現在使用輸入法時，輸入拼音選擇候選詞同樣會觸發原生input標籤的input事件，從而更新value。但element-ui的input組件便不會如此，其實就是用到了composition events
昵称 populus
vue雙向數據綁定原理圖(簡易)
雙向數據綁定的概念，相信大家都耳熟能詳，簡單來説，數據變化更新視圖，視圖變化更新數據。為了實現這一效果，在 Vue 中，採用了 數據劫持結合發佈訂閲者模式 的方式來實現。 通過 Object.defineProperty() 實現數據劫持，監聽數據的變化。 通過 發佈者Dep() 訂閲者Watcher 實現發佈訂閲者模式，達到視圖與數據之間相互更新的解耦。 關於如何實現一個簡單的數據雙向綁定，網上
昵称 zhangjinpei
【筆記】Vue-1-響應式原理
響應式 是一種面向數據流和變化傳播的編程範式。這意味着可以在編程語言中很方便地表達靜態或動態的數據流，而相關的計算模型會自動將變化的值通過數據流進行傳播。 Vue 2+ 版本基於Object.defineProperty實現數據雙向綁定，即數據變化時，視圖也變化。 Object.defineProperty用法： let obj = {} Object.defineProperty(ob
昵称 CSep27
使用Proxy實現簡易的vue雙向數據綁定
在實現vue雙向數據綁定之前，先了解Proxy相關的概念和用法 proxy概念 Proxy 對象用於定義基本操作的自定義行為（如屬性查找、賦值、枚舉、函數調用等）。 一些術語 handle 包含捕捉器（trap）的佔位符對象，可譯為處理器對象 traps 提供屬性訪問的方法。這類似於操作系統中捕獲器的概念。 target 被 Proxy 代理虛擬化的對象。 語法 const p
昵称 YoLinDeng
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使用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:
昵称 ishy
“前端”工匠系列（一）：合格的工匠，究竟該搞什麼 | 京東雲技術團隊
作者：京東零售劉偉東 此文為系列文章第一篇，為淺嘗輒止的引入，目的是為了讓前端從業人員及非從業但是對此領域感興趣的人對於”前端“是幹什麼的這個話題有個無門檻的瞭解。 “前端職能是什麼” 説起"前端"，維基百科對這個技術角色的定位是“前端（英語：front-end）和後端（英語：back-end）是描述進程開始和結束的通用詞彙。 前端作用於採集輸入信息，後端進行處理。 計算機程序的界面樣式，視
昵称 京東雲開發者
ES5和ES6函數你不知道的區別【面試篇】
前言 JS 中函數是高等公民,但是function 和 class 的區別你真的清楚嘛? 本文從PolyFill 實現,再到性能分析,再複習哈基礎篇的使用; 另外深圳前端求坑，有坑的大佬麻煩內推一下。 1. PolyFill 1.利用原生 js 擼一個簡單的 class; 2.根據上面的用法知道 class 必須通過 new 調用,不能直接調用; // 阻止直接()調用,
昵称 火狼
JS開發必須知道的41個技巧【持續更新】
前言 JS是前端的核心，但有些使用技巧你還不一定知道； 本文梳理了JS的41個技巧，幫助大家提高JS的使用技巧； 文章有點長，可以clone下源碼，直接擼，源碼地址請戳全部源碼，原創不易，歡迎star； 序列文章： Vue 開發必須知道的 36 個技巧 React 開發必須知道的 34 個技巧 Array 1.數組交集 普通數組 const arr1 = [1, 2
昵称 火狼
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-cli3跨域配置筆記
vue-cli3跨域配置： 在vue-resource的數據請求中，一般我們會將請求方式GET/POST修改為jsonp的請求方式就可以實現跨域。 但是對於只支持GET/POST兩種請求方式的api，修改jsonp，就會出錯。需要進行跨域的配置。 (1) 在文件根目錄下，創建vue.config.js配置文件，具體配置如下： module.exports={ //將b
昵称 zs_staria
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
昵称 樑柱
vue3最全資源庫來襲，包含（web、移動、小程序、Electron、常用庫、面試、文檔工具）等資源
一.介紹 vue3-resource專注於收集vue3相關資源，包含（web/移動/小程序/桌面/常用庫/面試/文檔工具）等資源.持續更新中！！！ 如果這些資源對你有幫助，👏 歡迎star 支持下【vue3-resource】 二.特別説明 🌟 推薦的資源全部支持vue3，由於個人精力有限，可能會遺漏很多優秀的vue3開源資源或資源錯誤！還請您點此主動推薦或修改建議！！！十分感謝🙏。
昵称 husanil
青山不遮，畢竟東流，集成Web3.0身份錢包MetaMask以太坊一鍵登錄(Tornado6+Vue.js3)
原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_213 上世紀九十年代，海灣戰爭的時候，一位美軍軍官擔心他們的五角大樓會被敵人的一枚導彈幹掉，從而導致在全球的美軍基地處於癱瘓狀態。這時候，有一位天才的科學家説，最好的中心就是沒有中心。是的，這就是最樸素的去中心化思想，於是互聯網出現了。一個沒有互聯網的時代是無法想象的，互聯網的核心就是把一個信息分成若干的小件，用不同的途徑傳播出
昵称 劉悦的技術博客
以寡治眾各個擊破，超大文件分片上傳之構建基於Vue.js3.0+Ant-desgin+Tornado6純異步IO高效寫入服務
原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_218 分治算法是一種很古老但很務實的方法。本意即使將一個較大的整體打碎分成小的局部，這樣每個小的局部都不足以對抗大的整體。戰國時期，秦國破壞合縱的連橫即是一種分而治之的手段；十九世紀，比利時殖民者佔領盧旺達， 將盧旺達的種族分為胡圖族與圖西族，以圖進行分裂控制，莫不如是。 21世紀，人們往往會在Leetcode平台上刷分治算法題
昵称 劉悦的技術博客
ChatGPT採用的Server-sent events後端實時推送協議Python3.10實現,基於Tornado6.1
善於觀察的朋友一定會敏鋭地發現ChatGPT網頁端是逐句給出問題答案的，同樣，ChatGPT後台Api接口請求中，如果將Stream參數設置為True後，Api接口也可以實現和ChatGPT網頁端一樣的流式返回，進而更快地給到前端用户反饋，同時也可以緩解連接超時的問題。 Server-sent events（SSE）是一種用於實現服務器到客户端的單向通信的協議。使用SSE，服務器可以向客户端推送實
昵称 劉悦的技術博客
Vuepress實現圖片漸進式加載
又名給vuepress寫一個插件😊 最終的效果如下 思路 最近在看pwa時，在MDN上看見一段有趣的關於實現漸進式圖片加載的snippet，大意如下： img src="thumbnail.png" data-src="origin.png"/img var imgToLoad=document.qureySelectorAll('img[data-src]') imgToLoad.forEac
昵称 huaiyuG
vue項目引入pwa使網頁應用可安裝
最近在使用vue項目時看到一個這樣的效果，如圖： 現在其實有很多網站都支持把網頁安裝到電腦或手機（IOS Safari支持較好），如下圖安裝後的效果： 這些都是網頁應用。 接下來介紹一下如何讓你的vue2項目變得可以安裝。 添加cli-plugin-pwa 給現有的vue項目添加，使用下面命令： vue add pwa 執行完之後會自動在package.json添加"@vue/c
昵称 來了老弟
vue項目部署後提示用户有新版本
你可能在瀏覽器見到過上面這種UI，這是在vue項目重新build在服務端部署後，瀏覽器刷新頁面彈出的提示，這時如果用户點擊更新就會重載頁面，清除之前的緩存獲取最新內容。 這是怎樣發生的呢？你可能會想到下面的方式： 服務端編譯重新部署維護一個版本號，客户端通過輪詢檢測和本地存儲的是否相同，發現更新的版本就彈框提示（缺點 耗電。尤其是在移動端） 通過在html中做版本標記... websoc
昵称 來了老弟
使用wxt開發跨瀏覽器插件
一、背景 在使用@crxjs/vite-plugin一段時間後，開發發了welibrary等圖書館插件，為了進一步推廣插件計劃支持Chrome、Edge瀏覽器之外的Firefox，為此耗費了不少時間用於調整配置，初步結論如下， 1）Firefox對mv2版本支持更多，mv3版本有諸多限制，@crxjs/vite-plugin等工具打包後的產物可能無法運行 2）雖然Firefox支持chrome全局
昵称 Honwhy
vue2 devtools導致頁面卡頓，解決方案
背景 項目升級為vue@2.7.16 vue@2老項目很難升級為vue@3 vue.js devtools@5.3.4不再維護 vue.js devtools@5.3.4不支持新的setup state等常用功能 vue.js devtools@6.6.3對vue@2一進入頁面卡死 項目由於歷史以及業務原因頁面性能很差，導致vue.js devtools@5.3.4會在一些場景卡死
昵称 defghy
算法的應用場景之尋找最近數&時間線組件錨點跳轉對應位置
需求描述 前兩天和以前公司的同事聊天，他提到在刷leetcode，並提到算法感覺不接地氣 似乎也沒有什麼應用場景 於是乎，筆者翻出一個案例需求給到他 看完以後，他感嘆道： 還是自己見得少了... 需求：假設有一個時間線組件，按照時間順序展示對應內容，如下圖 這個時間線可能很長，能有好幾個月 為了提高用户體驗，當用户進入這個頁面的時候 我們需要看看當天是哪一天，同時滾動到，距
昵称 水冗水孚