使用Jquery与vuejs操作dom比较
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选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- Jquery选择器，操作DOM
刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...
- js，jquery和dojo操作dom
最近想学习arcgis javascript api,拦路虎就是dojo,为了便于理解dojo,在学习dojo的同时参考原生js和jquery,下午学习了下dom操作,mark下! 一.获取元素 js ...
- JQuery学习之操作DOM
1.DOM,就是Document Object Model(文档对象模型) 2.获得内容的方法: **text():设置或返回所选元素的文本内容 $("#btn1").click( ...
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
- 三、jquery操作DOM
DOM(Document Object Model, 文档对象模型)为文档提供了一种结构化的表示方法,通过该方法可以改变文档的内容和展示形式.在实际运用中,DOM更像是桥梁,通过它可以实现跨平台.跨语 ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
随机推荐
- leetcode84 Largest Rectangle in Histogram
思路: 使用单调栈计算每个位置左边第一个比它矮的位置和右边第一个比它矮的位置即可. 实现: #include <bits/stdc++.h> using namespace std; cl ...
- js字符串与十六进制之间的转换
在寻找加密解密的时候看到一个方法,代码图片转换.原理为:字符可以转为16进制,与图片RGB的一个R/G/B相对应,即一个像素点可容纳3个字符(注:Canvas的RGBA,透明度A似乎不能使用,使用后, ...
- Android里的网格空隙
在很多移动端或者web端开发中我们会遇到很多网格布局,如果我们使用线性布局来实现一些简单的网格布局就需要使用padding/margin等属性来使其对齐,代码如下: <LinearLayout ...
- Android Studio 编译错误 Error:Execution failed for task ':app:buildInfoDebugLoader'.
今天来到打开昨天的项目运行正常,然后改动了一点代码编译报错: Error:Execution failed for task ':app:buildInfoDebugLoader'. > Exc ...
- 不写画面的网页程序设计，Web API、Web Service、WCF Service
客户有一个系统,经常要连上我方,查询数据 以前的作法是给对方一个账号,让他可以连上我们的DB来查询. 所以,早期的同仁,真的给他们DB链接字符串 客户的Windows程序.网站就真的靠这么危险的方式, ...
- UVA 11572 Unique snowflakes （滑窗）
用set,保存当前区间出现过的数字,如果下一个数字没有出现过,加入,否则删掉左端点,直到没有重复为止 #include<bits/stdc++.h> using namespace std ...
- 七、vue中将token存到cookie
使用js-cookie工具: 1.npm i js-cookie //安装2.import Cookies from 'js-cookie' //引用 // 存入cookie:Cookies.set( ...
- javaweb基础(22)_Servlet+JSP+JavaBean实战登陆
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
- C#数组删除元素
一.C#数组删除元素 在C#中,只能在动态数组ArrayList类中对数组执行删除元素的操作.因为动态数组是一个可以改变数组长度和元素个数的数据类型. 示例: using System;using S ...
- 怎样将Oracle数据库设置为归档模式及非归档模式
怎样将Oracle数据库设置为归档模式及非归档模式 1.Oracle日志分类 分三大类: Alert log files--警报日志,Trace files--跟踪日志(用户和进程)和 redo lo ...