vue-learning：14 - js - new Vue(options)中option - JavaScript

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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 二选一

})