vue中常见的3块标签的介绍

最新推荐文章于 2024-05-07 11:40:10 发布

快乐平凡的小熙

最新推荐文章于 2024-05-07 11:40:10 发布

阅读量763

点赞数

分类专栏： vue框架文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/QDQE232/article/details/126318731

版权

vue框架专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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>