vue.js与angular.js的区别(个人)
刚进入实训 讲师就要发一些什么比较高大上的东西,本人才疏学浅 浅浅的分享一下angularjs 和vue.js的区别。只是简单的理解一下 大神勿喷。
生实训之前学习的angular.js 只是理解了一些些小部分,angular不多说,就是操作数据用的,dom节点布置好,把数据请求过来,操作数据,渲染在
页面上, 对于还没有接触的vue.js是完全陌生的,只是在网上搜索了一下,对比angular。
说到angular 不的不说它的几个特点:
1.模块化
2.语义化
3.双向数据绑定
4.依赖注入
还有我最喜欢的 类似于tap切换的 路由 给我们带来了很大的方便。
它的写法也是很简单的。例<input type="text" ng-model="a">{{a}}; 输入的数据就是要显示的数据。
Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM:
|
<div id="app">
{{ message }}
</div>
|
|
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
|
除了文本插值,我们还可以采用这样的方式绑定 DOM 元素属性:
|
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
|
|
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
})
|
现在就可以看出来区别了,除了绑定DOM元素的方式不同 操作数据的方式也不大相同。希望大家都更深入的了解他们,为我们带来更大的方便。
以上纯属自己的理解 大神勿喷哦。
vue.js与angular.js的区别(个人)的更多相关文章
- 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步
Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...
- Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap
转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...
- Vue.js和angular.js区别
Vue.js:易学 简单 指令以v.xxx 一片HTML代码配合json,在new出来Vue,js实例 个人维护项目 适用于移动端 应用超越了angular angular.js:上手难 指令以ng. ...
- js框架——angular.js(6)
1. ng-class 这个指令是用来绑定一个或者多个css代码.它的值一般是一个表达式,也可以是函数什么的,只要返回的确实是一个类的名字就可以—— ng-class="nextPageDi ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- js框架——angular.js(5)
1. 3种过滤方式 <html> <head> <meta charset='utf-8'> <script src="js/angular.js& ...
- Angular JS - 7 - Angular JS 常用指令2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Angular JS - 6 - Angular JS 常用指令
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
随机推荐
- html头文件设置常用之<meta>设置缓存
<meta http-equiv="pragma" content="no-cache">,pragma与no-cache用于定义页面缓存,不缓存页 ...
- 键盘压缩背景,ios滚动不流畅,禁止遮罩层下面内容滚动
1.<!--防止软键盘压缩页面背景图片--> <script> const bodyHeight = document.documentElement.clientHeight ...
- Angular material mat-icon 资源参考_Device
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- python统计喜欢的小说主角出场次数
这周老师布置了一项作业,让我们回去将自己喜欢的小说里面的主角出场次数统计出来,我对这个充满了兴趣,但我遇到了三个问题: (1)一开始选了一部超长的小说(最爱之一),但是运行时老是不行,老是显示下图错误 ...
- axios简单介绍
axios的配置,get,post,axiso的同步问题解决 一.缘由 vue-resoure不更新维护,vue团队建议使用axios. 二.axios安装 1.利用npm安装npm install ...
- js中报错"Maximum call stack size exceeded"解决方法
Uncaught RangeError: Maximum call stack size exceeded 错误直译过来就是“栈溢出”,出现这个错误的原因是因为我进行了递归运算,但是忘记添加判断条件, ...
- Restful API学习笔记
之前关于这个概念在网上看了一些,看完似懂非懂,模模糊糊,发现专业术语或者说书面表达的形式对于理解这种十分抽象的概念还是低效了点. 书面文档方面看了以下几个: 理解本真的REST架构风格 1. 要深入理 ...
- user agent stylesheet -- 浏览器默认样式
user agent stylesheet 从字面意义上很容易理解他表示用户浏览器的样式表. 今天在做项目时,无意间发现一个元素我并没有设置li的text-align:center : 但其中的img ...
- 关于reduce的使用方法
var rowData=[ {data:4,date:'06',code:'cr_3',name:'桥吊3'}, {data:1,date:'03',code:'cr_1',name:'桥吊1'}, ...
- 【lua】LWT request请求处理
request请求处理 通过mod_lwt模块提供的处理程序来调用Lua脚本处理HTTP请求.具体流程: 判断该请求是否由LWT处理,如果不是,拒绝处理请求; 判断Lua脚本文件是否存在,如果不存在, ...