使用Jquery与vuejs操作dom比较

jquery实现添加功能

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>aaatitle>
        <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js">script>
        <script>
            $(document).ready(function() {
                var textbda = $("#textbd").val();
                $("#btn1").click(function() {
                    $("ol").append("
  • "+textbda+"
  • "); }); }); script> head> <body> <ol> <li>添加项目 1li> ol> <input id="textbd" type="text" value="aaaa" /> <button id="btn1">添加button> body> html>

    vue.js(v1.0)实现添加功能

    DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8" />
            <title>bbbtitle>
            <script src="https://npmcdn.com/vue/dist/vue.js">script>
        head>
    
        <body>
    
            <div id="app">
                <input v-model="newTodo">
                <button v-on:click="addTodo">添加button>
                <ul>
                    <li v-for="todo in todos">
                        <span>{{ todo.text }}span>
                    li>
                ul>
            div>
            <script>
                new Vue({
                    el: '#app',
                    data: {
                        newTodo: '',
                        todos: [{
                            text: '添加项目 1'
                        }]
                    },
                    methods: {
                        addTodo: function() {
                            var text = this.newTodo.trim()
                            if(text) {
                                this.todos.push({
                                    text: text
                                })
                                this.newTodo = ''
                            }
                        }
                    }
                })
            script>
        body>
    
    html>

     

    共同点:jquery与vue.js(vue.js是一个用来开发 web 界面的前端库。)都是js库,不是框架。

    不同点:从代码量看,jquery的代码比较少,vuejs的代码比较多。

               从代码原理看,jquery操作的是直接dom元素。而vue.js操作的是dom元素对象。

               vue.js优势是(视图-模型)双向绑定,简化了dom的操作(不用重写大量的html标签),提高dom的复用率(以最少代码实现更多的功能),倾向于数据读写,虽然看上去使用比较繁琐,但是利于后期的维护。

               jquery优势是jquery语义化,容易理解,比较简单,可拓展的插件多。

     

    总结:如果dom操作频繁,不需要动画效果,就使用vue.js。如果dom操作不频繁,但又需要复杂的动画效果,就使用jquery。

           vue.js比较适合于后台管理页面,jquery比较适合于前台用户交互页面。

    转载于:https://www.cnblogs.com/Sroot/p/5764496.html

    你可能感兴趣的:(使用Jquery与vuejs操作dom比较)