angular和vue还有jquery的区别

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 来设置数据绑定。

angularJS 并不把模板当做 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
数据和 DOM 已经绑定在一起, 验证是否是响应式的, 修改控制台里面 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 : 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 中添加指令的方式, 将视图元素与数据的绑定关系进行声明

<form id= "app">
　　<input type="test" v-model="name">
</form>

以上的 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 实例