爲何用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%>" />前端框架