从Jquery到Vue一次编程思维的转换

已经很多年没有写前端代码了，我的前端水平还停留在Jquery一统天下的年代。最近想趁着假期，恶补一下前端的知识，于是就看了一下最近特别流行的Vue.js。这一看不要紧，发现自己已经落后了整整一个时代。

前端编程思想已经由Jquery 时代的事件驱动编程 模型过渡到了以Vue.js 为代表的数据驱动编程 时代。

前端编程思想由事件驱动 到 数据驱动 的转变我觉得意义重大，跟后端的MVC的思想一样，都具有划时代的意义。

可以说所有新的技术及编程思想的出现都是时代发展的必然产物。后端的MVC 思想出现，是因为当时后端逻辑变得越来越复杂，代码维护起来难度越来越大。为了让项目结构更清晰，维护起来更容易，人们提出了代码分层的概念; 所以出现了Model 层，View 层，以及Controller层。

现在前端页面也变得越来越复杂，特别是随着移动互联网时代的到来，为了能够更好地维护越来越复杂的前端代码，前端也提出了分层的概念，将代码也分为三层，分别是Model 层，VIew 层，以及ViewModel层。这就是VUE 框架的指导思想，简称MVVC。

前端的 MVVC跟后端的 MVC本质是一样的，这也印证了很多朴素的真理其实都是通用的这句话。

跟很多后端程序员都聊过，他们表示前端很难学，甚至无意中还会流露出某种羡慕嫉妒恨的表情。有个知名技术大咖曾经开玩笑说，你连JavaScript都学得会，还学不会C++。

其实后端程序员觉得前端难学的原因，大概有两点，其一是因为JavaScript语法本身的特性，灵活多变，并且JavaScript走的是原型继承的路线，跟其他面向对象语言截然不同;第二点原因就是编程思维方式不一样，大部分前端程序员都是事件驱动的编程思维，而很多后端程序员都是数据驱动的编程思维。

数据驱动VS事件驱动

数据驱动编程：

所谓的数据驱动编程，就是一切从数据的角度出发，把所有的东西都抽象成数据模型，然后进行数据建模。后端程序员大部分都是这种数据驱动的编程思维。 举个简单的例子。如果要实现一个博客系统，那么后端程序员，特别是Java程序员，首先考虑的是先创建一个Blog 对象模型，该模型包含了，标题，作者，内容，发布时间等属性。然后才会考虑针对 Blog 有哪些操作，比如新增 Blog，查询 Blog，删除以及修改 Blog。这就是典型的数据驱动编程，编程之前思考得更多的是数据模型，以及数据模型之间的关系和变化。

事件驱动编程：

所谓的事件驱动编程，就是一切从事件的角度出发，以事件为思考点。因为前端更多的是处理页面与用户的互动关系，比如点击某个元素呈现不同的页面内容，点击某个按钮进行表单提交等，这些都是由事件触发的，所以前端程序员大部分都是事件驱动编程的思维方式。

VUE的出现

Jquery 是事件编程的代表，而VUE 则是数据驱动编程的代表，也是前端MVVC思想的具体体现。

下面我们通过“监听页面表单元素变化”这个小功能，来体会一下两种编程方式的区别。

事件驱动编程Demo

1. 实现静态页面表单

  
 
 
    
   
  
  
  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. // 监听输入事件，此时 updateValue 函数未定义 
    4.   
  
  
  4. nameInputEl.addEventListener("input", updateNameValue); 
    5.   
  
  
  5. emailInputEl.addEventListener("input", updateEmailValue); 
    6.

3. 事件触发，更新页面内容

 
 
 
    
  
  
  
  1. var nameValueEl = document.getElementById("name-value"); 
    2.   
  
  
  2. var emailValueEl = document.getElementById("email-value"); 
    3.   
  
  
  3. // 定义 updateValue 函数，用来更新页面内容 
    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.

这就是事件驱动编程方式。整个编写代码的过程中，我们一直围绕事件在思考，也就是触发了什么事件，这个事件将带来什么结果。

数据驱动编程Demo

1. 数据建模 表单中包含了两个数据数据框，name及Email，所以我们定义一个数据模型。

 
 
 
    
  
  
  
  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. 将数据与前端展示建立联系，并为相应元素绑定事件

  
 
 
    
   
  
  
  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. 给数据模型添加相应的处理逻辑

 
 
 
    
  
  
  
  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 事件，获取到输入值，设置到对应的数据中 
    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 的数据驱动编程思想的体现。一直以数据为思考中心，考虑的是数据的变化，并不是事件的变化。如果你是个后端程序员，特别是Java程序员，应该很容易接受这种编程方式。

以上就是我学习Vue的一些体会，事件驱动编程跟数据驱动编程 可以混合使用，毕竟我们的世界不是非黑即白，主要看我们真实项目的使用场景。

名称栏目：从Jquery到Vue一次编程思维的转换
新闻来源：http://www.shufengxianlan.com/qtweb/news18/384868.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

域名注册知识

行业网站建设

西信服务器托管　　 　广告吸塑字　　 　成都电商解决方案　　 　金融行业网站建设方案　　 　网络营销推广　　 　甘孜州博瑞斯　　 　软文平台　　 　整合营销　　 　成都二枢电信服务器托管　　 　宜宾网站营销推广　　 　消防维保　　 　成都服务器机柜租用　　 　成都网站安全运维　　 　盐亭做网站　　 　成都网页制作　　 　尊格展览　　 　四川网站建设　　 　成都网站建设公司　　 　成都网站建设公司　　 　网站托管运营