区别

  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. Python-约束和异常处理

    今天我们来说一说类的规范以及程序出现错误后我们要怎么进行处理 一.类的约束 首先,你要清楚,约束是对类的约束,比如,现在你是一个项目经理,然后呢,你给手下的人分活,张三你处理一下普通用户登录,李四你处 ...

  2. stylish——一键为网页换肤，改变字体大小，去除广告

    今天给大家介绍的是一款非常好用的插件stylishstylish是一款可以为网站自定义主题的插件 可以在chrome的应用商店找到也可以通过网址访问https://userstyles.org/ 应用 ...

  3. How to solve problems

    练习是为了帮助你成长 0.Don't panic! 1.What are the inputs? 2.What are the outputs? 3.Work through some example ...

  4. c# 依赖注入之---setterInjection(转)

    图3.1 Setter注入示意 定义一个接口: namespace SetterInjection { internal interface IServiceClass { string Servic ...

  5. nginx 应用包编译及常用文件配置

    1.zlib wget http://www.zlib.net/fossils/zlib-1.2.8.tar.gz 2.openssl wget http://www.openssl.org/sour ...

  6. python mysql安装

    本文主要介绍不同系统mysql安装 mac安装mysql http://blog.csdn.net/pansanday/article/details/54915916   linux安装mysql ...

  7. web统计数据搜集及分析原理

    在现代web应用开发中,数据扮演着越来越重要的角色:通过数据我们能够知道系统哪些地方有待改进,从而迭代开发重新上线, 随后再次通过数据我们来评估新的迭代开发是否满足了我们的预期目标,从而形成了一个数据 ...

  8. shell逻辑运算符 1

    逻辑卷标 表示意思 1. 关于档案与目录的侦测逻辑卷标! -f 常用!侦测『档案』是否存在 eg: if [ -f filename ] -d 常用!侦测『目录』是否存在 -b 侦测是否为一个『 bl ...

  9. Azkaban3.X的安装（2018年8月19日最新版本）

    参考文章: 1.http://azkaban.github.io/azkaban/docs/latest/ 2.http://blog.csdn.net/gaoqida/article/details ...

  10. js数组 标签： javascript 2016-08-03 14:15 131人阅读 评论(0) 收藏

    数组排序 reverse()方法 reverse()方法会反转数组的顺序. sort()方法 默认情况下sort()方法按升序排列数组项.为实现排序sort()方法调用每项的toString(),然后 ...