要組合各種 Vue 組件的組件看這篇就對了
Vue 常用功能
簡易 vue 環境
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data(){
return{
message:'Hello Vue.js'
}
}
})
</script>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data(){
return{
message:'Hello Vue.js'
}
}
})
</script>
自訂樣式
headerTop
<!-- headerTop No1 -->
<!-- headerTop No1 -->
<el-row class="flexbox-spa">
<el-col :xs="12" :sm="16" :md="18" :lg="20" :span="20">
<img src="@/assets/image/icon_x64.png" />
</el-col>
<el-col :xs="6" :sm="4" :md="3" :lg="2" :span="2"><el-button round>Sing in</
el-button></el-col>
<el-col :xs="6" :sm="4" :md="3" :lg="2" :span="2"><el-button round>Get started</
el-button></el-col>
</el-row>
<el-row class="flexbox-spa">
<el-col :xs="12" :sm="16" :md="18" :lg="20" :span="20">
<img src="@/assets/image/icon_x64.png" />
</el-col>
<el-col :xs="6" :sm="4" :md="3" :lg="2" :span="2"><el-button round>Sing in</
el-button></el-col>
<el-col :xs="6" :sm="4" :md="3" :lg="2" :span="2"><el-button round>Get started</
el-button></el-col>
</el-row>
// headerTop No1
.el-row {
padding-right:2rem;
.el-col:nth-of-type(1) {
text-align: left;
padding-left: 10%;
display:flex;
align-items: center;
img {
width:48px;
height:48px;
background-color: $bcolor2;
}
}
.el-col:nth-of-type(2),
.el-col:nth-of-type(3){
height:64px;
line-height:64px;
}
}
.el-row {
padding-right:2rem;
.el-col:nth-of-type(1) {
text-align: left;
padding-left: 10%;
display:flex;
align-items: center;
img {
width:48px;
height:48px;
background-color: $bcolor2;
}
}
.el-col:nth-of-type(2),
.el-col:nth-of-type(3){
height:64px;
line-height:64px;
}
}
