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比较适合于前台用户交互页面。