【前端】Vue笔记

搭建Vue开发环境

• 下载Vue.js
• 安装浏览器扩展：Vue.js devtools

Vue基础

模板语法

• 插值：’{‘{‘’}’’}’

数据绑定

• v-bind 单向
• v-model 双向

MVVM模型

1. M：模型(Model) ：data中的数据
2. V：视图(View) ：模板代码
3. VM：视图模型(ViewModel)：Vue实例

数据代理

Vue中的数据代理：

• 通过vm对象来代理data对象中属性的操作（读/写）

Vue中数据代理的好处：

• 更加方便的操作data中的数据

基本原理：

• 通过Object.defineProperty()把data对象中所有属性添加到vm上。
• 为每一个添加到vm上的属性，都指定一个getter/setter。
• 在getter/setter内部去操作（读/写）data中对应的属性。

事件处理

v-on: @

• 事件的回调需要配置在methods对象中，最终会在vm上

事件修饰符

1. prevent：阻止默认事件（常用）；
2. stop：阻止事件冒泡（常用）；
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素时才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

键盘事件

• keyup
• keydown
• keypress

计算属性

• 计算属性是基于它们的响应式依赖进行缓存的
• 与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
• 1.计算属性最终会出现在vm上，直接读取使用即可。

监视属性

computed和watch之间的区别

• computed能完成的功能，watch都可以完成。
• watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

绑定样式

条件渲染

• v-if

列表渲染

• v-for

收集表单数据

• v-model

过滤器

内置指令

• v-text
• v-html
• v-cloak
• v-once
• v-pre

自定义指令

生命周期

• 常用的生命周期钩子：
  1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  2. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

组件

• 非单文件组件（不常用）
• 单文件组件