日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
從Jquery到Vue一次編程思維的轉換

已經(jīng)很多年沒有寫前端代碼了，我的前端水平還停留在Jquery一統(tǒng)天下的年代。最近想趁著假期，惡補一下前端的知識，于是就看了一下最近特別流行的Vue.js。這一看不要緊，發(fā)現(xiàn)自己已經(jīng)落后了整整一個時代。

前端編程思想已經(jīng)由Jquery 時代的事件驅動編程 模型過渡到了以Vue.js 為代表的數(shù)據(jù)驅動編程 時代。

前端編程思想由事件驅動 到 數(shù)據(jù)驅動 的轉變我覺得意義重大，跟后端的MVC的思想一樣，都具有劃時代的意義。

可以說所有新的技術及編程思想的出現(xiàn)都是時代發(fā)展的必然產(chǎn)物。后端的MVC 思想出現(xiàn)，是因為當時后端邏輯變得越來越復雜，代碼維護起來難度越來越大。為了讓項目結構更清晰，維護起來更容易，人們提出了代碼分層的概念; 所以出現(xiàn)了Model 層，View 層，以及Controller層。

現(xiàn)在前端頁面也變得越來越復雜，特別是隨著移動互聯(lián)網(wǎng)時代的到來，為了能夠更好地維護越來越復雜的前端代碼，前端也提出了分層的概念，將代碼也分為三層，分別是Model 層，VIew 層，以及ViewModel層。這就是VUE 框架的指導思想，簡稱MVVC。

前端的 MVVC跟后端的 MVC本質是一樣的，這也印證了很多樸素的真理其實都是通用的這句話。

跟很多后端程序員都聊過，他們表示前端很難學，甚至無意中還會流露出某種羨慕嫉妒恨的表情。有個知名技術大咖曾經(jīng)開玩笑說，你連JavaScript都學得會，還學不會C++。

其實后端程序員覺得前端難學的原因，大概有兩點，其一是因為JavaScript語法本身的特性，靈活多變，并且JavaScript走的是原型繼承的路線，跟其他面向對象語言截然不同;第二點原因就是編程思維方式不一樣，大部分前端程序員都是事件驅動的編程思維，而很多后端程序員都是數(shù)據(jù)驅動的編程思維。

數(shù)據(jù)驅動VS事件驅動

數(shù)據(jù)驅動編程：

所謂的數(shù)據(jù)驅動編程，就是一切從數(shù)據(jù)的角度出發(fā)，把所有的東西都抽象成數(shù)據(jù)模型，然后進行數(shù)據(jù)建模。后端程序員大部分都是這種數(shù)據(jù)驅動的編程思維。 舉個簡單的例子。如果要實現(xiàn)一個博客系統(tǒng)，那么后端程序員，特別是Java程序員，首先考慮的是先創(chuàng)建一個Blog 對象模型，該模型包含了，標題，作者，內容，發(fā)布時間等屬性。然后才會考慮針對 Blog 有哪些操作，比如新增 Blog，查詢 Blog，刪除以及修改 Blog。這就是典型的數(shù)據(jù)驅動編程，編程之前思考得更多的是數(shù)據(jù)模型，以及數(shù)據(jù)模型之間的關系和變化。

事件驅動編程：

所謂的事件驅動編程，就是一切從事件的角度出發(fā)，以事件為思考點。因為前端更多的是處理頁面與用戶的互動關系，比如點擊某個元素呈現(xiàn)不同的頁面內容，點擊某個按鈕進行表單提交等，這些都是由事件觸發(fā)的，所以前端程序員大部分都是事件驅動編程的思維方式。

VUE的出現(xiàn)

Jquery 是事件編程的代表，而VUE 則是數(shù)據(jù)驅動編程的代表，也是前端MVVC思想的具體體現(xiàn)。

下面我們通過“監(jiān)聽頁面表單元素變化”這個小功能，來體會一下兩種編程方式的區(qū)別。

事件驅動編程Demo

1. 實現(xiàn)靜態(tài)頁面表單

  
 
 
    
   
  
  
  1.  
    2.    
  
  
  2.  
    3.    
  
  
  3.   Name: 
    4.    
  
  
  4.   
     
    5.    
  
  
  5.    
    6.    
  
  
  6.   Email: 
    7.    
  
  
  7.   
     
    8.    
  
  
  8.    
    9.    
  
  
  9.    
    10.    
  
  
  10.  
    11.

