Element UI
Element,一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫
基本使用示例代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=https://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style type="text/css">
.el-menu{
display: flex;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
}
</style>
<body>
首頁
輕課
免費課程
學位課程
智能題庫
處理中心
<script>
let my_header = {
template:"#header",
data(){
return{
activeIndex:"/"
}
}
};
let url = [
{
path:"/",
component:{
template:'<div><h1>首頁組件</h1></div>'
}
},
{
path:"/course",
component:{
template: '<div><h1>課程組件</h1></div>'
}
},
];
let router = new VueRouter({
routes:url,
})
const app = new Vue({
el:"#app",
router: router,
components:{
my_header:my_header
}
})
</script>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/2354.html
標籤:HTML5
上一篇:Vue的生命周期
