在没有任何前端框架之前，我们写代码，只能用原生的JS，进行数据的处理，DOM的操作，譬如对一个id 为txtName 的文本框进行赋值，我们是这样的 document.getElementById('txtName').value = '张三'。当然这还仅仅是针对通过id获取DOM ，现实开发中还有其它的各种操作，当然如果熟悉JS的话，其实写的代码性能也还不错。只不过用原生实现的代码比较多，开发起来慢啊，在这个时间就是金钱的年代，显然不是很好的方式。

基于原生实现不是很方便，就出来个Jquery框架了，他让我们少写很多代码，对很多操作都进行了封装简化，使我们开发起来快多了，譬如同样针对上面那个文本框赋值的功能，$('#txtName’).val('张三')。如果需要针对这个元素进行样式等改变，直接往后接着写就行了，不像原来用原生JS那样麻烦了。当然框架内部实现还是基于原生JS 这个是没办法改变的。

用Jquery开发了还多年，自己一直觉得已经挺快了，没有更好的方式了。但是总有一些牛逼的人物想更快，更好的方式，JQUERY操作DOM还是太慢了，还是得必须针对一个个DOM去操作，有没有那种数据变了，DOM也跟着变的。譬如还是上面的例子，张三 我现在又变成了李四了，我不需要找到DOM再赋值，直接文本框值就变成了李四呢。于是乎VUE框架诞生了。

<body>

<div id="app">

   <input type="text" v-model="{{username}}" />
   <input type="text" v-model="{{username}}" />
 </div> 
<script src="//unpkg.com/vue/dist/vue.js"></script> 
</body>

<script type="text/javascript">

        var vm = new Vue({

           el: '#app',

            data: {

              username:'张三'

            }

        });

 </script>

我们只要data中 username 值赋予张三，文本框那边绑定了username , 自动就值出来了，而且就算来2个文本框，也不用我们一个个去操作每个dom。此时我们如果姓名变了  username=‘李四’，那么两个文本框的值也变成李四了，神奇不？

当然这只是VUE其中一个方便之处，还有很多功能都大大简化了我们前端的开发，仔细看有点像我们服务器端ASP.NET一样，对页面绑定数据的时候 填一个变量名 <input type="text"  value="<%=username%>" />

为什么用VUE，而不用Jquery了？的更多相关文章

  1. JavaScript黑客是这样窃取比特币的，Vue开发者不用担心！

    如果你是JavaScript或者区块链开发者,如果你有关注区块链以及比特币,那么你应该听说了比特币钱包Copay被黑客攻击的事情.但是,你知道这是怎么回事吗? 总结 比特币钱包copay依赖event ...

  2. vue中引入jquery

    npm install jquery -S 在webpack.base.conf.js里加入 plugins: [ new webpack.optimize.CommonsChunkPlugin('c ...

  3. 如果不用jQuery,Ajax你还能写出多少?

    许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下. F ...

  4. 在vue中使用jquery

    首先默认你已经有了一个vue程序,如果你想在vue中使用jquery,那么请继续阅读. 当然,加入你没有一个vue程序,这里也给出创建一个vue程序的命令.当然,你肯定装了vue-cli,不然你不会点 ...

  5. 解决vue与传统jquery插件冲突

    比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1 ...

  6. vue setTimeout用法 jquery滚动到某一个div的底部

    //vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...

  7. vue中引入jQuery和bootstrap

    一.引入jQuery: 首先在当前项目的根目录下(就是与package.json同目录),运行命令npm install jquery --save-dev   这样就将jquery安装到了这个项目中 ...

  8. Vue.js和jQuery混合使用的一点注意事项

    首先,Vue 的官方是不建议直接操作 DOM 的,其优势在于视图和数据的双向绑定,而且所有DOM操作都可以用Vue实现,反而使用jQuery来操作DOM的话,会造成不必要的麻烦,DOM未渲染完成之前事 ...

  9. Vue.js与Jquery的比较 谁与争锋 js风暴

    普遍认为jQuery是适合web初学者的起步工具.许多人甚至在学习jQuery之前,他们已经学习了一些轻量JavaScript知识.为什么?部分是因为jQuery的流行,但主要是源于经验开发人员的一个 ...

随机推荐

  1. Oauth2.0（五）：Authorization Code 授权

    Authorization Code 方式适用于有自己的服务器的应用.之所以叫这个名字,是因为流程中引入了一个叫做 authorization code 的东西.这个东西是一个一次性的临时凭证,用来换 ...

  2. Linux下profile与bashrc的区别

    /etc/profile./etc/bashrc.~/.bash_profile.~/.bashrc很容易混淆,他们之间有什么区别?它们的作用到底是什么?/etc/profile: 用来设置系统环境参 ...

  3. Python爬虫学习笔记-1.Urllib库

    urllib 是python内置的基本库,提供了一系列用于操作URL的功能,我们可以通过它来做一个简单的爬虫. 0X01 基本使用 简单的爬取一个页面: import urllib2 request ...

  4. es5.0 安装ik中文分词器 mac

    es5.0集成ik中文分词器,网上资料很多,但是讲的有点乱,有的方法甚至不能正常运行此插件 特别注意的而是,es的版本一定要和ik插件的版本相对应: 1,下载ik 插件: https://github ...

  5. 机器学习实战-KNN

    KNN算法很简单,大致的工作原理是:给定训练数据样本和标签,对于某测试的一个样本数据,选择距离其最近的k个训练样本,这k个训练样本中所属类别最多的类即为该测试样本的预测标签.简称kNN.通常k是不大于 ...

  6. 【抓包分析】 charles + 网易mumu 模拟器数据包

    charles  的使用.我就不再多说了.可以参考以往文章,传送门: https://www.cnblogs.com/richerdyoung/p/8616674.html 此处主要说网易模拟器的使用 ...

  7. 【cs229-Lecture12】K-means算法

    上课内容: 无监督学习: K-means聚类算法 混合高斯模型 jensen不等式(用于推导出EM算法的一般形式) EM(Expectation Maximization)算法(最大期望算法) K-m ...

  8. C#生成随机验证码例子

    C#生成随机验证码例子: 前端: <tr> <td width=" align="center" valign="top"> ...

  9. jQuery属性操作（二）

    挂载到$上的几个属性操作方法分析,发现属性操作用到了sizzle封装的方法 attr: function( elem, name, value ) {        var hooks, ret,   ...

  10. 移动端前端框架UI库

    移动端前端框架UI库(Frozen UI.WeUI.SUI Mobile) Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github. ...