简单介绍:

 

jquery.js : 其实就是一个函数库,它提供了功能强大而且使用方便的各种函数.使用jquery.js可以很方便的进行各种DOM操作.

 

vue.js : 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,vue 被设计为可以自底向上逐层应用.vue 的核心库只关注

视图层,不仅易于上手,还便于与第三方库或既有项目整合.总而言之,vue省去了复杂的DOM操作,我们只需要做好数据绑定,复杂的

DOM操作vue帮我们代劳了.

 

代码对比:

 

css:

*{margin: 0;padding: 0;font-size: 14px;	
}.base{height: 400px;width: 400px;margin-top: 100px;margin-left: 100px;background: lightgray;
}

 

使用jquery:

<div class="base"><ul id="app4">				</ul>			
</div><script>
$(function(){var todos = [ '学习JavaScript' , '学习jquery' , '加油' ];var length = todos.length;for( var i = 0 ; i < length ; i++ ){var strings = todos[i];var elements = '<li>' + strings + '</li>';$('#app4').append(elements);}});
</script>

 

使用vue:

<div id="app4" class="base"><ul><li v-for="todo in todos">{{ todo.text }}</li>				</ul>			
</div><script>
var app4 = new Vue({el : '#app4',data : {todos : [{ text : '学习JavaScript' },{ text : '学习vue' },{ text : '加油' }]}
});
</script>

 

 

总结:

vue牛逼,jquery不死!