一 . 啟動(dòng)并運(yùn)行項(xiàng)目
a. 通過cmd命令
?cd /myvue進(jìn)入項(xiàng)目目錄
?npm run serve
b. 通過VScode/HB等
?Ctrl+" ` "
?npm run serve
二 . 組件創(chuàng)建和使用
創(chuàng)建組件 3要素：
- <template>有且只能有一個(gè)根div </template>
- <script></script>
- <style></style>
使用組件 3步驟
- 導(dǎo)入組件
import Header from './components/Header.vue' (.vue可省略) - 注冊(cè)組件
components:{Header} - 使用組件
<header></header>
<template>
<div id="app">
<!-- 03 使用組件 -->
<Header></Header>
</div>
</template>
<script>
// 01 導(dǎo)入組件
import Header from './components/Header.vue'
export default {
// 02 注冊(cè)組件
components:{Header,Nav,Swiper},
</script>
<style>
</style>
四、組件的參數(shù)傳遞
- App.vue屬性傳參 <Nav :navList="navList">
- Nav.vue props:["navList"]
<template>
<div id="app">
<!-- 03 使用組件 -->
<Header></Header>
<Nav :navList="navList"></Nav>
</div>
</template>
<script>
// 01 導(dǎo)入組件
import Nav from './components/Nav.vue'
export default {
// 02 注冊(cè)組件
components:{Nav},
data(){
return {
navList:[
{name:"推薦"},
{name:"手機(jī)"},
{name:"智能"},
{name:"電視"},
{name:"筆記本"},
{name:"家電"},
{name:"生活周邊"},
]
}}
}
</script>
<template>
<div class="btn" v-for="(item,index) in navList" :key="index">
{{item.name}}
</div>
</template>
<script>
export default {
props:["navList"],
}
</script>
五厘肮、 樣式隔離
<style scoped>
六、vue中獲取dom元素
templte 定義ref <div ref="scroll">
script this.$refs.scroll
七、 vue 內(nèi)置參數(shù)
data(）{return {}} 數(shù)據(jù)
methos（） 方法
props:[] 屬性（父?jìng)鬟f過來參數(shù)）
八 . 生命周期鉤子函數(shù)
生命周期鉤子函數(shù)作用
比如我進(jìn)入組件要發(fā)起ajax？
組件渲染好了我要調(diào)用dom操作烁落？
進(jìn)入組件要加入定時(shí)器嘹锁？
離開組件要銷毀定時(shí)器？
要知道組件視圖發(fā)生改變剧董？
創(chuàng)建 渲染 更新 銷毀 前后8個(gè)
beforeCreate 創(chuàng)建前
created 創(chuàng)建完成（可以使用this）
beforeMount 渲染前
mounted 渲染后（可以操作dom）
beforeUpdate 更新前（執(zhí)行多次）
updated 更新后（執(zhí)行多次）
beforeDestroy 銷毀前
destroyed 銷毀后
9. nav選項(xiàng)卡組件
<template>
<div class="nav-wrap">
<div class="nav" ref="scroll">
<div
:class="{'active':index==current}"
@click="selected($event,index)"
v-for="(item,index) in navList"
:key="index"
class="nav-item">
{{item.name}}
</div>
</div>
<div class="nav-toggle"
:class="{'up':showLay==true}"
@click="showLay=!showLay">
>
</div>
<div class="nav-lay" v-if="showLay">
<div class="nav-title">標(biāo)題</div>
<div class="nav-buttons">
<div class="btn"
@click="btnclick(index)"
:class="{'active':index==current}"
v-for="(item,index) in navList"
:key="index"
>{{item.name}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:["navList"],
methods:{
btnclick(index){
this.showLay=false;
// 隱藏彈出菜單按鈕
this.current=index;
// 設(shè)置當(dāng)前選中current
let items = document.querySelectorAll(".nav-item");
// 獲取到所有的.nav-item
this.selected({target:items[index]},index);
// 執(zhí)行selected 方法({target:和index對(duì)應(yīng)的nav-item},index);
// 執(zhí)行selected函數(shù)傳兩個(gè)參數(shù)
// 第一個(gè)參數(shù)是個(gè)對(duì)象 對(duì)象里面有個(gè)target屬性 屬性值是一個(gè)dom節(jié)點(diǎn)(.nav-item 對(duì)應(yīng)current的dom節(jié)點(diǎn))
// 比如我單擊的是btns里面的第2個(gè)元素 讓后我選擇到nav-item里面的第2個(gè)元素作為target屬性值傳遞過去
// 第二個(gè)參數(shù)是index
},
selected(e,index){
this.current = index;
let ew = e.target.offsetWidth; // 獲取當(dāng)前單擊元素寬
let el = e.target.offsetLeft;// 元素左側(cè)偏移值
let elem = this.$refs.scroll; // 獲取滾動(dòng)元素； $refs是vue內(nèi)置的獲取元素對(duì)象
let vw = elem.offsetWidth;// 滾動(dòng)元素整體的寬;
// console.log(ew,el,vw);
elem.scrollLeft = el-vw/2+ew/2;
// 設(shè)置滾動(dòng)元素的左側(cè)滾動(dòng)距離為=調(diào)整單擊元素到畫面的中心破停。
// 單擊的元素滾動(dòng)到最左側(cè)
// 最左側(cè)-總寬度一半+當(dāng)前元素寬度一半
}
},
data(){return {
current:0,// 當(dāng)前選中的導(dǎo)航
showLay:false,//是否顯示導(dǎo)航彈出內(nèi)容
}}
}
</script>
<style scoped>
/* scoped 讓樣式只在當(dāng)前組件中管用 */
.nav-buttons .btn.active{
background-color:#ffe8d5;
color:#f30;
}
.nav-buttons .btn{
width: 20%; height: 30px; line-height: 30px; margin-bottom: 15px; margin-right: 15px; border-radius: 6px; background-color:#fff; border:1px solid #eee; display: inline-block; text-align: center; color:#777; font-size:14px;
}
.nav-lay{
position: absolute; left:0; top:44px; width: 100%;
}
.nav-title{
margin-right: 44px; height: 44px; background-color: #f0f0f0; line-height: 44px; padding-left: 15px; margin-top: -44px; }
.nav-buttons{
padding: 0 15px;
background-color: #f0f0f0;
}
.nav-toggle{
width: 44px;
height: 44px;
line-height: 44px;
text-align: center;
color:#777;
background-color: #f0f0f0;
transform: rotate(90deg);
/* transition:all ease .4s; */
}
.up{
transform: rotate(-90deg);
}
.nav-wrap{
width: 100%;
height: 44px;
display: flex;
position: relative;
z-index: 10000;
background-color: #f0f0f0;
}
.nav{
flex:1;
line-height: 44px;
background-color: #f0f0f0;
overflow-x:auto;
/* 水平滾動(dòng)自動(dòng) */
white-space: nowrap;
/* 行內(nèi)元素不換行 */
scroll-behavior: smooth;
/* 滾動(dòng)平滑 */
-webkit-overflow-scrolling: touch;
}
.nav-item{
display: inline-block;
/* 轉(zhuǎn)換位行內(nèi)塊 */
vertical-align: middle;
/* 垂直居中對(duì)齊 */
padding: 0 15px;
/* 設(shè)置間距 */
color:#484848;
/* 設(shè)置顏色 */
}
::-webkit-scrollbar{
display: none;
}
/* 隱藏滾動(dòng)條 */
.active{color:#f30;}
</style>
引入外部插件組件的一般方法
swiper為例子
- 工作目錄 cmd安裝
myvue> npm install swiper -S
- 使用的組件里面 導(dǎo)入
import Swiper from 'swiper'
import "swiper/css/swiper.css"
如果引入的目錄沒有./ ../等相對(duì)目錄翅楼，那么就會(huì)從 node_module查找需要引用的內(nèi)容
- 樣式
import ‘xxx/swiper.js’
- dom 結(jié)構(gòu)
.swiper-contianer
--- .swiper.wrappr
--- --- .swiper-slide- 初始化swiper
new Swiper(‘.swiper-container’)
- 初始化swiper
swiper組件是要操作dom的，我就應(yīng)該在組件生命周期
mounted 完畢 取執(zhí)行 初始化 swiper
10. swiper組件
<template>
<div class="swiper-container" v-if="gallery.length">
<!-- 只有g(shù)allery有長(zhǎng)度時(shí)候才顯示swiper -->
<div class="swiper-wrapper">
<div class="swiper-slide"
v-for="(item,index) in gallery"
:key="index">
<img :src="item.url" alt="" width="100%">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import Swiper from 'swiper'
import "swiper/css/swiper.css"
// 導(dǎo)入node_modules里面的 swiper文件夾 Swiper類
// 導(dǎo)入node_modules里面的 swiper/css/文件夾里面的swiper.css
export default {
props:["gallery"],
mounted(){
// 當(dāng)頁(yè)面初始渲染完畢執(zhí)行
this.swiper = new Swiper(".swiper-container",{
loop:true,//自動(dòng)讓最后一張的下一張是第一張
pagination:{
el:'.swiper-pagination'//小點(diǎn)指示器
}
});
}
}
</script>
<style>
.swiper-container{
height: 200px;
width: 100%;
}
/* 設(shè)置幻燈片高與寬 */
/* 修改小點(diǎn)高亮顏色 */
.swiper-pagination-bullet-active{
background-color: #f30;
}
</style>
