前端学习历程--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 ...
随机推荐
- 在使用mysql8.0的时候遇到的密码链接问题
问题概述 SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client SQLSTAT ...
- Linux shell 脚本报错:/bin/bash^M: bad interpreter: No such file or directory
今天遇到一个很诡异的问题,一直运行很正常的shell脚本失败了,只是昨天增加了一个参数而已. 报错信息: /bin/bash^M: bad interpreter: No such file or d ...
- Aragorn's Story HDU - 3966 -树剖模板
HDU - 3966 思路 :树链剖分就是可以把一个路径上的点映射成几段连续的区间上.这样对于连续的区间可以用线段树维护, 对于每一段连续的区间都可以通过top [ ]数组很快的找到这段连续区间的头. ...
- pymongo使用手册
MongoDB是由C++语言编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储形式类似JSON对象,它的字段值可以包含其他文档.数组及文档数组,非常灵活.在这一节中,我们就来看 ...
- django——用户认证组件
用户认证 auth模块 1 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenti ...
- NOIP-扫雷游戏
题目描述 扫雷游戏是一款十分经典的单机小游戏.在n行m列的雷区中有一些格子含有地雷(称之为地雷格),其他格子不含地雷(称之为非地雷格).玩家翻开一个非地雷格时,该格将会出现一个数字——提示周围格子中有 ...
- flask之wtforms
本篇导航: wtforms组件的使用 自定义From组件 一.wtforms组件的使用 1.flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进 ...
- CSS3_移动端_开机动画
移动端的 开机动画 <meta name="viewport" content="width=device-width, initial-scale=1, user ...
- (87)Wangdao.com第二十天_JavaScript document 节点对象
document 节点对象, 代表整个文档,每张网页都有自己的 document 对象. window.document 当浏览器开始加载文档时就存在了 正常的网页使用 document 或者 win ...
- 变量类型-Set
教程: 集合是一个无序不重复元素的序列,它的特点是:有的可变,有的不可变,元素无序不可重复! 一:集合的创建 (1)使用花括号 set={value1, values2} ...