前端学习历程--vue
---恢复内容开始---
一、对比其他框架
1、react:
共同点:
- 使用 Virtual DOM
- 提供了响应式(Reactive)和组件化(Composable)的视图组件。
- 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。
- react路由使用redux,vue也用了类似的vuex
不同点:
- vue更轻量级,react社区更强大
- vue自动获得了
shouldComponentUpdate避免重复渲染
- 在处理动画时,Vue 每秒最高处理 10 帧,而 React 每秒最高处理不到 1 帧(由于 React 有大量的检查机制,这会让它提供许多有用的警告和错误提示信息。我们同样认为这些是很重要的,但是我们在实现这些检查时,也更加密切地关注了性能方面)。
- react的jsx使一切都变为js,vue仍使用template(也支持jsx),这会更易读,易迁移
- Vue 可以让你在每个单文件组件中完全访问 CSS
scoped
属性会自动添加一个唯一的属性(比如 data-v-21e5b78
)为组件内 CSS 指定作用域,编译的时候.list-container:hover
会被编译成类似 .list-container[data-v-21e5b78]:hover
。
- vue-cli和create-react-app都包含了webpack,但Vue 支持 Yeoman-like 定制
2、angular1
相同点:
- 写法与ng几乎相同
不同点:
- 更灵活,也更简单
- 在 Vue 中指令和组件分得更清晰
- Vue 有更好的性能,并且非常非常容易优化,因为它不使用脏检查,vue使用基于依赖追踪的观察系统并且异步队列更新,所有的数据变化都是独立触发,除非它们之间有明确的依赖关系。和ng2中解决watcher过多办法一致。
3、angular2
- ng2基于ts开发, ts静态类型检查在大规模的应用中非常有用,但中型项目不合适
二、使用
1、hello world
---恢复内容结束---
一、对比其他框架
1、react:
共同点:
- 使用 Virtual DOM
- 提供了响应式(Reactive)和组件化(Composable)的视图组件。
- 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。
- react路由使用redux,vue也用了类似的vuex
不同点:
- vue更轻量级,react社区更强大
- vue自动获得了
shouldComponentUpdate避免重复渲染
- 在处理动画时,Vue 每秒最高处理 10 帧,而 React 每秒最高处理不到 1 帧(由于 React 有大量的检查机制,这会让它提供许多有用的警告和错误提示信息。我们同样认为这些是很重要的,但是我们在实现这些检查时,也更加密切地关注了性能方面)。
- react的jsx使一切都变为js,vue仍使用template(也支持jsx),这会更易读,易迁移
- Vue 可以让你在每个单文件组件中完全访问 CSS
scoped
属性会自动添加一个唯一的属性(比如 data-v-21e5b78
)为组件内 CSS 指定作用域,编译的时候.list-container:hover
会被编译成类似 .list-container[data-v-21e5b78]:hover
。
- vue-cli和create-react-app都包含了webpack,但Vue 支持 Yeoman-like 定制
2、angular1
相同点:
- 写法与ng几乎相同
不同点:
- 更灵活,也更简单
- 在 Vue 中指令和组件分得更清晰
- Vue 有更好的性能,并且非常非常容易优化,因为它不使用脏检查,vue使用基于依赖追踪的观察系统并且异步队列更新,所有的数据变化都是独立触发,除非它们之间有明确的依赖关系。和ng2中解决watcher过多办法一致。
3、angular2
- ng2基于ts开发, ts静态类型检查在大规模的应用中非常有用,但中型项目不合适
二、使用
1、hello world
2、绑定dom元素
3、v-on
4、组件注册
5、props组件接收属性
可以使用 v-bind
指令将待办项传到每一个重复的组件中
三、vue实例
1、构造器
组件构造器
2、构造函数的对象与data对象相互作用
3、$前缀:与构造函数中名称区分
4、没有控制器概念,逻辑放在生命周期钩子中
如 mounted
、 updated
、destroyed
四、模板语法
1、vue底层将html编译为虚拟dom,也支持直接在render中写jsx
2、v-html中可以存放拼接模板,但不安全
3、使用js表达式
4、过滤器
只能在这两个地方使用
5、缩写
五、计算属性
1、模板表达式中需表达复杂逻辑时使用 计算属性
reversedMessage就是计算属性,且依赖message
2、计算属性 vs methods
methods没有缓存机制,不管message是否改变,都执行函数,计算属性如果message不变,不会重新执行函数
3、computed vs watched
4、计算setter
运行 vm.fullName = 'John Doe'
时, setter 会被调用, vm.firstName
和 vm.lastName
也相应地会被更新。
5、watch:停止等待输入完毕
使用 watch
选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的。
v-bind:class
指令可以与普通的 class 属性共存。页可以这样写
也可以在这里绑定返回对象的计算属性
2、v-bind:style绑定内联样式
七、条件渲染
1、v-if
2、v-if条件组
八、列表渲染
1、v-for
持一个可选的第二个参数为当前项的索引。
2、整数迭代
3、key
九、事件处理v-on
1、基本使用
十、表单控制 v-model
1、基本使用
2、单选框
3、复选框
4、单选按钮
5、单选列表
6、多选列表
前端学习历程--vue的更多相关文章
- 前端学习历程--js--原型&闭包
一.数据类型 1.值类型:undefined, number, string, boolean,不是对象 2.引用类型:函数.数组.对象.null.new Number(10)都是对象 3.引用类型判 ...
- 前端学习日记-vue cli3.0环境搭建
卸载老版本的 vue-cli : npm uninstall vue-cli -g 安装新版本的 : npm install -g @vue/cli --安装新版本cli 同时nodeJS 要更新至 ...
- 前端学习历程--http与https
一.CA(证书授权中心)证书 1.ca是通信的中介,具有足够的权威性 2.信任可嵌套如:C 信任 A1,A1 信任 A2,A2 信任 A3 二.根本区别 1.https需要基于ssl的ca证书认证(判 ...
- web前端学习历程--跨域问题
一.同源策略 一个页面的ajax只能获取这个页面相同源(协议.域名.端口号都必须相同)的数据. 二.jsonp方法 1.json和jsonp JSON(JavaScript Object Notati ...
- web前端学习历程--排序
一.js排序方法 1.按字母顺序排列: arr.sort() 2.按数值从小到大: function sortNumber(a,b)//排序函数 { return a - b } var arr = ...
- 前端学习历程--js事件监听
一.事件监听使用场景 1.事件触发多个方法的时候,后一个方法会把前一个方法覆盖掉. window.onload = function(){ var btn = document.getElement ...
- 前端学习历程--localstroge
一. localstorage的特性 1.需要ie8+ 2.浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换 3.local ...
- 前端学习历程--css①
---恢复内容开始--- 本文用自己的理解,总结网上或者自身经历的问题,加以汇总,方便查找: 一.浏览器默认样式 1.浏览器处理css&html a.css作用范围:盒子模式.浮动.定位.背景 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
随机推荐
- ubantu16.04安装ns2.34 错误
把ns2.34解压缩之后,sudo ./install 出现的错误: 错误一:安装NS2.34过程中出现如下的错误:tools/ranvar.cc: In member function ‘virtu ...
- CSS3 box-sizing的作用
设置CSS盒模型为标准模型或IE模型.标准模型的宽度只包括content,二IE模型包括border和padding box-sizing属性可以为三个值之一: content-box,默认值,bor ...
- 将ActiveX打包成CAB发布的注意事项
1.在实现ActiveX组件时,注意VS必须使用管理员身份运行,否则会提示不成功 2.在解决方案中添加一个安装项目 a.在View中点击文件系统,添加对ActiveX项目的输出 b.注册表HKEY_C ...
- Mybatis与JDBC批量插入MySQL数据库性能测试及解决方案
转自http://www.cnblogs.com/fnz0/p/5713102.html 不知道自己什么时候才有这种钻研精神- -. 1 背景 系统中需要批量生成单据数据到数据库表,所以采用 ...
- Luogu 45887 全村最好的嘤嘤刀(线段树 树状数组)
https://www.luogu.org/problemnew/show/T45887 题目背景 重阳节到了,我们最好的八重樱拥有全村最好的嘤嘤刀…… 题目描述 在绯玉丸力量的影响下,八重村成了一条 ...
- Hibernate Session对象核心方法
1. 持久化对象的状态: 站在持久化的角度,Hibernate 把对象分为四种状态:持久化状态,临时状态,游离状态,删除状态 Session 的特定方法能使对象从一个状态转到另一个状态 临时对象: 在 ...
- Spring Boot + JPA(hibernate 5) 开发时,数据库表名大小写问题
(转载)Spring Boot + JPA(hibernate 5) 开发时,数据库表名大小写问题 这几天在用spring boot开发项目, 在开发的过程中遇到一个问题hibernate在执 ...
- (61)Wangdao.com第十天_JavaScript 立即执行函数
1. 立即执行函数 创建完了就执行,只执行完就不再执行了. ( function(){} )(); 例 ( function(a,b){ alert("Hello ,我是一个匿名函数!&qu ...
- Node.js_express_route 路由
route 路由 (kiss my ass ヾ(゚∀゚ゞ) 请求方式 get / post / put / delete____查 / 增 / 改 / 删 路由路径 ...
- mac charles抓安卓(小米)http包
网上有很多的教程说明如何操作,都写的很好,比如 https://blog.csdn.net/luochoudan/article/details/72801573,我在这里补充一点,非常重要的一点:手 ...