一般在开发中,我们会人为把组件分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>
效果:
从上面可以看到,虽然我们现在使用了单文件组件,但是之前我们在脚本化阶段学习过的所有语法,在这里都是通用的。