揭密vue.js的神秘之處,小程序跟vue有什麼關係

2020-12-13 微容智慧商家服務

微容用的微信小程序平臺採用開發思路是前後端分離，前端採用vue.js+h5+jq開發，後端採用MVE的思路，用php開發，用vue.js構建來微信小程序可視化前端之後，微容給大家介紹下vue的來源和特徵。MPvue是vue.js框架的一種開發思路，在MPvue在做美團小程序的項目中獲得實驗和驗證，並且在美團點評的小程序的項目中大範圍使用，美團為vue.js提供了一套開發組件供微信小程序的開發者使用，由餓了麼 UED （知乎專欄）設計的桌面端組件庫已經開源，滴滴也開放自己的vue組件庫，供開發者使用。國內三大新興移動端公司為何相繼開放組件庫，vue.js為何在短短2年內獲得了天貓移動端、uc移動端、蘇寧易購移動端、滴滴、餓了麼、美團移動端的青睞是什麼原因。上面三家公司開放的組件庫只適合會vue.js代碼編程高手使用，普通人員是享受不到這個福利的，微容卻將vue.js大眾化，讓一款高級移動端開發工具，開放出來讓會電腦的人都會開發。

微容微信小程序

Vue.js是2013年由尤雨溪創立的一個前端MVVM框架，其簡潔的語法設計、輕量快速的特點深受技術社區的喜愛。在權威的JavaScript趨勢榜 stats.js.org上，Vue.js已經躥升到了總榜的前30位且持續排在日/周/月度榜單的前列，已經成為全球頂級的JavaScript框架。 Vue.js的生態不僅體現在趨勢榜上，其配套的數據管理庫Vuex、路由管理庫Vue-router、打包工具、開發者調試插件和項目腳手架等工具和庫也都逐步打造成型，同時擁有非常活躍的開發者社區。

Vue.js的神秘之處，首先我們來挖vue.js的創始人，尤雨溪，尤雨溪是Vue.js框架的作者，HTML5版Clear的打造人。他認為，未來App的趨勢是輕量化和細化，能解決問題的應用就是好應用。而在移動網際網路時代大的背景下，個人開發者的機遇在門檻低，成本低，跨設備和多平臺四個方面。在美中國學生尤雨溪(Evan You)兩天打造HTML5版的Clear　Clear是一款極具創意的、擺脫了任何形式的按鈕的束縛的任務管理應用。

2014年2月，開源了一個前端開發庫Vue.js。Vue.js 是構建 Web 界面的 JavaScript庫，是一個通過簡潔的API提供高效的數據綁定和靈活的組件系統。

2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex團隊，尤雨溪稱他將以技術顧問的身份加入 Weex 團隊來做 Vue 和 Weex 的 JavaScript runtime 整合，目標是讓大家能用 Vue 的語法跨三端

vue小程序

鑑於 Vue.js 和小程序一致的工作原理，我們思考將小程序的功能託管給 Vue.js，在正確的時機將數據變更同步到小程序，從而達到開發小程序的目的。這樣，我們可以將精力聚焦在 Vue.js 上，參照 Vue.js 編寫與之對應的小程序代碼，小程序負責視圖層展示，所有業務和邏輯收斂到 Vue.js 中，Vue.js 數據變更後同步到小程序，如圖 2 所示。如此一來，我們就獲得了以 Vue.js 的方式開發小程序的能力。為此，我們設計的方案如下

vue微容小程序

Vue 代碼：

00001. 將小程序頁面編寫為 Vue.js 實現；

00002. 以 Vue.js 開發規範實現父子組件關聯。

小程序代碼：

00001. 以小程序開發規範編寫視圖層模板；

00002. 配置生命周期函數，關聯數據更新調用；

00003. 將 Vue.js 數據映射為小程序數據模型。

