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. 集合（List、Set）

    第19天 集合 第1章 List接口 我们掌握了Collection接口的使用后,再来看看Collection接口中的子类,他们都具备那些特性呢? 接下来,我们一起学习Collection中的常用几个 ...

  2. 《Ionic 2 实例开发》发布

    Ionic 2系列教程集结成册,在百度阅读上架发布,名为<Ionic 2实例开发>(点击书名将打开地址:http://yuedu.baidu.com/ebook/ba1bca51e4189 ...

  3. C-C++字符输出时遇到字符＇\n','\0'区别

    #include "iostream" #include "stdio.h" #include "stdio_ext.h" #include ...

  4. 监测元素resize

    前言 近来有需求要做分页,听起来可能有点Low. 所以我要把Low的事情做得有点逼格. 分页本身没啥,但是数据量起来了,比如十万. 要是不做点处理, 那你的页面估计爽得很,机器也爽得很. 放心,我不会 ...

  5. 微软Bot Framework文档中，关于Sign-in Card的一处代码错误及更正

    Bot Framework文档出错处网址:https://docs.botframework.com/en-us/csharp/builder/sdkreference/attachments.htm ...

  6. windows7桌面小工具打不开的解决方案

    将任务管理器中的sidebar.exe结束任务: 将C:\Users\用户名\AppData\Local\Microsoft\Windows Sidebar下的settings.ini的文件名修改为任 ...

  7. SAP CRM Survey调查问卷的存储模型

    数据库表CRM_SVY_DB_SVS,通过如下的函数CRM_SVY_DB_SVS_CREATE插入: 可以通过指定的创建者和创建时间很容易查找到特定的Survey: 调查问卷的答案明细以XML的格式存 ...

  8. Spark源码分析之-Storage模块

    原文链接:http://jerryshao.me/architecture/2013/10/08/spark-storage-module-analysis/ Background 前段时间琐事颇多, ...

  9. equals和HashCode的羁绊

    equals和hashcode我一直没弄明白到底怎么回事,今天终于弄懂了. 如下图: 在Person类没有重写equals和hashcode方法时,是如下情况: 但是当我重写了equals方法时,是如 ...

  10. 《队长说得队》【Alpha】Scrum meeting 1

    项目 内容 这个作业属于哪个课程 >>2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 >>实验十二 团队作业8:软件测试与ALPHA冲刺 团队名称 ...