new Vue(options)中option

2019-4-14

Vue的核心是数据驱动,在template中实现视图逻辑,在javascript中实现业务逻辑。要通过模板template将数据显示在页面上,需要使用指令来实现。

在前面我们已经总结了模板中指令的相关内容。从现在开始,我们关注javascript业务逻辑层。也是就是数据驱动中数据来源和处理。

Vue在实例创建过程中,通过options配置对象传入数据。vue核心层viewModel部分会解析处理这个配置对象,使之能够关联模板,实现数据驱动的效果。

我们先看下在构建一个实例new Vue(options)中传入的options对象基本包含哪些内容:

  1. <div id="app"></div>
  1. var APP = new Vue({
  2. // 挂载点
  3. el: "#app",
  4. // 模板的依赖:组件、自定义指令、过滤器
  5. components: {},
  6. directives: {},
  7. filters: {},
  8. // 需合并的外部选项:混入
  9. mixins: {},
  10. // 本地状态响应式选项:数据、计算属性
  11. data: {},
  12. computed: {},
  13. // 响应式状态触发回调:监听器
  14. watch: {},
  15. // 生命周期函数:实例创建各阶段的回调
  16. beforeCreate: function () {},
  17. created: function () {},
  18. beforeMount: function () {},
  19. mounted: function () {},
  20. beforeUpdate: function () {},
  21. updated: function () {},
  22. activated: function () {},
  23. deactivated: function () {},
  24. beforeDestory: function () {},
  25. destoryed: function () {},
  26. // 事件处理函数:方法
  27. methods: {},
  28. // 声明式渲染:template/render 二选一
  29. template: `<div>
  30. <div>日期:{{ day | formatTimestampToDate }}</div>
  31. <button type="button" @click="addOneDay">add one day</button>
  32. </div>
  33. `,
  34. render: h => h(), //渲染:与template 二选一
  35. })

上面选项顺序遵守vue官方推荐,具体查看 vue编码风格指南

后面我们对配置对象options进行理解:

  1. el:'' 挂载点
  2. components: {} 组件
  3. directives: {} 自定义指令
  4. filters: {} 过滤器
  5. mixins: {} 混入
  6. data: {} 数据
  7. computed: {} 计算属性
  8. watch: {} 监听器
  9. methods: {} 方法
  10. template: '' 模板
  11. render() 函数渲染

vue-learning:14 - js - new Vue(options)中option的更多相关文章

  1. vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决

    在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...

  2. Vue使用Clipboard.JS在h5页面中复制内容

    安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引 ...

  3. Vue:node.js与vue安装配置

    下载node.js 官网: https://nodejs.org/zh-cn/ 查看node版本 node -v 配置淘宝NPM镜像源(下载速度快) npm install -g cnpm --reg ...

  4. js html标签select 中option 删除除了第一行外的其他行

    背景:共两个下拉框,第一个下拉框选择完之后,以第一个选定的值为条件返回第二个下拉框中的内容,用js中的createElement()创建,并利用appendChild()来添加进父标签.出现意外:每次 ...

  5. vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  6. Vue.js 在 webpack 脚手架中使用 cssnext

    Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...

  7. angular.js和vue.js中实现函数去抖(debounce)

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

  8. vue中html、js、vue文件之间的简单引用与关系

    有关vue文件记录:index.html在html中运用组件 <body> <app></app> <!-- 此处app的组件为入口js main.js中定义 ...

  9. vue-cli中的index.html ,main.js , App.vue的关系

    ###发现不少小伙伴才刚开始接触到这个结构都被绕的迷糊,而发现很多人说的也不是那么准确,那么下面我来说一下是怎么回事### 1.首先我们来看看原生Vue中组件的写法, 我们按照vue-cli的结构按照 ...

随机推荐

  1. More Effective C++: 05技术(29)

    29:引用计数 本章首先实现一个带引用计数String,然后逐步优化,介绍引用计数的常规实现. 实现引用计数的String,首先需要考虑:引用计数在哪存储.这个地方不能在String对象内部,因为需要 ...

  2. MVC设计之MVC设计模式(介绍)

    mvc介绍; 首先先引用一个百度百科的介绍: MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用 ...

  3. 开窗函数over()中partition by关键字解析

    partition  by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition  by用于给结果集分组,如果没 ...

  4. Idea创建maven项目 标签: idea 2016-12-28 21:51 605人阅读 评论(27) 收藏

    很久之前就听说了idea,界面也的确比eclipse好看,不过一直没有机会使用,这两天试用了一下,代码提示方面的确很好用,不过使用习惯跟eclipse还是有一些差距的,下面介绍一下如何用idea创建一 ...

  5. Java练习 SDUT-2401最大矩形面积

    最大矩形面积 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 在一个矩形区域内有很多点,每个点的坐标都是整数.求一个矩形 ...

  6. 单颗GPU计算能力太多、太贵?阿里云发布云上首个轻量级GPU实例

    摘要: 阿里云发布了国内首个公共云上的轻量级GPU异构计算产品——VGN5i实例,该实例打破了传统直通模式的局限,可以提供比单颗物理GPU更细粒度的服务,从而让客户以更低成本.更高弹性开展业务. 在硅 ...

  7. XML内部DTD约束 Day24

    <?xml version="1.0" encoding="UTF-8"?> <!-- 内部DTD --> <!-- XML:ex ...

  8. QT 开发ros gui过程中遇到:error: catkin_package() include dir 'include' does not exist relative to '/home/jun/catkin_ws/src/qt_ros_test' /opt/ros/kinetic/share/catkin/cmake/catkin_package.cmake:102 (_catkin_p

    这是因为在ros工作空间的包中没有include文件夹造成的,所以在该路径下创建include的文件夹,问题就解决了.

  9. vue init定制团队模板使用方法

    每次做项目都要自己搭建项目目录,或者换了公司就的重新搭建项目目录,是不是很麻烦呢?有没有想过一次性把项目目录搭建好,以后直接用呢?你首先想到的可能是复制自己原来的项目,然后删除.修改等等.然而有个更方 ...

  10. oracle函数 round(x[,y])

    [功能]返回四舍五入后的值 [参数]x,y,数字型表达式,如果y不为整数则截取y整数部分,如果y>0则四舍五入为y位小数,如果y小于0则四舍五入到小数点向左第y位. [返回]数字 [示例] se ...