使用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 ...
随机推荐
- 记录：swift学习笔记1-2
swift还在不断的更新做细微的调整,都说早起的鸟儿有虫吃,那么我们早点出发吧,趁着国内绝大多数的coder们还没有开始大范围普遍应用. 网上有些大神说:swift很简单!我不同意这个观点,假如你用h ...
- BFC（块级 格式化上下文）的理解
本文转载(https://segmentfault.com/a/1190000013647777) 一.BFC的概念 1.规范解释 块格式化上下文(Block Formatting Context,B ...
- Ubuntu 16.04 server版本开机启动脚本不支持
Ubuntu16.04开机启动的脚本一直不支持,错误用在将开机启动脚本放到了home/usr/的目录下,应该放到/root才能正常启动.#!/bin/sh -e ## rc.local## This ...
- Jquery 如何获取表单中的全部元素的值
1.使用var formData = $(formId).serialize()获取:获取数据的格式为url参数形式的字符串.例如:id=100&name=张三 2.服务器端使用parse ...
- reactnative资源
http://facebook.github.io/react-native/docs/getting-started.html
- ZOJ 3469 Food Delivery （区间DP，经典）
题意: 在x轴上有一家外卖餐馆,有n个顾客站在x轴上不同坐标上且叫了外卖,每个人的脾气不同,每1分钟没有收到外卖就会增加Fi点愤怒值,而外卖小哥的车是有速度的v-1/分钟,问怎样的送餐次序会让所有顾客 ...
- java.lang.ClassCastException: com.ch.hibernate.Student_$$_javassist_0 cannot be cast to javassist.util.proxy.Proxy
利用query动态查询时,报错 java.lang.ClassCastException: com.ch.hibernate.Student_$$_javassist_0 cannot be cast ...
- vue-cli版本更新（2.9.1）问题记录-2
今天想把做好的页面放在手机端浏览,发现新版的vue-cli无论在PC还是手机都只能用localhost访问(127.0.0.1除外).....(这样还怎么让我用手机吃鸡了!TT),于是我在网上查找了一 ...
- UVA 1599， POJ 3092 Ideal Path 理想路径 (逆向BFS跑层次图)
大体思路是从终点反向做一次BFS得到一个层次图,然后从起点开始依次向更小的层跑,跑的时候选则字典序最小的,由于可能有多个满足条件的点,所以要把这层满足条件的点保存起来,在跑下一层.跑完一层就会得到这层 ...
- DROP OPERATOR - 删除一个操作符
SYNOPSIS DROP OPERATOR name ( lefttype | NONE , righttype | NONE ) [ CASCADE | RESTRICT ] DESCRIPTIO ...