深入浅析angular和vue还有jquery的区别

angularjs简单介绍和特点@H_502_2@

  首先angular是一个mvc框架,使用mvc解耦,采用model,controller以及view的方式去组织代码,会将一个html页面分成若干个模块,每个模块都有自己的scope,service,directive,各个模块之间也可以进行通信,但是整体结构上是比较清晰的,就是说其代码组织是模块化的,angular的view可能仅仅是一个框架,对view的dom操作或者时间监听都是在directive中实现的,而且一般情况下很少直接去写dom操作代码,只要你监听model,model发生变化后view也会发生变化,就是双向绑定机制,angularjs适用于单页面开发

  在angularJS中,一个模板就是一个HTML文件。但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容

  HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。

  auguarJS并不把模板当做String来操作。输入angularJS的是DOM而非string。数据绑定是DOM变化,不是字符串的连接或者innerHTML变化。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。angular占用的内存较小,可以兼容主流的浏览器,他拥有内置的依赖注入的子系统,可以帮助开发人员更容易开发,理解和测试和应用,DI允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI负责找创建并且提供给我们。那么AngularJS可以做到。指令可以用来创建自定义标签。它们可以用来装饰元素或者操作DOM属性

vuejs简单介绍特点 @H_502_2@

  官网: http://cn.vuejs.org/

   vue是一个渐进式的框架,是一个轻量级的框架,也不算是一个框架,他核心只关注图层,是一个构建数据驱动的web界面,易于上手,还便于于第三方库或与既有项目整合,也能够为复杂的单页应用程序提供驱动

 

 1. vue的核心@H_502_2@

    是一个允许采用简洁的模板语法来声明式的将数据渲染进dom

    先创建一个后缀名为.html的文件

    代码如下:

      html:

       js里面的 

                  el: '#app',                  data: {
                    msg: 'Hello Vue!'
                    }
                  })

      在浏览器窗口上出现的内容: Hello Vue

    数据和DOM已经绑定在一起,验证是否是响应式的,修改控制台里面app.msg,你就会看到上面渲染是列子也更新了     出来文本插值,还可以用绑定DOM 元素属性             

提示信息!                    

        js代码:         

页面加载于 ' + new Date()             }           })

  2. vue指令@H_502_2@

    指令带有前缀v-,以表示他们是Vue提供的特殊属性,他们会在渲染的DOM上应用特殊的响应式行为

    v-bind: v-bind : str = "msg" 将这个元素的节点的str属性和vue实例对象的msg属性保持一致

    v-if = 布尔值 条件渲染指令,根据其后表达式的布尔值进行判断是否渲染该元素,v-if只会渲染他身后表达式为true的元素

    v-show = 布尔值 和v-if类似,只是会渲染他身后表达式为false的元素,而且会给这样的元素添加css的代码,style = "display:none"

    v-else 必须v-if/v-show指令后,不然就不会起作用,如果v-if/v-show的指令表达式为true,则else就不显示,如果v-if/v-show指令的表达式为false,则else元素会显示页面

    v-for 类似于js的遍历,用法 v-for="(item,index) in imgs" :key="index",items是数组,item为数组中的数组元素,index是索引号,key是为了更高效的查找到指定元素

    v-on 用于监听指定元素的DOM事件 v-on:click="greet"

  3. vue的双向数据绑定@H_502_2@

    vueJS是使用ES5提供的Object.defineProperty()方法,监控对数据的操作,从而可以自动触发数据,并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测

    vue和angular中,都是通过在html中添加指令的方式,将视图元素与数据的绑定关系进行声明   

    以上的HTML代码表示该input元素与name数据进行绑定,在js代码总可以这样进行初始化      

      代码执行正确后,页面上input元素对应的位置会显示上面的代码给出的初始值 "请输入你的名字",由于双向绑定数据已经建立,因此,在vm.name="小米",则input也会更新为小明,在页面input上输入小明,则vm.name获取的值为小明

  

4. vue的插件化 @H_502_2@

    插件通常会为vue添加全局功能,插件的范围没有限制

    添加全局的方法或者属性 vue-element 这个我并不是很懂

    添加全局资源 指令/过滤器/ 过渡

    添加vue实例的办法,将他们添加到vue-prototype上实现

    引入一个库,来提供自己的api,同时提供上面的一个或者多个功能,如 vue-router

       import vueRouter from ''vue-router'; //使用webpack的单文件组件打包的方式 会调用vue.component来注册全局组件或者vue.components注册局部组件如果是后者,每个单文件组件中都不需要引入 vue, 因为单文件组件经 webpack 打包后,生成的模块只是一个组件选项对象,被其他组件或 Vue 实例注册时使用语法糖,只需要 字面量对象的 组件选项对象就可以了。

    使用插件:

       vue.use(vueRouter); /通过全局方法Vue.use()使用插件,会阻止注册相同插件多次,只会注册一次该插件      

angular和jquery的区别@H_502_2@

   angular中是尽量避免操作DOM,angular是基于数据驱动,适合做数据操作比较繁琐的项目,angular适用于单页面开发,是一个比较完善的mvvm框架,包含模板和双向数据绑定,路由,模块化,服务,过滤器,依赖注入等所有功能,但是angular验证功能比较薄弱,需要写很多模板标签,而且ngview只能有一个,不能嵌套多个视图,angular的兼容性比较好,jquery是基于操作DOM,适用于操作DOM比较多的项目,jquery是一个库,比较大,兼容大部分浏览器,有丰富的插件,可拓展性强,jquery不能向后兼容,使用插件时,可能会有冲突,

angular和vue的差别@H_502_2@

  一angular是mvvm框架,而vue是一个渐进式的框架,相当于view层,都有双向数据绑定,但是angular中的双向数据绑定是基于脏检查机制,vue的双向数据绑定是基于ES5的getter和setter来实现,而angular是有自己实现一套模板编译规则,vue比angular更轻量,性能上更高效,比angular更容易上手,学习成本低,vue需要一个el对象进行实例化,而angular是整个html页面下的,单页面应用,而vue可以有过个vue实例

总结@H_502_2@

以上所述是小编给大家介绍的angular和vue还有jquery的区别。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

问题现象 elmentui的el-tree数据加载问题,导致第一次加载选中当前节点和高亮当前节点没有生效。 解决方...
因为刚打开文件,vscode默认是预览状态,如果编辑过之后,就不会有这个问题。 可以通过双击将预览状态接...
前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下这篇文章。 h...
在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_eslint-loader@2...
问题产生 在使用babel编译es6时,遇到报错Uncaught ReferenceError: regeneratorRuntime is not define...
父组件的编写 <a:orgCode=orgCode ></a> 在data里面增加...