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

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

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

  1. <body>
  2. <div id="app">
  3.    <input type="text" v-model="{{username}}" />
       <input type="text" v-model="{{username}}" />
  1.  </div> 
    <script src="//unpkg.com/vue/dist/vue.js"></script> 
    </body>
  1. <script type="text/javascript">
  2.         var vm = new Vue({
  3.            el: '#app',
  4.             data: {
  5.               username:'张三'
  6.             }
  7.         });
  8.  </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. 史上最强大的python selenium webdriver的包装

    1.之前已经发过两次使用单浏览器了,但是这个最完美,此篇并没有使用任何单例模式的设计模式,用了实例属性结果缓存到类属性. 2.最简单的控制单浏览器是只实例化一次类,然后一直使用这个对象,但每个地方运行 ...

  2. 在Visual Stdio 2012中编译执行JM18.6的方法

    JM是H.264编码的官方实现,与X264开源实现相比,JM的实现比較完整,代码更加规范.并且同一时候提供了编码和解码过程.便于对照分析.可是JM的最大缺点是效率比X264低.因此.非常多应用都基于X ...

  3. linux 停止对某个端口的监听

    1.通过"netstat -anp" 来查看哪些端口被打开. 2.关掉对应的应用程序,则端口就自然关闭了,如:"kill -9 PID" (PID:进程号)

  4. SpringBoot（七）-- 启动加载数据

    一.场景 实际应用中,我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求.为了解决这样的问题,spring Boot 为我们提供了一个方法,通过实现接口 CommandLineRunn ...

  5. Selenium 动作链

    Selenium 模拟浏览器操作,有一些操作,它们没有特定的执行对象,比如鼠标拖曳.键盘按键等,这些动作用另一种方式来执行,那就是动作链 更多动作链参考官网:https://selenium-pyth ...

  6. java里面的getAttribute和findAttribute的区别

    findAttribute: abstract Object findAttribute(String name) Searches for the named attribute in page, ...

  7. vc 使用ShellExecut来启动控制面板中功能模块的操作

    文件夹,文件,网址可以创建快捷方式,控制面板 中的设置也可以创建快捷方式,下面是快捷方式的命令,使用方法:在桌面或文件夹的空白处点右键,选择新建,快捷方式,在“请键入项目的位置”输入下面的命 令,然后 ...

  8. Java枚举的小用法

    package com.lxc.wmb; public enum TestEnum { Success("200","成功!"), Faild("50 ...

  9. 转：ANDROID音频系统散记之四：4.0音频系统HAL初探

    昨天(2011-11-15)发布了Android4.0的源码,今天download下来,开始挺进4.0时代.简单看了一下,发现音频系统方面与2.3的有较多地方不同,下面逐一描述. 一.代码模块位置 1 ...

  10. Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...