vue-learning:14 - js - new Vue(options)中option
new Vue(options)中option
2019-4-14
Vue的核心是数据驱动
,在template
中实现视图逻辑,在javascript
中实现业务逻辑。要通过模板template
将数据显示在页面上,需要使用指令来实现。
在前面我们已经总结了模板中指令的相关内容。从现在开始,我们关注javascript
业务逻辑层。也是就是数据驱动中数据来源和处理。
Vue在实例创建过程中,通过options配置对象传入数据。vue核心层viewModel部分会解析处理这个配置对象,使之能够关联模板,实现数据驱动的效果。
我们先看下在构建一个实例new Vue(options)中传入的options对象基本包含哪些内容:
<div id="app"></div>
var APP = new Vue({
// 挂载点
el: "#app",
// 模板的依赖:组件、自定义指令、过滤器
components: {},
directives: {},
filters: {},
// 需合并的外部选项:混入
mixins: {},
// 本地状态响应式选项:数据、计算属性
data: {},
computed: {},
// 响应式状态触发回调:监听器
watch: {},
// 生命周期函数:实例创建各阶段的回调
beforeCreate: function () {},
created: function () {},
beforeMount: function () {},
mounted: function () {},
beforeUpdate: function () {},
updated: function () {},
activated: function () {},
deactivated: function () {},
beforeDestory: function () {},
destoryed: function () {},
// 事件处理函数:方法
methods: {},
// 声明式渲染:template/render 二选一
template: `<div>
<div>日期:{{ day | formatTimestampToDate }}</div>
<button type="button" @click="addOneDay">add one day</button>
</div>
`,
render: h => h(), //渲染:与template 二选一
})
上面选项顺序遵守vue
官方推荐,具体查看 vue编码风格指南
后面我们对配置对象options
进行理解:
el:''
挂载点components: {}
组件directives: {}
自定义指令filters: {}
过滤器mixins: {}
混入data: {}
数据computed: {}
计算属性watch: {}
监听器methods: {}
方法template: ''
模板render()
函数渲染
vue-learning:14 - js - new Vue(options)中option的更多相关文章
- 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 ...
- Vue使用Clipboard.JS在h5页面中复制内容
安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引 ...
- Vue:node.js与vue安装配置
下载node.js 官网: https://nodejs.org/zh-cn/ 查看node版本 node -v 配置淘宝NPM镜像源(下载速度快) npm install -g cnpm --reg ...
- js html标签select 中option 删除除了第一行外的其他行
背景:共两个下拉框,第一个下拉框选择完之后,以第一个选定的值为条件返回第二个下拉框中的内容,用js中的createElement()创建,并利用appendChild()来添加进父标签.出现意外:每次 ...
- vue项目中主要文件的加载顺序(index.html、App.vue、main.js)
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
- Vue.js 在 webpack 脚手架中使用 cssnext
Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...
- angular.js和vue.js中实现函数去抖(debounce)
问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...
- vue中html、js、vue文件之间的简单引用与关系
有关vue文件记录:index.html在html中运用组件 <body> <app></app> <!-- 此处app的组件为入口js main.js中定义 ...
- vue-cli中的index.html ,main.js , App.vue的关系
###发现不少小伙伴才刚开始接触到这个结构都被绕的迷糊,而发现很多人说的也不是那么准确,那么下面我来说一下是怎么回事### 1.首先我们来看看原生Vue中组件的写法, 我们按照vue-cli的结构按照 ...
随机推荐
- More Effective C++: 05技术(29)
29:引用计数 本章首先实现一个带引用计数String,然后逐步优化,介绍引用计数的常规实现. 实现引用计数的String,首先需要考虑:引用计数在哪存储.这个地方不能在String对象内部,因为需要 ...
- MVC设计之MVC设计模式(介绍)
mvc介绍; 首先先引用一个百度百科的介绍: MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用 ...
- 开窗函数over()中partition by关键字解析
partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没 ...
- Idea创建maven项目 标签: idea 2016-12-28 21:51 605人阅读 评论(27) 收藏
很久之前就听说了idea,界面也的确比eclipse好看,不过一直没有机会使用,这两天试用了一下,代码提示方面的确很好用,不过使用习惯跟eclipse还是有一些差距的,下面介绍一下如何用idea创建一 ...
- Java练习 SDUT-2401最大矩形面积
最大矩形面积 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 在一个矩形区域内有很多点,每个点的坐标都是整数.求一个矩形 ...
- 单颗GPU计算能力太多、太贵?阿里云发布云上首个轻量级GPU实例
摘要: 阿里云发布了国内首个公共云上的轻量级GPU异构计算产品——VGN5i实例,该实例打破了传统直通模式的局限,可以提供比单颗物理GPU更细粒度的服务,从而让客户以更低成本.更高弹性开展业务. 在硅 ...
- XML内部DTD约束 Day24
<?xml version="1.0" encoding="UTF-8"?> <!-- 内部DTD --> <!-- XML:ex ...
- 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的文件夹,问题就解决了.
- vue init定制团队模板使用方法
每次做项目都要自己搭建项目目录,或者换了公司就的重新搭建项目目录,是不是很麻烦呢?有没有想过一次性把项目目录搭建好,以后直接用呢?你首先想到的可能是复制自己原来的项目,然后删除.修改等等.然而有个更方 ...
- oracle函数 round(x[,y])
[功能]返回四舍五入后的值 [参数]x,y,数字型表达式,如果y不为整数则截取y整数部分,如果y>0则四舍五入为y位小数,如果y小于0则四舍五入到小数点向左第y位. [返回]数字 [示例] se ...