接文集上一篇。
新建的项目工程下,在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中规定了其默认入口是位于
src
文件夹下的App.vue
,所以,我们在App.vue中进行我们自己组件的注册和显示
使用import test from './component/test.vue'
引入需要的组件。
在export default中添加components: {test}
完整的代码如下图所示。
然后在页面中显示引入组件,使用<test></test>
其显示效果: