在没有任何前端框架之前,我们写代码,只能用原生的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. python登录网易163邮箱,爬取邮件

    from common import MyRequests,LoggerUntil,handle_exception myRequests.update_headers({ 'Accept':'tex ...

  2. Linq To EF (添加记录后获取添加的自增ID和叫“ID”的列不是自增列不让插入的问题)

    1:添加记录后,如何获取新添加的ID的值 比如,一个实体 TestEntity   对应一个表TestEntity(ID主键自增,Name,age),使用linq to ef   添加一条记录后,如何 ...

  3. 常用CSS备忘

    1 怎样让div中的img居中 水平居中:div设置:text-align:center; img设置:width:图片宽度; margin:0 auto; 垂直居中:div设置:position:r ...

  4. Nginx Session Sticky

    nginx的粘性session主要通过nginx-sticky-module实现 1 下载 nginx-sticky-module 下载地址:https://code.google.com/p/ngi ...

  5. logback -- 配置详解 -- 四 -- <filter>

    附: logback.xml实例 logback -- 配置详解 -- 一 -- <configuration>及子节点 logback -- 配置详解 -- 二 -- <appen ...

  6. web.xml 整合 SpringMVC

    啦啦啦 <context-param> <param-name>defaultHtmlEscape</param-name> <param-value> ...

  7. Import VMware ESXi from VirtualBox

    VirtualBox can export appliance VMs to OVF format. And you can import the ovf format to VMware ESXi, ...

  8. git push 问题汇总

    Q:git push时卡死 这个问题找的快要放弃的时候... A: git config --global http.postBuffer [via] Q:git push 报错 Counting o ...

  9. solr java demo 基础入门

      <!--solr的maven依赖--> <dependencies> <dependency> <groupId>org.apache.solr&l ...

  10. 使用node新建一个socket服务器连接Telnet客户端并且进行输入的显示

    最近在看node的socket,这个很有趣,这个可以很清晰的得到网络http请求的一个过程.首先我们需要一个Telnet的客户端,node(博主为8.0+版本) Telnet客户端的开启过程 有的系统 ...