Vue 是什么?

• Vue (读音 /vjuː/, 类似于 view)

• Vue是一套用于构建用户界面的渐进式框架。

• 与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用。

• Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。

• 另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用提供驱动。

出自 Vue.js 官方文档

• Vue 有很多特点和 Web 开发中常见的高级功能
  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟 DOM

Vue 实例

new Vue(options)
options = {
  el: "value" // "value - 元素选择器" 进行数据绑定(实际上调用了$mount())
  data: {
    // 数据
    // 实例对象可直接使用Object的方式定义数据
    // 组件必须通过return一个Object的方式来定义数据
  },
  computed: {
    // 计算属性
    // 优点: 
    //      在template中调用时可省略"()", 即调用get函数
    //      当不发生set时, 每次get都不会重新计算, 效率提高
    attr: {
      set: function(newValue) {}
      get: function() {}
    }
  }
  methods: {
    // 方法
    // 在template中使用时需要"()"来调用
    attr: function() {}
  },
  filters: {
    // 过滤器方法:
    // 使用时: data | function, 会自动把 data 作为参数传入 function 中
    attr: function(data) {}
  },
  components: {
    // 局部组件:
    // "组件标签名": 组件构造器
  },
  watch: {
    // 监听Vue中数据发生改变的事件
    attr(newValue, oldValue) {

    }
  },

  /** 以下均为 生命周期函数 **/

  created() {
    // 当组件被创建后回调该函数
    // 注意: 组件被创建后DOM并不一定创建完成, 即不能在created中操作DOM元素
  },
  mounted() {
    // 当组件的template挂载到DOM之后回调该函数
  },
  updated() {
    // 当页面发生更新后回调该函数
  },
  destroyed() {
    // 组件销毁后回调
  }
}

生命周期

lifecycle.png

lifecycle-hooks.png

计算属性详细

• 在template中使用时不需要(), 会默认调用get函数

• 使用时attr即调用get方法, 为attr赋值即调用set方法

• 计算属性一般没有set方法, 所以计算属性也称只读属性

即可以简写:

computed: {
  attr: function() {}

  /** 或以下 es6 语法 **/
  attr: () => {}
}

computed 和 methods 的对比

• computed 的属性如果没有变化, 则 computed 有缓存, 即 computed 只执行一次, 而 methods 没有缓存, 调用几次执行几次
  • 相比之下, 如果某个元素get比较多的话推荐使用computed
  • 反之, 如果逻辑比较复杂, 那么使用methods