使用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 ...
随机推荐
- java的三大特性之一继承概述
0.继承-----注意事项 00.子类最多只能继承一个父类(指直接继承) 01.java所有的类都是Object的子类 02.JPK6.0中有202个包3777个类,接口,异常,枚举,注释和错误 03 ...
- 使用Calendar来获取当前日期和时间
1 package com.java.test; 2 3 import java.text.SimpleDateFormat; 4 import java.util.Calendar; 5 6 pub ...
- 浅谈BFC与高度塌陷
这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...
- 使用SharePreferences存取数据（慕课笔记 ）
0.视频地址:http://www.imooc.com/video/3265 1.使用SharePreferences存取数据: public class MainActivity extends A ...
- 电话号码 马赛克*号 string类扩展
/// <summary> /// 字符串马赛克 /// </summary> /// <param name="source"></pa ...
- GIT SSH免登录密码实现更新（git pull）、推送（git push）操作
一.使用场景 现在有两台服务器A和B,在A服务器上搭建有git版本代码仓库,现要实现B服务器SSH免密码登录A服务器,并能够从A服务器拉取.推送代码! 二.操作步骤 1.在B服务器项目根目录下执行以 ...
- 解决Mysql导入大数据出现gone away的问题
在用Mysql Yog或者PHPMyadmin等工具导入数据量大的sql文件时,会提示“gone away”,那么如何处理这个问题尼? 在Mysql对应的配置文件中my.ini文件中加入以下配置: # ...
- 单列表变量与字符串拆分的对照（SqlServer）
最近遇到一个问题,在SQLServer中,需要根据用户传入的一系列ID值更新对应的记录.有两种方法,一种是将这些ID值使用逗号分隔,拼接成字符串传入,一种是以表变量的方式传入.最开始,我想当然的认为传 ...
- localStorage对象
localStorage对象存储的数据没有时间限制,比如:它可以存储到第二天,第三周,半年,或二三年,只要您的电脑没有重新安装系统或更换硬盘,数据仍然会被保留着. 实例: <!DOCTYPE h ...
- shell脚本，awk取中间列的方法。
解释 1.$(int(NF/2)+1) 中int(NF/2)等于3,然后加1,就得到中间的4了. 2.$(NF/2+0.5) 相当于得出的是整数.NF/2是3.5,再由3.5+0.5,所以就是4了,也 ...