Vue构造选项(一)

Rinsann 2021年09月09日 542次浏览

Vue构造选项(一)

创建Vue实例

内存图

image20210925101113540.png

把Vue的实例命名为vm是尤雨溪的习惯,我们应该沿用

vm对象封装了对视图的所有操作,包括数据读写、事件绑定、DOM更新

vm的构造函数是Vue,按照ES6的说法,vm所属的类是Vue

options是new Vue的参数,一般称之为选项或构造选项

一、options里面有什么

Vue文档

  • 英文文档里面搜options,中文文档里面搜选项,即可得到相关文档

options的五类属性

  • 数据:data、props、propsData、computed、methods、watch
  • DOM:el、template、render、renderError
  • 生命周期钩子:beforecreated、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured
  • 资源:directives、filters、components
  • 组合:parent、mixins、extends、provide/inject
  • 其他:name、delimiters、functional、model、inheritAttrs、comments

入门属性

el - 挂载点

  • 可用 $mount 代替

data - 内部数据

  • 支持对象和函数,优先用函数

methods - 方法

  • 事件处理函数或者是普通函数

components

  • Vue组件,注意大小写
  • 有三种引入方式
    • import引入vue文件,在new Vue实例中components应用
    • 在同一个文件中使用Vue.component定义,全局的可以任意使用
    • 将前两种方式结合起来用

四个钩子

  • created - 实例出现在内存中
  • mounted - 实例出现在页面中
  • updated - 实例更新了
  • destroyed - 实例从页面和内存中消亡

props - 外部数据

  • 也叫属性
  • message = “n” 传入字符串
  • :message = “n” 传入this.n数据
  • :fn=“add” 传入this.add 函数