组件
全局组件
import Index from './components/index.vue';
Vue.component("Index", Index);
局部组件
在template标签中
<Index/>
在app.vue中的script标签中
import Index from './components/index.vue';
export default {
name: 'App',
components:{
Index
}
}
router路由
1.
// 下载
cnpm install --save-dev vue-router
2.
// 引入
import VueRouter from "vue-router"
// 创建一个主路由并引入
import Index from '../components/index.vue';
3.
// 挂载路由
Vue.use(VueRouter);
4.
// 实例化
let router = new VueRouter({
routes: [{
path: '/index',
component: Index
}]
})
5. 在实例化vue中添加router
new Vue({
el: '#app',
// 添加router:router 可省略
router,
components: { App },
template: '<App/>'
})
6.在app.vue的template中
<router-view></router-view>
组件的概念
1.组件是vue最强大的功能
2.可以扩展html元素,封装可重用的代码
3.组件系统让我们可复用的小组件来构建大型应用