angular与vue区别和jquery的区别

分手后的思念是犯贱 2021-09-18 02:52 489阅读 0赞

**angularjs简单介绍和特点**

**　　**首先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简单介绍特点  **

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

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

1. vue的核心

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

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

代码如下:

html:  <div id="app"></div>

js里面的　var app = new Vue(\{

el: '\#app',

data: \{

msg: 'Hello Vue!'

\})

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

数据和ＤＯＭ已经绑定在一起, 验证是否是响应式的, 修改控制台里面app.msg, 你就会看到上面渲染是列子也更新了

出来文本插值, 还可以用绑定DOM 元素属性

<div id="app-2">

<span v-bind:title="message">

查看此处动态绑定提示信息！

</span>

</div>

js代码:

var app2 = new Vue(\{

el: '\#app-2',

data: \{

message: '页面加载于 ' + new Date()

\})

**2. vue指令**

**　　　　**指令带有前缀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的双向数据绑定**

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

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

</from>

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

var vm = new Vue(\{

el: "\#app",

data:\{

name: "请输入你的名字"

\})

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

4. **vue的插件化**

插件通常会为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的区别**

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

**angular和vue的差别**

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