2. 事件綁定

 
 
 
    
  
  
  
  1. var nameInputEl = document.getElementById("name-input"); 
    2.   
  
  
  2. var emailInputEl = document.getElementById("email-input"); 
    3.   
  
  
  3. // 監(jiān)聽輸入事件，此時 updateValue 函數(shù)未定義 
    4.   
  
  
  4. nameInputEl.addEventListener("input", updateNameValue); 
    5.   
  
  
  5. emailInputEl.addEventListener("input", updateEmailValue); 
    6.

3. 事件觸發(fā)，更新頁面內容

 
 
 
    
  
  
  
  1. var nameValueEl = document.getElementById("name-value"); 
    2.   
  
  
  2. var emailValueEl = document.getElementById("email-value"); 
    3.   
  
  
  3. // 定義 updateValue 函數(shù)，用來更新頁面內容 
    4.   
  
  
  4. function updateNameValue(e) { 
    5.   
  
  
  5.   nameValueEl.innerText = e.srcElement.value; 
    6.   
  
  
  6. } 
    7.   
  
  
  7. function updateEmailValue(e) { 
    8.   
  
  
  8.   emailValueEl.innerText = e.srcElement.value; 
    9.   
  
  
  9. } 
    10.

這就是事件驅動編程方式。整個編寫代碼的過程中，我們一直圍繞事件在思考，也就是觸發(fā)了什么事件，這個事件將帶來什么結果。

數(shù)據(jù)驅動編程Demo

1. 數(shù)據(jù)建模 表單中包含了兩個數(shù)據(jù)數(shù)據(jù)框，name及Email，所以我們定義一個數(shù)據(jù)模型。

 
 
 
    
  
  
  
  1. // 包括一個 name 和 一個 email 的值 
    2.   
  
  
  2. export default { 
    3.   
  
  
  3.   data： { 
    4.   
  
  
  4.     return { 
    5.   
  
  
  5.       name: "", 
    6.   
  
  
  6.       email: "" 
    7.   
  
  
  7.     }; 
    8.   
  
  
  8.   }}; 
    9.

2. 將數(shù)據(jù)與前端展示建立聯(lián)系，并為相應元素綁定事件

  
 
 
    
   
  
  
  1.  
    2.    
  
  
  2.   Name: 
    3.    
  
  
  3.   
    {{ name }}
     
    4.    
  
  
  4.      
  
  
  5.     type="text" 
    6.    
  
  
  6.     name="name" 
    7.    
  
  
  7.     v-bind:value="name" 
    8.    
  
  
  8.     v-on:input="updateNameValue" 
    9.    
  
  
  9.   /> 
    10.    
  
  
  10.   Email: 
    11.    
  
  
  11.   
    {{ email }}
     
    12.    
  
  
  12.      
  
  
  13.     type="email" 
    14.    
  
  
  14.     name="email" 
    15.    
  
  
  15.     v-bind:value="email" 
    16.    
  
  
  16.     v-on:input="updateEmailValue" 
    17.    
  
  
  17.   /> 
    18.    
  
  
  18.   
    19.    
  
  
  19.   
    20.

3. 給數(shù)據(jù)模型添加相應的處理邏輯

 
 
 
    
  
  
  
  1. export default { 
    2.   
  
  
  2.   data: { 
    3.   
  
  
  3.     return { 
    4.   
  
  
  4.       name: "", 
    5.   
  
  
  5.       email: "" 
    6.   
  
  
  6.     }; 
    7.   
  
  
  7.   }, 
    8.   
  
  
  8.   methods: { 
    9.   
  
  
  9.     // 綁定 input 事件，獲取到輸入值，設置到對應的數(shù)據(jù)中 
    10.   
  
  
  10.     updateNameValue(event) { 
    11.   
  
  
  11.       this.name = event.target.value; 
    12.   
  
  
  12.     }, 
    13.   
  
  
  13.     updateEmailValue(event) { 
    14.   
  
  
  14.       this.email = event.target.value; 
    15.   
  
  
  15.     } 
    16.   
  
  
  16.   }}; 
    17.

這就是VUE 的數(shù)據(jù)驅動編程思想的體現(xiàn)。一直以數(shù)據(jù)為思考中心，考慮的是數(shù)據(jù)的變化，并不是事件的變化。如果你是個后端程序員，特別是Java程序員，應該很容易接受這種編程方式。

以上就是我學習Vue的一些體會，事件驅動編程跟數(shù)據(jù)驅動編程 可以混合使用，畢竟我們的世界不是非黑即白，主要看我們真實項目的使用場景。


網(wǎng)站標題：從Jquery到Vue一次編程思維的轉換
分享地址：http://m.5511xx.com/article/djhjsdj.html