VUE.js学习笔记

1. vue是什么

1). 一位华裔前Google工程师(尤雨溪)开发的前端js库
2). 作用: 动态构建用户界面
3). 特点:
    * 遵循MVVM模式
    * 编码简洁, 体积小, 运行效率高, 移动/PC端开发
    * 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目
4). 与其它框架的关联:
    * 借鉴angular的模板和数据绑定技术
    * 借鉴react的组件化和虚拟DOM技术
5). vue包含一系列的扩展插件(库):
    * vue-cli: vue脚手架
    * vue-resource(axios): ajax请求
    * vue-router: 路由
    * vuex: 状态管理
    * vue-lazyload: 图片懒加载
    * vue-scroller: 页面滑动相关
    * mint-ui: 基于vue的组件库(移动端)
    * element-ui: 基于vue的组件库(PC端)

2.基本使用

1). 引入vue.js
2). 创建Vue实例对象(vm), 指定选项(配置)对象
    el : 指定dom标签容器的选择器
    data : 指定初始化状态数据的对象/函数(返回一个对象)
3). 在页面模板中使用{{}}或vue指令

3.VUE对象的常用选项

el
- 指定dom标签容器的选择器，Vue就会管理对应的标签及其子标签
data
- 对象或函数类型，指定初始化状态属性数据的对象
- vm也会自动拥有data中所有属性，页面中可以直接访问使用
- 数据代理: 由vm对象来代理对data中所有属性的操作(读/写)
methods
- 包含多个方法的对象供页面中的事件指令来绑定回调
- 回调函数默认有event参数, 但也可以指定自己的参数
- 所有的方法由vue对象来调用, 访问data中的属性直接使用this.xxx
computed
- 包含多个方法的对象，对状态属性进行计算返回一个新的数据, 供页面获取显示
- 一般情况下是相当于是一个只读的属性
- 利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化
  - 如何给对象定义get/set属性
    
    在创建对象时指定: get name () {return xxx} / set name (value) {}
    对象创建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}})

watch

包含多个属性监视的对象，分为一般监视和深度监视
'xxx' : {
deep : true,
handler : fun(value)
}
另一种添加监视方式: vm.$watch('xxx', funn)

comouted计算属性
    在vue的 模板内（{{}}）是可以写一些简单的js表达式的 ，很便利。但是如果在页面中使用大量或是复杂的表达式去处理数据，对页面的维护会有很大的影响。这个时候就需要用到computed 计算属性来处理复杂的逻辑运算。
1.优点： 
在数据未发生变化时，优先读取缓存。computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数。
2.setter 和 getter方法：（注意在vue中书写时用set 和 get） 
setter 方法在设置值是触发。 
getter 方法在获取值时触发。

watch方法 
虽然计算属性在大多数情况下是非常适合的，但是在有些情况下我们需要自定义一个watcher，在数据变化时来执行异步操作，这时watch是非常有用的。

4.class与style绑定

理解
- 在应用界面中, 某个(些)元素的样式是变化的class/style绑定就是专门用来实现动态样式效果的技术
  1. class绑定: :class='xxx'
    - xxx是字符串
    - xxx是对象
    - xxx是数组
  2. style绑定
    - :style="{ color: activeColor, fontSize: fontSize + 'px' }"
      
      其中activeColor/fontSize是data属性

5.生命周期

vue对象的生命周期

初始化显示(只执行一次)

* beforeCreate()
* created()
* beforeMount()
* mounted()

更新状态(执行多次)
```
* beforeUpdate()
* updated()
```

销毁vue实例(只执行一次)

* beforeDestory()
* destoryed()
//销毁vue实例
vm.$destory()

常用的生命周期方法
- created()/mounted(): 发送ajax请求, 启动定时器等异步任务
- beforeDestory(): 做收尾工作, 如: 清除定时器

1529842912075.png

beforecreated：el 和 data 并未初始化 
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 
mounted ：完成挂载
另外在标红处，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

1529840034524.png