jquery vue(jqueryvue) 收藏 0

2、Vue 和 jQuery 两者之间的区别是什么？（必会）

1、jQuery 介绍：

jQuery 曾经也是现在依然最流行的 web 前端 js 库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的 js 库所代替，随着浏览器厂商对 HTML5 规范统一遵循以及 ECMA6 在浏览器端的实现，jQuery 的使用率将会越来越低。

2、vue 介绍：

vue 是一个兴起的前端 js 库，是一个精简的 MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的 mvmm 框架如 Angular，react 都是大同小异，本质上都是基于 MVVM 的理念，然而 vue 以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起。

3、vue 和 jQuery 区别：

（3.1）vue 和 jQuery 对比 jQuery 是使用选择器（）选取 DOM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界面是在一起的。

（3.2）比如需要获取 label 标签的内容：）选取 DOM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界面是在一起的。

（3.3）比如需要获取 label 标签的内容：(“lable”).val();,它还是依赖 DOM 元素的值。 Vue则是通过 Vue 对象将数据和 View 完全分离开来了）对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，他们通过 Vue 对象这个 vm 实现相互的绑定，这就是传说中的 MVVM。

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 实现静态页面表单

2. 事件绑定

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

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

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

2. 将数据与前端展示建立联系，并为相应元素绑定事件

3. 给数据模型添加相应的处理逻辑

这就是VUE 的数据驱动编程思想的体现。一直以数据为思考中心，考虑的是数据的变化，并不是事件的变化。如果你是个后端程序员，特别是Java程序员，应该很容易接受这种编程方式。

以上就是我学习Vue的一些体会，跟 可以混合使用，毕竟我们的世界不是非黑即白，主要看我们真实项目的使用场景。另外本篇文章主要参考《深入理解Vue.js实战》这本书，文中代码样例也来自于此。

vuex是什么？以及和vue的区别

切图网是国内专业的web前端外包服务公司，提供psd转html切图以及vue等开发服务，vue同样是基于js的类库，但是它的逻辑完全颠覆了我们对jquery说了解到的认知（没有dom概念），那一些特效交互怎么实现呢？ 答案是通过数据驱动。

曾经有个强数据逻辑的项目我用vue做了测试，用vue更加的简洁明了，这个很管用，因为，在此之前我尝试用jquery去做，后来放弃了。

那么什么是vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 的目的是为了管理共享状态，为了达到这个目的，它制定了一系列的规则，比如修改数据源 state、触发 actions 等等，都需要遵循它的规则，以此来达到让项目结构更加清晰且易于维护的目的。

每一个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

vuex和vue区别？

首先vue是一个前端框架（与angular和react同级别），vuex只是vue的一个插件，官网说vuex是状态管理工具，其实说白了，vuex就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器，就是说来存放处理公共数据的工具，存放的数据一变，各个组件都会更新，也就是说存放的数据是响应式的。

你了解到了吗？欢迎前端学术交流。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com