为何用VUE，而不用Jquery了？

时间 2019-12-01

标签为何 vue 不用 jquery 栏目 JQuery 繁體版

原文原文链接

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

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

用Jquery开发了还多年，本身一直以为已经挺快了，没有更好的方式了。可是总有一些牛逼的人物想更快，更好的方式，JQUERY操做DOM仍是太慢了，仍是得必须针对一个个DOM去操做，有没有那种数据变了，DOM也跟着变的。譬如仍是上面的例子，张三我如今又变成了李四了，我不须要找到DOM再赋值，直接文本框值就变成了李四呢。因而乎VUE框架诞生了。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=‘李四’，那么两个文本框的值也变成李四了，神奇不？java

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