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(): 做收尾工作, 如: 清除定时器
VUE.js学习笔记_第1张图片
1529842912075.png
beforecreated:el 和 data 并未初始化 
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化 
mounted :完成挂载
另外在标红处,我们能发现el还是 {{message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
VUE.js学习笔记_第2张图片
1529840034524.png

你可能感兴趣的:(VUE.js学习笔记)