Vue cli之创建组件

一般在开发中，我们会人为把组件分2个目录存放，一个代表的页面组件，另一个代表页面一部分的子组件。

src/
  |- views/
     |- Home.vue
  |- components/
  |- App.vue
  |- main.js

 

 在组件中编辑三个标签，编写视图、vm对象和css样式代码。

 

1、template 编写html代码的地方

<template>
  <!-- template标签里面有且只有一个子标签 -->
  <div>
    <h1>Home页面</h1>
    <button @click="num--">-</button>
    <input type="text" size="1" v-model="num" id="">
    <button @click="num++">+</button>
  </div>
</template>

　　

2、script编写vue.js代码

<script>
export default {
  name: "Home",   // 定义组件名，组件名和文件名一致，每个单词首字母大写
  data(){  // 注意：data必须是一个函数，函数的返回值必须是一个json对象
    return {
      num: 10
    }
  }
};
</script>

　　

3、style编写当前组件的样式代码

<style scoped>
/*
  scoped 声明当前style的css样式只能在当前组件中有效，不会影响其他的组件
  如果不声明，则变成全局样式，会污染其他组件的外观效果
 **/
h1{
  color: red;
}
button {
  border-radius: 5px;
  border: 1px solid #ccc;
}
</style>

　　

接下来，就可以把Home页面导入到App.vue，让用户可以直接访问。App.vue，代码：

<template>
  <div id="app">
    <Home></Home>
  </div>
</template>

<script>
// import 变量名 from '包路径'
// import {变量名1, 变量名2,...} from '包路径'
import Home from "./views/Home";
export default {
  name: 'App',  // 组件名，
  components: { // 子组件
    Home,
  }
}
</script>

<style>

</style>

　　

效果：

 

 从上面可以看到，虽然我们现在使用了单文件组件，但是之前我们在脚本化阶段学习过的所有语法，在这里都是通用的。