区别

  1. Vue数据与视图的分离
  2. Vue数据驱动视图

Jquery 简单示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<input id="title" />
<button id="add">udto list</button>
<ul id="list">
</ul>
<script type="application/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="application/javascript">
$('#add').click(function () {
$('#list').append('<li>'+$('#title').val()+'</li>')
$('#title').val('');
})
</script>
</body>
</html>

  

Vue 简单示例:

<div id="example-1">
<input v-model="title" />
<button v-on:click="add">udto list</button>
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>

  

var example1 = new Vue({
el: '#example-1',
data: {
title:'',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
methods:{
add:function(){
this.items.push({message: this.title})
this.title =''
}
}
})

Vue原理浅析请看下一篇随笔:http://www.cnblogs.com/fuGuy/p/9222249.html

源码地址

https://github.com/10086XIAOZHANG/VirtualDOMDemo  

浅谈Jquery和常用框架Vue变化的更多相关文章

  1. 浅谈Java的集合框架

    浅谈Java的集合框架 一.    初识集合 重所周知,Java有四大集合框架群,Set.List.Queue和Map.四种集合的关注点不同,Set 关注事物的唯一性,List 关注事物的索引列表,Q ...

  2. 浅谈jQuery中的Ajax

    浅谈jQuery中的Ajax 一.前言 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post ...

  3. 浅谈jquery关于select框的取值和赋值

    浅谈jquery关于select框的取值和赋值   jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...

  4. 浅谈一下SSI+Oracle框架的整合搭建

    浅谈一下SSI+Oracle框架的整合搭建 最近换了一家公司,公司几乎所有的项目都采用的是Struts2+Spring+Ibatis+Oracle的架构,上一个东家一般用的就是JSF+Spring,所 ...

  5. 浅谈java类集框架和数据结构(2)

    继续上一篇浅谈java类集框架和数据结构(1)的内容 上一篇博文简介了java类集框架几大常见集合框架,这一篇博文主要分析一些接口特性以及性能优化. 一:List接口 List是最常见的数据结构了,主 ...

  6. 浅谈五大Python Web框架

    转载:http://feilong.me/2011/01/talk-about-Python-web-framework 说到Web Framework,Ruby的世界Rails一统江湖,而Pytho ...

  7. 车大棒浅谈jQuery源码(二)

    前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...

  8. 车大棒浅谈jQuery源码(一)

    背景 因为最近辞职找工作,投了许多家公司.结果简历要么石沉大海,一点音讯都没有,要么就是邮件回复说不匹配.后面加了一些QQ群,才发现原来我工作经验年限太少了.现在深圳都是3经验起步,北京据说更加恐怖. ...

  9. 浅谈 jQuery 核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

随机推荐

  1. JVM jmap

    需求:经常会因为OOM而导致系统挂掉,很多服务无法连接,所以准备了解一下. 参考:http://www.open-open.com/lib/view/open1390916852007.html 一. ...

  2. sass变量

    sass变量用法 1.sass变量必须以$符开头,后面紧跟着变量名 2.变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样) 3.如果值后面加上!default则表示默认值 默认变量 ...

  3. Perl学习笔记(3)----遍历哈希表的一个容易疏忽的地方

    今天做 Google的 Code Jam 上的一道题目:https://code.google.com/codejam/contest/351101/dashboard#s=p2,用Perl语言解答的 ...

  4. DUANG~ 万网轻云服务器,大促狂欢,不仅仅免单!

    DUANG~ 万网轻云服务器,大促狂欢,不仅仅免单!   当老板第一次知道我们要做活动的时候,其实是拒绝的.DUANG~ 打折.降价.挥泪甩卖…太俗套.客户看到一定骂我们,根本没有诚意. 所以轻云大促 ...

  5. 用C读取INI配置文件

    http://blog.csdn.net/chexlong/article/details/6818017 #define CONF_FILE_PATH "Config.ini" ...

  6. c/c++ 按照行读取文件

    本文代码都在Windows/VC++6.0下测试过, 在linux/g++下也没有问题. 但是请一定注意linux和Windows文件格式的区别,比如: 1. 当linux上的代码读取Windows文 ...

  7. 微信证书 javax.net.ssl.SSLException: java.lang.RuntimeException: Unexpected error: java.security.InvalidAlgorithmParameterException: the trustAnchors parameter must be non-empty

    这几天在做微信退款接口,按照api写完之后,在本地测试了下没有问题,于是交给测试让他们在测试环境开测.他们说退款没有成功,感觉去查日志,发现后台报了 javax.net.ssl.SSLExceptio ...

  8. 加密算法IV的作用

    使用随机数产生的初始化向量才能达到语义安全(散列函数与消息验证码也有相同要求),并让攻击者难以对同一把密钥的密文进行破解 初始化向量的值依密码算法而不同.最基本的要求是“唯一性”,也就是说同一把密钥不 ...

  9. 【Leetcode】【Medium】Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  10. sql with 写法

    with h_asign_id as ( select asign_id from assign_h h left join assignment a on a.id = h.asign_id whe ...