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