为什么用VUE，而不用Jquery了？
在没有任何前端框架之前，我们写代码，只能用原生的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了？的更多相关文章
- JavaScript黑客是这样窃取比特币的，Vue开发者不用担心！
如果你是JavaScript或者区块链开发者,如果你有关注区块链以及比特币,那么你应该听说了比特币钱包Copay被黑客攻击的事情.但是,你知道这是怎么回事吗? 总结 比特币钱包copay依赖event ...
- vue中引入jquery
npm install jquery -S 在webpack.base.conf.js里加入 plugins: [ new webpack.optimize.CommonsChunkPlugin('c ...
- 如果不用jQuery,Ajax你还能写出多少?
许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下. F ...
- 在vue中使用jquery
首先默认你已经有了一个vue程序,如果你想在vue中使用jquery,那么请继续阅读. 当然,加入你没有一个vue程序,这里也给出创建一个vue程序的命令.当然,你肯定装了vue-cli,不然你不会点 ...
- 解决vue与传统jquery插件冲突
比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1 ...
- vue setTimeout用法 jquery滚动到某一个div的底部
//vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...
- vue中引入jQuery和bootstrap
一.引入jQuery: 首先在当前项目的根目录下(就是与package.json同目录),运行命令npm install jquery --save-dev 这样就将jquery安装到了这个项目中 ...
- Vue.js和jQuery混合使用的一点注意事项
首先,Vue 的官方是不建议直接操作 DOM 的,其优势在于视图和数据的双向绑定,而且所有DOM操作都可以用Vue实现,反而使用jQuery来操作DOM的话,会造成不必要的麻烦,DOM未渲染完成之前事 ...
- Vue.js与Jquery的比较 谁与争锋 js风暴
普遍认为jQuery是适合web初学者的起步工具.许多人甚至在学习jQuery之前,他们已经学习了一些轻量JavaScript知识.为什么?部分是因为jQuery的流行,但主要是源于经验开发人员的一个 ...
随机推荐
- [原]巧用RenderTexture
郑重声明:转载请注明出处 U_探索 本文诞生于面试过程中这道题:NGUI如何制作3D角色的显示.(大概是这样) 呵呵 没事出去面试面试,考核考核自己也是一种不错的方式哦!不过现在u3d面试,貌似比以 ...
- MapWinGIS------下载与安装
最新版本下载地址: https://github.com/MapWindow/MapWinGIS/releases 1.下载后按步骤安装即可 2.右键以管理员身份运行cmd,运行:regsvr32 C ...
- Java -- 异常的捕获及处理 -- 范例 -- throw与throws的应用
7.2.3 范例 -- throw与throws的应用 例:综合应用 Class : Math package limeThrowable._7_2_3; public class Math { pu ...
- Go之Channel详解
channel取数据时未被赋值将被阻塞,可以使用这一机制来完成事件的监听 wg := new(sync.WaitGroup) wg.Add(2) event := make(chan bool) // ...
- nodejs服务器部署教程三
安装mongodb数据库 如何在ubuntu上安装mongodb数据库,其实官方文档写的很清楚啦 sudo apt-key adv --keyserver hkp://keyserver.ubuntu ...
- numpy, pandas, matplotlib等常用库的学习手册
pandas介绍: 待续 参考资料: 中文:https://www.cnblogs.com/skying555/p/5914391.html 英文:http://www.datadependence. ...
- 基于Python的接口自动化测试框架
项目背景 公司内部的软件采用B/S架构,目的是进行实验室的数据存储.分析.管理. 大部分是数据的增删改查,但是由于还在开发阶段,所以UI的变化非常快,难以针对UI进行自动化测试,那样会消耗大量的精力与 ...
- CouchDB 未授权访问漏洞
0x00 CouchDB安装 CouchDB官方网站:http://couchdb.apache.org/ 一路Next直到完成安装,打开浏览器并访问以下链接:http://127.0.0.1:598 ...
- WAF Bypass FUZZ小脚本
分享两个小脚本,用来WAF Bypass简单FUZZ的 第一个:先生成一个字典,带入搭建的环境进行FUZZ,针对某些软WAF挺好用的,可FUZZ出不少姿势出来,记得先把CC攻击加入白名单才行哦... ...
- U3D之Editor扩展学习
Unity3D提供了强大的编辑器扩展机制,在项目开发中,如果可以将一些繁琐的工作放在编辑器扩展中进行,则会大大提高效率.本文对编辑器扩展进行了一些总结,希望对有兴趣编写编辑器扩展的开发人员有所帮助.当 ...