Vue是什么？来看看官方的介绍。

  1. Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue和Jquery有什么区别？

  1. jquery到vue转变是一个思想的转变，是将jquery直接操作dom的思想转变到操作数据上去。
  2. jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
  3. Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

从代码来看看两者的不同，我们从中可以看出vue只需要向数据message里面push一条数据即可完成添加一个li标签的操作，而jquery则需要获取dom元素节点，并对dom进行添加一个标签的操作，如果dom结构特别复杂，或者添加的元素非常复杂，则代码会变得非常复杂且阅读性低。

jquery代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  5.     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  6. </head>
  8. <body>
  9.     <div id="app">
  10.         <ul id="list">
  11.             <li>第1条数据</li>
  12.             <li>第2条数据</li>
  13.         </ul>
  14.         <button id="add">添加数据</button>
  15.     </div>
  17. </body>
  18. <script>
  19.     $(document).ready(function() {
  20.     var i=2;
  21.     $('#add').click(function() {
  22.        i++;
  23.        //通过dom操作在最后一个li元素后手动添加一个标签
  24.       $("#list").children("li").last().append("<li>第"+i+"条数据</li>")
  25.     });
  26.   });
  27. </script>

Vue代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  6.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  7. </head>
  9. <body>
  10.     <div id="app">
  11.         <ul>
  12.             <!--根据数组数据自动渲染页面-->
  13.             <li v-for="item in message">{{item}}</li>
  14.         </ul>
  15.         <button @click="add">添加数据</button>
  16.     </div>
  17. </body>
  19. <script>
  20.     new Vue({
  21.         el: '#app',
  22.         data: {
  23.             message: ["第1条数据","第2条数据"],
  24.             i:2
  25.         },
  26.         methods:{
  27.             //向数组添加一条数据即可
  28.             add:function(){
  29.                 this.i++
  30.                 this.message.push("第"+this.i+"条数据")
  31.             }
  32.         }
  33.     })
  34. </script>

​

为什么需要使用vue?

近两年前端技术变革速度太快，vue不论针对web项目开发，网站制作，还是app，小程序开发，都越来越流行，其便捷性及易用程度都让你不得不考虑去学习。如果仅仅还是传统的各种cms开源代码建站仿站，显然你的技术已经跟不上了，如果你开发的项目数据交互较多，并且前后端分离明显，那么vue将会使你未来技术长足成长的不二选择。

  1. 组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展。
  2. 天然分层: JQuery 时代的代码大部分情况下是面条代码,耦合严重,现代框架不管是 MVC、MVP还是MVVM 模式都能帮助我们进行分层，代码解耦更易于读写。
  3. 生态: 现在主流前端框架都自带生态,不管是数据流管理架构还是 UI 库都有成熟的解决方案。

为什么要学习vue？的更多相关文章

  1. 从template到DOM(Vue.js源码角度看内部运行机制)

    写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...

  2. VUE 与其他常见前端框架对比

    对比其他框架(转官方文档) 这个页面无疑是最难编写的,但我们认为它也是非常重要的.或许你曾遇到了一些问题并且已经用其他的框架解决了.你来这里的目的是看看 Vue 是否有更好的解决方案.这也是我们在此想 ...

  3. 基于VUE框架 与 其他框架间的基本对比

    基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03  11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...

  4. Vue -- 基础语法和使用

    Vue 渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 一.走进Vue 1.what -- 什么是Vue ...

  5. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  6. Python-WEB -VUE初识

    走进Vue_渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 what -- 什么是Vue 可以独立完成前后 ...

  7. Vue的介绍及基础指令

    一.什么是Vue Vue.js是一个渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 为什么要学习Vue 三 ...

  8. 初始Vue

    渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 走进Vue what -- 什么是Vue 可以独立完成前后 ...

  9. vue对比其他框架详细介绍

    vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...

随机推荐

  1. nginx安装【linux下安装】

    nginx下载安装 http://nginx.org/en/download.html 点击右键,复制链接http://nginx.org/download/nginx-1.14.2.tar.gz c ...

  2. Android之自己定义（上方标题随ViewPager手势慢慢滑动）

    近期非常蛋疼,项目要模仿网易新闻的样式去做.上次把仿网易新闻client的下拉刷新写出来了.这次是ViewPager的滑动,同一时候ViewPager的上面标题下划线尾随者移动.本来通过ViewPag ...

  3. bzoj4737: 组合数问题

    终于过了肝了一天啊,怎么我最近都在做细节码农题啊 (这种水平NOIP凉凉??) luacs大家都可以想到用吧,一开始我的思路是把所有在p以内的%p==0的组合数预处理出来,那C(n/p,m/p)任取, ...

  4. HDU 5692 Snacks(DFS序+线段树）

    Snacks Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  5. poj 2763（在线LCA+树状数组）

    Housewife Wind After their royal wedding, Jiajia and Wind hid away in XX Village, to enjoy their ord ...

  6. 【撸码caffe 五】数据层搭建

    caffe.cpp中的train函数内声明了一个类型为Solver类的智能指针solver: // Train / Finetune a model. int train() { -- shared_ ...

  7. hihocoder 1676 树上等差数列 黑科技树形dp

    #1676 : 树上的等差数列 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一棵包含N个节点的无根树,节点编号1~N.其中每个节点都具有一个权值,第i个节点的权值 ...

  8. class--类①

    原来看其他人的代码,发现有好多class之类的语句,当时没太注意.可后来,我觉得应该有学习新知识的必要了. 类定义是以关键字 class 开头,后跟类的名称.类的主体是包含在一对花括号中.类定义后必须 ...

  9. 杂项-Company：ShineYoo

    ylbtech-杂项-Company:ShineYoo 1. 网站返回顶部 1. 2. 3. 4. 2. 网站测试返回顶部 1. 2. 3.家服宝返回顶部 0.首页 http://www.jiafb. ...

  10. codevs1519 过路费(最小生成树+LCA)

    1519 过路费  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master     题目描述 Description 在某个遥远的国家里,有 n个城市.编号为 1,2 ...