Vue组件

Vue.js组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

1.components（组件）文件下的Navigation.vue的实例是一个导航，代码如下:

<template>
    <div>
        <ul class="list">
            <li>Vue</li>
            <li>Js</li>
            <li>Java</li>
            <li>Python</li>
        </ul>
    </div>
</template>
<script>
export default {
    
}
</script>
<style>
    .list{
        list-style: none;
        float: left;
    }
</style>

2.home文件夹下的Index.vue

<template>
    <div id="app">
        <v-nav></v-nav>
    </div>
</template>
<script>
//导入导航组件
import vNav from "../../components/Navigation.vue"
export default {
    components:{
    	//使用上面的组件
        vNav
    }
}
</script>

解释如下图：下面1采用的是小驼峰命名，在html页面会自动识别为以大写字母为分割点以- 的形式分开例如vNav会以 显示

3.router文件夹下的routes.js代码如下：

//导入Home文件下的Index
import Home from "../views/home/Index.vue"
let routes=[
    {
            path: '/home',
            component:Home,
            name:"主页",
            hidden:true 
    }
]
export default routes;

通过访问127.0.0.1:8010/home,运行结果如下：