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比较的更多相关文章

  1. JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  2. Jquery选择器,操作DOM

    刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...

  3. js,jquery和dojo操作dom

    最近想学习arcgis javascript api,拦路虎就是dojo,为了便于理解dojo,在学习dojo的同时参考原生js和jquery,下午学习了下dom操作,mark下! 一.获取元素 js ...

  4. JQuery学习之操作DOM

    1.DOM,就是Document Object Model(文档对象模型) 2.获得内容的方法: **text():设置或返回所选元素的文本内容 $("#btn1").click( ...

  5. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  6. 三、jquery操作DOM

    DOM(Document Object Model, 文档对象模型)为文档提供了一种结构化的表示方法,通过该方法可以改变文档的内容和展示形式.在实际运用中,DOM更像是桥梁,通过它可以实现跨平台.跨语 ...

  7. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  8. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  9. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

随机推荐

  1. Failed to crunch file

    Failed to crunch file 编译时,出现以上错误,经过多次排除验证,原因尽然是因为路径字符太长了... 编译路径不能超过240个字符

  2. 【虚拟机-网络IP】如何开放 Azure 虚拟机 Ping 功能

    前言 文章<使用 PsPing & PaPing 进行 TCP 端口连通性测试>中提到,ICMP 协议的数据包无法通过 Azure 的防火墙和负载均衡器,所以不能直接使用 Ping ...

  3. android app 压力测试工具-monkey tool

    一.什么是Monkey? Monkey测试是Android自动化测试的一种手段,Monkey测试本身非常简单,就是模拟用户的按键输入,触摸屏输入,手势输入等,看设备多长时间会出异常. Monkey是A ...

  4. C#调用SAP S4/HANA Gateway Service

    公司使用SAP,并且实施公司做了一些提供报表数据的接口供调用,首先说明一下我对SAP不熟悉 但SAP用到的接口信息提供大家参考一下,这些Gateway Service使用的是DCP方式写的,SAP提供 ...

  5. 洛谷 P2424 约数和

    题目背景 Smart最近沉迷于对约数的研究中. 题目描述 对于一个数X,函数f(X)表示X所有约数的和.例如:f(6)=1+2+3+6=12.对于一个X,Smart可以很快的算出f(X).现在的问题是 ...

  6. 【Orange Pi Lite2】 ——1《如何开始使用开源硬件》

    [Orange Pi Lite2] --1<如何开始使用开源硬件> 本文只在博客园发布 在开始前你需要准备的材料与软件 用户手册_Orange Pi Lite2 OrangePi_Lite ...

  7. 《实战Python网络爬虫》- 感想

    端午节假期过了,之前一直在做出行准备,后面旅游完又休息了一下,最近才恢复状态. 端午假期最后一天收到一个快递,回去打开,发现是微信抽奖中的一本书,黄永祥的<实战Python网络爬虫>. 去 ...

  8. mysql 速度检索

    授权GRANT ALL PRIVILEGES ON zabbix.* TO 'zabbix'@'127.0.0.1' IDENTIFIED BY 'zabbixpwd' WITH GRANT OPTI ...

  9. 【转】Intellij IDEA 提交代码到远程GitHub仓库

    1.文章参考自:http://my.oschina.net/lujianing/blog/180728 2.设置相关绑定 Settings——Version Control——Git——Path to ...

  10. springboot超详细笔记

    一.Spring Boot 入门 1.Spring Boot 简介 简化Spring应用开发的一个框架: 整个Spring技术栈的一个大整合: J2EE开发的一站式解决方案: 2.微服务 2014,m ...