使用Jquery與vuejs操作dom比較

阿新 • • 發佈：2019-02-12

jquery實現新增功能

<!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)實現新增功能

<!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的程式碼比較多。

從程式碼原理看，jquery操作的是直接dom元素。而vue.js操作的是dom元素物件。

vue.js優勢是（檢視-模型）雙向繫結，簡化了dom的操作（不用重寫大量的html標籤），提高dom的複用率（以最少程式碼實現更多的功能），傾向於資料讀寫，雖然看上去使用比較繁瑣，但是利於後期的維護。

jquery優勢是jquery語義化，容易理解，比較簡單，可拓展的外掛多。

總結:如果dom操作頻繁，不需要動畫效果，就使用vue.js。如果dom操作不頻繁，但又需要複雜的動畫效果，就使用jquery。

vue.js比較適合於後臺管理頁面，jquery比較適合於前臺使用者互動頁面。

使用Jquery與vuejs操作dom比較

jquery實現新增功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>aaa&l

vue指令與$nextTick 操作DOM的不同之處

非同步更新佇列可能你還沒有注意到，Vue 非同步執行 DOM 更新。只要觀察到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變。如果同一個 watcher 被多次觸發，只會被推入到佇列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和 DOM 操作上非常

原生js與jQuery操作DOM的區別

too 文章 .get dom rep tro 復制原生js pla 轉自網絡一、創建元素節點 1.1 原生JS創建元素節點 ? 1 document.createElement("p"); 1.2 jQuery創建元素節點 ?

原生JS與jQuery操作DOM對比

replace rem 子節點 eno tex lac ace 原生 .get 一、創建元素節點 1.1 原生JS創建元素節點 document.createElement("p"); 1.2 jQuery創建元素節點 $(‘<p></

用jQuery實現簡單的DOM操作

追加匹配簡單的 rep 兄弟節點子元素 spa 添加元素新建通過jQuery創建元素節點：$oLi = $("<li></li>");這樣我們就創建了一個li標簽如果想在元素節點中添加文本的話也挺簡單：$oLi = $("<li&g

jQuery對象與JS原生dom對象之間的轉換

jquery jQuery就是JS的一個擴展庫，工具庫，提供很多方便快捷的方法，所以將JS對象轉換為jQuery對象後，能更方便地操作這個對象。但是jQuery對象也不是萬能的，有一些JS對象有的能，jQuery對象並沒有提供，所以需要轉換回JS對象，才能進行操作。另外一種情況可能是，你使用某些第三方庫，接口

mui項目中如何使用原生JavaScript代替jquery來操作dom

mls ntb extc afa 開發 ont 子節點 hang ora 轉載於：http://www.bcty365.com/content-146-3661-1.html 最近在用mui寫頁面，當然了在移動App裏引入jq或zepto這些框架，肯定是極不理性的。

JS基礎--函數與BOM、DOM操作、JS中的事件以及內置對象

對話框回車 == 問題 tde tle ets fixed 訪問前言絮叨絮叨這裏是JS基礎知識集中講解的第三篇，也是最後一篇，三篇JS的基礎，大多是知識的羅列，並沒有涉及更難得東西，幹貨滿滿！看完這一篇後，相信許多正在像我一樣正處於初

JQuery---選擇器、DOM節點操作練習

span gif .text ide none tle pre splay body 一、練習一 1、需求效果分析： 2、代碼示例： 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/

使用jQuery操作DOM的常用方法和節點

taf dto query 末尾 ont 獲得 ndt true jquery操作 1.常見方法 css(“屬性”,”屬性值”); //設置單個樣式 css({屬性1：屬性值1，屬性2：屬性值3...}); //設置多個樣式 addClass(“樣式名”); //追加單個樣

jquery 操作dom效率測試------html和append插入文檔

left clas cal -- 操作dom fun query dom his $(function () { var htmlResult = createHtmlContent(100); console.log(htmlResul

JQuery 中this和$(this)獲取對象、操作DOM對象的元素屬性

class 獲取對象 clas details 對象 query 操作 active html $(‘.button‘).click(function () { var active = $(‘.buttons-tab a‘).children(‘input‘).at

jQuery （三）DOM 操作

stat true 對象 ext itl scrip 操作 body head 一般jquery在web項目的只要作用就是取值和賦值了。下面了入門下，這些值得獲取。 <!DOCTYPE html> <html> <head> <

使用JQuery操作DOM

dom 函數區別 html文檔 div tel json 篩選子元素 htmlxhtmlxml 1.DOM操作 DOM操作分為三類：DOM Core：任何一種支持DOM的編程語言都可以使用它，如getElementById()HTML-DOM：用於處理HTML文檔，如d

nodejs服務端使用jquery操作Dom

模塊 node span efault 服務端服務 var div jquery操作添加模塊: npm install [email protected] npm install jsdom 引入模塊:

使用jQuery快速高效制作網頁交互特效——03 第三章 JavaScript操作DOM對象

nth dht rtl font parse classname 編程 stc 當前 1、 DOM：Document Object Model（文檔對象模型）： DOM操作： ●DOM是Document Object M

26 Jquery 操作DOM元素

play ima 操作技術 https title color src info 26 Jquery 操作DOM元素

C語言檔案操作與Python檔案操作的比較

無論是在C語言中還是在Python中，對檔案的操作都是直接實現了計算機內部與外部之間的互動；通過將資料寫入檔案可以更好地實現資料的儲存，而不會在程式結束之後資料隨之消失，而通過檔案的讀取操作則可以更好地避免自己講大量資料的手動輸入程式。本篇文章主要介紹C語言以

使用jquery操作DOM物件

目錄 1、DOM操作分類 2、jQuery中的DOM操作 ①使用jQuery操作CSS樣式——css()、 addClass()、 removeClass()、 toggleClass() ②使用jQuery操作文字與屬性值內容——html()、 text()、 val()

jQuery 操作DOM節點

children end inner put htm 詹姆斯 rip clas function html 內容！ <body > <p>你最喜歡的名人是？</p> <ul> <li t

使用Jquery與vuejs操作dom比較

jquery實現新增功能

vue.js(v1.0)實現新增功能

共同點：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比較適合於前臺使用者互動頁面。

相關推薦