浏览代码

Add example vue component

master
Ray Burgemeestre 6 年前
父节点
当前提交
69cdb8f343
共有 2 个文件被更改,包括 28 次插入4 次删除
  1. +12
    -4
      src/App.vue
  2. +16
    -0
      src/components/HelloComponent.vue

+ 12
- 4
src/App.vue 查看文件

<template> <template>
<div class="full-width center-content">
<h1>Hello World wWohoo!</h1>
</div>
<div class="full-width center-content">
<hello-component name="World" />
</div>
</template> </template>


<script>
import HelloComponent from './components/HelloComponent.vue'
export default {
components: {
HelloComponent
}
}
</script>

<style scoped> <style scoped>
.full-width { .full-width {
width: 100%; width: 100%;
align-items: center; align-items: center;
} }
</style> </style>


+ 16
- 0
src/components/HelloComponent.vue 查看文件

<template>
<h1>Hello {{ name }}!</h1>
</template>
<script>
export default {
props: {
name: {
type: String,
required: true
}
}
}
</script>
<style scoped>
h1 { color: red; }
</style>

正在加载...
取消
保存