目录
template标签
这个标签里面写html的代码。html代码在前端三大件中的地位就是在最顶层,其作用通常是设置框架和整体布局。比如下面一段的代码
<template> <div class="row"> <div class="col-3"> <img src="https://cdn.acwing.com/media/user/profile/photo/200349_lg_080b3b050d.jpg" class="img-fluid" alt=""> </div> <div class="col-9 "> <div class="username">小仙女</div> <div class="fans">粉丝:123</div> <button type="button" class="btn btn-secondary btn-sm">+关注</button> </div> </div> </template>
script标签
这个标签里面写JS的代码。 通常包含有export default{.........},import 'name' from '文件路径'
export default
里面通常要写两个属性。
components:描述这个组件或者页面中用到了哪些我们写出来的组件
name:描述了这个组件的名字,在以后import引入到其他页面的时候会用到。
下图就是一个例子。
通过这一段代码可以看出,这个页面的名字是UserList,所用到了的组件有ContentBase和UserProfileInfo
import
通常写做import 'name' from '文件名';
把需要的组件引入到当前的文件中去。
style标签
这个标签里面填写CSS定义样式的代码。CSS里要添加scoped的属性,表示设置的相关属性只影响当前的页面。
例子
<template> <ContentBase> 404 </ContentBase> </template> <script> import ContentBase from '../components/ContentBase'; export default { name: "NotFoundView", components: { ContentBase, } } </script> <style scoped> </style>