vue-单文件组件基本使用

模块化

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

vue-cil脚手架

使用

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

npm install -g @vue/cli 

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

2. 切换到要创建的目录，然后使用命令创建项目

vue create xxx

3. 启动项目

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>