相關焦點

  • Vue.js系列之vue-router(上)(3)
    1.Vue.js系列之項目搭建（1） 2.Vue.js系列之項目結構說明（2）概述Vue非常適用於實踐單頁面應用程式也就是平時大家說的比較多的SPA（single page application），這點應該了解過Vue的應該都知道吧。
  • 「Vue.js開發連載一」Vue.js簡介
    二、Vue能做什麼vue是一個js框架，幫你把DOM操作都綁定到數據操作上，省去了開發者寫操作DOM的代碼，同時給了你一套規範，讓你的代碼更容易維護，可復用性更高，讓開發體驗更好，可以輕鬆做出APP體驗的頁面。
  • Vue.js 2.5 發布,而這個會玩的團隊已經自研出用 Vue 開發小程序的...
    mpVue 是什麼mpVue 是一套定位於開發小程序的前端開發框架，其核心目標是提高開發效率，增強開發體驗。使用該框架，開發者無須了解小程序開發規範，只需要熟悉 Vue.js 基本語法即可上手。框架提供了完全的 Vue.js 開發體驗，開發者編寫 Vue.js 代碼，mpVue 將其解析轉換為小程序並確保其正確運行。
  • Vue.js系列之vue-resource(6)
    vue-resource1.0.3 如果大家在實踐的過程中與本文所說的內容有較大區別的話看看是不是版本問題。 本文是一系列文章，在我對Vue有了更深刻的理解認識之後會對文章及時進行修改或更正。歡迎大家批評指出錯誤。以下是已完成的文章列表。 1. Vue.js系列之項目搭建（1） 2. Vue.js系列之項目結構說明（2） 3. Vue.js系列之vue-router(上)（3） 4.
  • Vue-Router源碼學習之index.js(vue-router類)
    今天，帶來Vue-Router源碼解析系列的第二篇文章：index.js。正文vue-router類裡面都做了什麼？= {})，在vue-router中使用了flow.js做了類型的檢查，什麼是flow.js？
  • Vue.js布局
    動態Vue.js布局組件前言vue.js是漸進增強的視圖庫，可以作為.html頁面部分使用，也可以結合vue-router、vuex、axios用來構建單頁面或多頁面應用。
  • 使用 Vue.js 和 Vuex 實現購物車場景
    本文是上篇文章的序章，一直想有機會再次實踐下 Vuex。寫下這篇總結，需要 Demo 請後臺私信一下小編。什麼是 Vuex？
  • 【分享】Vue.js新手入門指南
    看完之後可能還是有很多人不是很懂這個框架到底是用來做什麼的，什麼是「漸進式框架」？什麼是「自底向上增量開發」？什麼是「視圖層」？什麼是「單文件組件」？什麼是「複雜的單頁應用？」第二段話裡面「響應的數據綁定和組合的視圖組件」這又是個啥？還有最後一段話，「Vue.js 與其它庫/框架的區別」究竟是什麼？
  • Vue進階篇: vue-loader
    Webpack 可以遵循 require() 調用的依賴關係，為我們完成這些工作。Webpack 更加強大之處在於：通過「loader」，我們可以配置 Webpack 以任何方式去轉換所有類型的文件。二、vue-loader是什麼?vue-loader 是一個 Webpack 的 loader，可以將.vue文件轉化成普通的js模塊來執行。2.1   模塊化開發思想簡單的目錄結構：
  • 10 個實用的 Vue.js 工具和庫
    你可以像開發普通的 Vue 應用程式一樣開發你的網站，並充分利用 Vue 應用的種種優勢。VuePress（ https://v1.vuepress.vuejs.org/ ）3、GridsomeGridsome 與 VuePress 有許多相似之處，但前者在處理數據源時採用了另一種非常強大的方法。
  • 什麼是vue?在項目開發中為什麼要用vue?
    在近兩年的web及項目開發中，vue技術的使用越來越普遍，其各種資料、介紹以及使用攻略內容資料非常多，那麼vue到底什麼？在項目開發中，vue起到什麼作用？它與傳統的html+css+js+lamp開發網站項目又有什麼區別呢？
  • 【項目推薦】Vue.js
    作者是尤雨溪,寫下這篇文章時 vue.js版本為 1.0.7 。我推薦使用 sublime text 作為編輯器，關於這個編輯器可以看我這篇文章。 </div> </div> </div></body></html>當然你也可以在 github 上 clone 最新的版本並作為單文件引入，或者使用 CDN:http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js
  • Vue.js 第三方常用插件
    Vue.js devtools用於開發調試Vue.js的一個必備插件。可以在Chrome中的擴展程序中直接安裝，也可以本地文件的方式安裝。2. vue-lazyload 圖片懶加載插件地址：https://github.com/hilongjw/vue-lazyloaddemo：http://hilongjw.github.io/vue-lazyload/2.1 安裝 和 使用插件cnpm install vue-lazyload --save1
  • Vue.js說說組件
    什麼是組件：組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。
  • Vue.js以業務為中心的常見面試題
    12.vue.js中標籤如何綁定事件第一種方式，使用v-on；第二種方式，使用@語法糖13.vuex是什麼vuex是vue.js框架實現的狀態管理系統。是什麼vue-router是vue.js的路由插件，（常用router-link和router-view）17.vue.js的生命周期共分8個階段：在實例初始化之後，數據觀測者data observer和event/watcher事件配置之前調用在實例創建完成後立即調用
  • Vue.js輸出HelloWorld
    收錄於話題 #java php vue.js 第一課:輸出Helloworld
  • Angular、React、Vue.js 等 6 大主流前端框架都有什麼優缺點?
    漸進式構建能力是 vue.js 最大的優勢，vue 有一個簡潔而且合理的架構，使得它易於理解和構建。vue 有一個強大的充滿激情人群的社區，這為 vue.js 增加了巨大的價值，使得為一個空白項目創建一個綜合的解決方案變得十分容易。有什麼弱點和挑戰？
  • 在 Vue.js 中集成 CSS 框架
    npm install bootstrap jquery --save你需要在自己的 Vue 的 main.js 文件中添加 Bootstrap 依賴項，這樣就可以在整個程序中全局使用。/node_modules/bootstrap/dist/js/bootstrap.min.js';如果你的程序構建失敗，應該安裝 popper.js 依賴項。之後應該就不會報錯了。
  • Ultimate Vue.js和Laravel CRUD教程
    著名的JavaScript框架專家Vue.js討論了如何創建一個執行CRUD操作的完整堆棧web應用程式。CRUD（創建，讀取，更新和刪除）是數據存儲的基本操作，也是您作為Laravel開發人員學習的第一件事情之一。但是，當您將Vue.js單頁應用程式添加到此堆棧的前端時會發生什麼？突然之間，你必須處理異步CRUD，因為操作現在不需要刷新頁面。
  • 5個測試Vue.js程序的有用工具和庫
    原文 | https://blog.bitsrc.io/5-useful-tools-and-libraries-for-testing-vuejs-applications-13166f930da8作者 | Nethmi Wijesinghe在過去的幾年中，vue.js已成為最受歡迎的Web應用程式框架之一，考慮到它的靈活性、易用性和生產力，這並不令人驚訝。