区别

  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. 医药箱APP静态小项目

    花费了10天时间,纯手写一个医药箱APP静态小项目,里面有上拉加载.左右滑动.弹出层淡入淡出等效果,主要是练习. 以下是一部分页面效果图: 我用的是谷歌的开发者工具的手机端模拟器. 里面需要优化的地方 ...

  2. C++基础--回调的应用

    一.类成员函数的回调 1. 类成员函数的回调,函数的调用必须通过类来调用: CallBack.h #pragma once class CallBack { public: CallBack(); ~ ...

  3. RocketMQ读书笔记2——生产者

    [生产者的不同写入策略] 生产者向消息队列里写入数据,不同的业务需要生产者采用不同的写入策略: 同步发送.异步发送.延迟发送.发送事务消息等. [DefaultMQProduce示例] public ...

  4. Sqlite 数据库分页查询(ListView分页显示数据)

    下面介绍一下我的这个demo. 流程简述: 我在raw文件夹下面放了名称为city的数据库,里面包含全国2330个城市,以及所属省,拼音简写等信息. 首先 在进入MainActivity的时候,创建数 ...

  5. Android 高速录像(1)

    package com.kirin.voltage.activity; import java.io.File;import java.io.IOException;import java.util. ...

  6. 安装busybox玩玩

    到http://www.busybox.net/downloads/binaries/下载放到sdcard然后adb shellsumount -o remount,rw -t yaffs2 /dev ...

  7. Java基础之this关键字的作用

    this关键字主要存在三种应用 1.this调用本类中的属性,也就是说调用类中的成员变量: 2.this调用本类中的其他方法: 3.this调用本类中的其他构造方法,调用时要放在构造方法的首行,否则会 ...

  8. mongodb 3.4复制集配置

    1:启动三个实例 /bin/mongod --config /home/mongodb/db27017/mongodb27017.conf /bin/mongod --config /home/mon ...

  9. 【Leetcode】【Medium】Reorder List

    Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do thi ...

  10. ADOBE READER把PDF转换成WORD教程

    目前国外很多软件的支持信息都使用PDF方式进行发布,如果没有Adobe  Reader,无法查看其内容,如果没有相关的编辑软件又无法编辑PDF文件.转换为DOC格式则可以实现编辑功能.尽管有些软件也可 ...