技术交流 > Vue.js > 为什么用VUE,而不用Jquery了?

为什么用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%>" />


========================

https://youmightnotneedjquery.com/




2022-02-13 22:29:08
评论
  • 评论加载中...

评论内容: