jquery.js对比vue.js

简单介绍:

 

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不死!