使用Jquery與vuejs操做dom比較

時間  2019-11-19
標籤 使用 jquery vuejs dom 比較 欄目 JQuery 简体版
原文   原文鏈接

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比較適合於前臺用戶交互頁面。框架

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程