vue从入门到xx，第二节：vue.js 组件开发和使用

接文集上一篇。

新建的项目工程下，在src文件夹下新建一个文件夹component作为存放组件的文件夹，然后新建文件test.vue，如下图所示。

文件结构

在文件中编写代码：

<template>
    <div id="test">
        <h1>This is {{test}}</h1>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data () {
            return{
                test:"testValue"
            }
        }
    }
</script>

注意：这里绑定了test的值为testValue

默认的index.html

在默认的index.html中规定了其默认入口是位于src文件夹下的App.vue，所以，我们在App.vue中进行我们自己组件的注册和显示

使用import test from './component/test.vue'引入需要的组件。
在export default中添加components: {test}
完整的代码如下图所示。

添加组件

然后在页面中显示引入组件，使用<test></test>

test组件

其显示效果：

显示效果