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来设置数据绑定。
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({
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 id= "app">
<input type="test" v-model="name">
</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实例
angular和vue还有jquery的区别的更多相关文章
- 浅析angular,react,vue.js jQuery使用区别
前端越来越混乱了,当然也可以美其名曰:繁荣.当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? PS:大牛留言讨论那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所 ...
- vue和jQuery的区别
从jquery到vue或者说是到mvvm的转变是一个思想的转变,是将原有的直接操作dom的思想转变到操作数据上去 vue和jquey对比 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取 ...
- Angular与Vue
最近在考虑对前端js框架的选择 根据前人的总结,就总结一下 Angular与Vue 的特点与区别 速度/性能 虽然 Angular 和 Vue 都提供了很高的性能,但由于 Vue 的虚拟 DOM 实现 ...
- Angular Js 与bootstrap, angular 与 vue.js
今天突然接到电话, 问我他们的区别 虽然平时看了,但是没记住,凉凉是肯定的 总结一下: bootstrap不算是javascript框架,它只是一个前端的ui框架,然后有一些附带的js插件而已.an ...
- Angular和Vue.js 深度对比
Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...
- angular和vue的差别
一angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的gett ...
- Angular和Vue.js
Angular和Vue.js Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已 ...
- NO.05--谈一谈Angular 和 Vue.js 的对比。
几天的vue之后,给需要的盆友们带来一篇对比,也算是我近期之内业余时间的大工程,现在开始: Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工 ...
- angular和vue的对比学习之路
vue-ng 打开vue的中文官网一段关于vue的描述 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 那我么再看下angular中文网 AngularJS是为了克服HTM ...
随机推荐
- Python学习笔记(一):Python代码的打包与发布
在python程序中,一个.py文件被当作一个模块,在各个模块中定义了不同的函数.当我们要使用某一个模块中的某一个函数时,首先须将这个模块导入,否则就会出现函数未定义的情况. 下面记录的是打包及安装包 ...
- struts与servlet共存
<filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2 ...
- JS设计模式——观察者模式(通俗易懂)
Observer模式的概念 Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式提供给关联对象一种同步通信的手段 ...
- 一、K3 WISE 开发插件《K3 WISE常用数据表整理》
在后台数据库ICClassType表中,字段FID<0的是老单,FID>0的是新单. ----------------系统设置------------------------FStatus ...
- 【腾讯云的1001种玩法】 Laravel 整合万向优图图片管理能力,打造高效图片处理服务
版权声明:本文由白宦成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/574549001488234358 来源:腾云阁 h ...
- [转]50个极好的bootstrap 后台框架主题下载
50个极好的bootstrap 后台框架主题下载 http://sudasuta.com/bootstrap-admin-templates.html 越来越多的设计师和前端工程师开始用bootstr ...
- iOS WKWebView (NSURLProtocol)拦截js、css,图片资源
项目地址github:<a href="https://github.com/LiuShuoyu/HybirdWKWebVIew/">HybirdWKWebVIew&l ...
- python2.7环境下的flask项目导入模块失败解决办法
如下一个flask项目的目录: 这个flask项目在python3.6环境下可以正常启动,但是在python2.7环境下如下报错提示: 提醒模块找不到.如下解决方法: 只需要在views目录里面加一个 ...
- N - Asteroids
Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape of an N x N g ...
- windows系统关闭某个端口的服务(以443端口为例子)
1.查看443被什么服务占用 netstat -ano | findstr 443 查看到443端口被pid为5140的服务占用了 2.去到任务管理器->任务 找到PID为5140的服务,然后停 ...