使用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 ...
随机推荐
- LaTeX小技巧——File ended while scanning use of \@writefile错误的
早上在修改编译论文时发现了这个问题,仔细检查代码并没发现错误,一时也找不到具体的解决办法.我一直以为是因为runaway argument的错误提示,可实际上就是因为aux文件没有完整输入,导致上次编 ...
- android配置android studio not found target android-*.的问题
列:not found target android-25, 打开下载android SDK的工具栏,找到android-25版本下载到你本地的sdk路径下就OK了.
- COGS 2342. [SCOI2007]kshort
★★☆ 输入文件:bzoj_1073.in 输出文件:bzoj_1073.out 简单对比时间限制:2 s 内存限制:512 MB [题目描述] 有n个城市和m条单向道路,城市编号为1 ...
- UVA 110020 Efficient Solutions (STL)
把一个人看出一个二维的点,优势的点就是就原点为左下角,这个点为右上角的矩形,包含除了右上角以外边界,其他任意地方不存在点. 那么所有有优势的点将会形成一条下凹的曲线. 因为可能有重点,用multise ...
- GCD 代码以及GCD思想
# 欧几里得算法 现在,我们来学习一下欧几里得算法. 欧几里得算法又称辗转相除法,主要用于算求两个正数之间的最大公约数.对于最大公约数这个名称,其英文名称为(Greatest Common Divis ...
- EditPlus 3.7激活码注册码
EditPlus3.7激活教程以及EditPlus3.7激活码使用方法 EditPlus是一款功能齐全的文字编辑器,搭配其他的插件还可以实现很多的功能,还可以编辑和编译Java,调试程序等,主要用来打 ...
- 2018.4.9 Ubuntu install kreogist-mu
先下载kreogist m文件 然后在下载哪里右键点击打开终端 输入sudo dpkg -i + 文件名 输入密码 下一步会显示 未安装未安装软件包 libmpv1. jiexialai要处理 sud ...
- ssh整合思想初步 structs2 Spring Hibernate三大框架各自要点
Web层用Structs2的action Service层用Spring的IoC和aop以及JdbcTemplate或者Transaction事务(创建对象及维护对象间的关系) Dao层用Hibern ...
- Java 吃金币游戏设计与制作，下载版后补，代码没问题
package com.swift; import java.awt.Color; import java.awt.Point; import java.awt.event.KeyEvent; imp ...
- 禅与 Objective-C 编程艺术（Zen and the Art of the Objective-C Craftsmanship）
英文版Zen and the Art of the Objective-C Craftsmanshiphttps://github.com/objc-zen/objc-zen-book 中文版禅与 O ...