Vue入门系列（二）Vue实例和组件

Vue实例是Vue应用的启动器，Vue组件是Vue实例的扩展。

1. Vue实例

通过构造函数可以创建一个Vue的根实例。

SPA应用中，只会创建一个Vue根实例，应用都是通过这个根实例启动的。

实例化 Vue 时，需要传入一个选项对象，它可以包含数据（data），模板（template），挂载元素（el），方法（methods）与生命周期钩子函数（created，mounted...）等选项。下面是一个真实项目中定义的Vue实例：

import Vue from 'vue';
import App from './App.vue'
...
// 激活Vue调试工具vue-devtools
Vue.config.devtools = true;

new Vue({
    router, // react-router
    store,  // vuex
    el: '#app', // 需要渲染的DOM节点
    render: h => h(App) // //h是createElement 的别名，创建/加载组件
});

2. Vue组件

Vue组件是被扩展的Vue实例，同Vue实例类似，它也需要传入一个选项对象，包含数据，模板，生命周期钩子函数等等。

组件分为局部组件和全局组件。

(1)局部组件

局部组件只能在所定义的Vue实例中使用，格式如下：

//定义<my-component>组件
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
})

(2)全局组件

第一种方式：利用Vue提供的静态函数component注册：

Vue.component('my-component', {
  template: '<div>A custom component!</div>',
  //必须是用函数返回数据模型，这样才能让多个组件实例拥有自己的数据模型
  data: function () {
    return data;
  }
})

第二种方式：单文件组件

定义一个后缀为.vue的文件，利用webpack编译处理。

单文件组件的最大优点是，可以将组件相关的HTML，CSS，JS都定义在.vue文件内，默认支持CSS模块化（样式仅在该组件内有效），JavaScript模块化（CommonJs模块）。

参考官网例子：

单文件组件模板.png

注意，<style>有scope属性后，能够将标签内部的CSS选择器自动加上后缀，使其仅应用在此组件内。下图是编译后的组件内联样式：

css module.png

vue文件组件也支持CSS预处理语言，比如scss或者less。如需使用scss，定义lang属性即可：

<style lang="scss" scoped>...</style>

webpack.config中需要加载vue-loader来解析.vue文件（下面配置支持在vue组件中使用scss语法）。

module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                    // other vue-loader options go here
                }
            },
            ......
        ]
    },

小结

建议采用单文件组件方式创建Vue项目，这样可以更好的和路由插件配合。
随着项目不断迭代，组件复杂度会随之增加，单文件组件有着更好的可读性和可扩展性，非常适合大中型项目。

下一节：Vue入门系列（三）Vue实例的生命周期

微信公众号：