使用Jquery与vuejs操做dom比较

时间 2019-11-19

原文原文链接

jquery实现添加功能css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>aaa</title>
        <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("<li>"+textbda+"</li>");
                });
            });
        </script>
    </head>

    <body>
        <ol>
            <li>添加项目 1</li>
        </ol>
        <input id="textbd" type="text" value="aaaa" />
        <button id="btn1">添加</button>
    </body>

</html>

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

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>bbb</title>
        <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的代码比较多。vue

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

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

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

总结:若是dom操做频繁，不须要动画效果，就使用vue.js。若是dom操做不频繁，但又须要复杂的动画效果，就使用jquery。app

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

1. 使用jQuery操做DOM
2. 框架操做DOM和原生js操做DOM比较
3. 真实DOM操做和虚拟DOM操做的比较
4. jQuery操做dom
5. jquery操做DOM
6. 使用Jquery操做DOM对象
7. 使用jQuery操做DOM重点总结
8. JQuery DOM 经常使用操做汇总
9. jquery DOM操做（一）
10. jQuery之DOM操做
更多相关文章...
• PHP 类型比较 - PHP教程
• TortoiseSVN 使用教程 - SVN 教程
• Composer 安装与使用
• Java Agent入门实战（一）-Instrumentation介绍与使用