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