vue-单文件组件基本使用

最新推荐文章于 2022-06-23 08:15:02 发布

'Han'Zi

最新推荐文章于 2022-06-23 08:15:02 发布

阅读量836

点赞数 1

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

本文链接：https://blog.csdn.net/qq_52347540/article/details/121023067

版权

前端同时被 2 个专栏收录

59 篇文章 1 订阅

订阅专栏

vue

27 篇文章 1 订阅

订阅专栏

本文介绍了Vue.js的模块化思想，通过将大型HTML文件拆分为Vue组件，每个组件包含HTML、JS和CSS。详细讲解了vue-cli的使用，包括全局安装、创建项目、启动项目。此外，还阐述了单文件组件的格式，如template、script和style的使用，以及如何编写和暴露组件。同时，提到了 scoped 样式的作用，防止样式冲突。最后，展示了如何引入和使用组件，强调了组件注册的步骤。

摘要由CSDN通过智能技术生成

模块化

就是把一个很大的东西，拆分成一些小的东西
vue组件就是把一个大的html文件，拆成了一些小的vue文件
这个vue文件里面，包括了html，js，css
当要去使用者组件的时候，就需要暴露这些组件【export】，然后引入【import】

vue-cil脚手架

使用

全局安装（仅第一次执行）：

npm install -g @vue/cli

此后命令行就有了vue这个命令

vue create xxx

启动项目

npm run serve

用处

由于浏览器不认识.vue文件，就需要我们搭建vue脚手架
vue脚手架给我们配置好了基本上所有东西，我们直接在里面写项目就可以了

单文件组件格式

temlate标签里面的内容，必须有一个根标签
写入的组件必须要暴露【不然等于没写】
csss coped样式

作用：让样式局部生效【防止和其他组件样式冲突被覆盖】
写法：

<template>
<!--这里面写html-->
</template>

<script>
export default {
  name: "qq"
}
</script>

<style scoped>
/*这里面写css*/
</style>

组件使用

1.首先要在我们使用的地方去引入组件
2.引入后，配置一项components:{组件名,组件名}
3.配置后,直接当做标签中使用<组件名></组件名>

<template>
<div>
  <h1>我是App</h1>
  <School></School>
  <bus></bus>
  <jv-ming></jv-ming>
  
</div>
</template>

<script>
import School from "./components/School";
import Bus from "./components/Bus";
import JvMing from "./components/JvMing";
export default {
  components:{JvMing, Bus, School},
  data(){
    return{',
    }
    },
}
</script>