cli 组件化开发简单例子

简单例子

编写组件代码

在components里编写组件代码

<template>
  <h4 class="footer">这是一个底部栏</h4>
</template>

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

<style scoped>
  .footer{
    color: bisque;
  }
</style>

在App.vue里导入注册并使用组件

<template>
  <div id="app">
    <Header></Header>
    <Sidebar></Sidebar>
<!--组件注册后相同名字的标签名就会被替换成组件代码-->
    <Footer></Footer>
  </div>
</template>

<script>
//导入组件
import Footer from "@/components/Footer";

export default {
  name: 'App',
  components: {
    //在这里注册组件
      Footer
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果:

利用prop实现变量赋值是效果

编写Header组件 这里我们使用props类似定义一个变量

<template>
  <h2 class="title">{{title}}</h2>
</template>

<script>
export default {
  name: "Header",
  props : {
    title : String
  }
}
</script>

<style scoped>
  .title{
    color: crimson;
  }
</style>

在App.vue里注册使用组件,同时为其赋值

<template>
  <div id="app">
    <Header title="为标题赋值"></Header>
    <Sidebar></Sidebar>
<!--组件注册后相同名字的标签名就会被替换成组件代码-->
    <Footer></Footer>
  </div>
</template>

<script>
//导入组件
import Footer from "@/components/Footer";
import Sidebar from "@/components/Sidebar";
import Header from "@/components/Header";
export default {
  name: 'App',
  components: {
    //在这里注册组件
      Footer,
      Sidebar,
      Header
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果