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. 使用jmeter测试数据库性能

    出现如图所示的问题 解决办法: 1.下载驱动包,将mysql-connector-Java.jar分别放到Jmeter和Java安装目录的lib和ext目录下 链接:http://pan.baidu. ...

  2. 一些常用的HTML标签

    由于本人目前没有系统学习,日常碰见哪个有用就记下来. pre标签 可定义预格式化的文本,在pre元素中的文本会保留空格和换行符.比如我们展示源代码的时候,只要放一个pre标签,然后把代码直接复制.粘贴 ...

  3. Kubernetes之pod的属性

    属性名称 取值类型                   是否必选 取值说明 version String Required(必) 版本号,例如v1 kind String Required pod m ...

  4. 解决在matplotlib使用中文的问题

    原生的matplotlib并不支持直接使用中文,而需要修改一下相应的文件,上网搜了下,找到一个最简洁的办法. NO.1 找到matplotlibrc文件 C:\Python26\Lib\site-pa ...

  5. PAT (Basic Level) Practise （中文）- 1008. 数组元素循环右移问题 (20)

    一个数组A中存有N(N>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(M>=0)个位置,即将A中的数据由(A0A1……AN-1)变换为(AN-M …… AN-1 A0  ...

  6. C# 替换去除HTML标记方法(正则表达式)

    [from] http://blog.csdn.net/sgear/article/details/6263848/// <summary> /// 将所有HTML标签替换成"& ...

  7. mysql 从陌生到熟练之----数据库备份恢复的实现方法

    mysql 从陌生到熟练之----数据库备份恢复的实现方法 MySQL数据库使用命令行备份|MySQL数据库备份命令 例如: 数据库地址:127.0.0.1 数据库用户名:root 数据库密码:roo ...

  8. 浅谈JavaScript中的正则表达式（适用初学者观看）

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  9. 标准C++（4）继承

    一.继承的作用 若A类继承了B类,可以使A类获得B类中的部分成员变量和成员函数,这能使程序员在已有类的基础上重新定义新的类.继承是类的重要特性,当A类继承了B类,我们称A类为派生类或子类,B类为基类或 ...

  10. NodeJS基础API-path相关的问题basename,extname,dirname,parse,format,sep,delimiter,win32,posix

    path 参考文档:http://nodejs.cn/api/path.html const {normalize} = require('path'); // ES6语法 // 相当于 const ...