一 . 启动并运行项目
a. 通过cmd命令
cd /myvue进入项目目录
npm run serve
b. 通过VScode/HB等
Ctrl+" ` "
npm run serve
二 . 组件创建和使用
创建组件 3要素：
- <template>有且只能有一个根div </template>
- <script></script>
- <style></style>
使用组件 3步骤
- 导入组件
import Header from './components/Header.vue' (.vue可省略) - 注册组件
components:{Header} - 使用组件
<header></header>
<template>
<div id="app">
<!-- 03 使用组件 -->
<Header></Header>
</div>
</template>
<script>
// 01 导入组件
import Header from './components/Header.vue'
export default {
// 02 注册组件
components:{Header,Nav,Swiper},
</script>
<style>
</style>
四、组件的参数传递
- App.vue属性传参 <Nav :navList="navList">
- Nav.vue props:["navList"]
<template>
<div id="app">
<!-- 03 使用组件 -->
<Header></Header>
<Nav :navList="navList"></Nav>
</div>
</template>
<script>
// 01 导入组件
import Nav from './components/Nav.vue'
export default {
// 02 注册组件
components:{Nav},
data(){
return {
navList:[
{name:"推荐"},
{name:"手机"},
{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 内置参数
data(）{return {}} 数据
methos（） 方法
props:[] 属性（父传递过来参数）
八 . 生命周期钩子函数
生命周期钩子函数作用
比如我进入组件要发起ajax？
组件渲染好了我要调用dom操作？
进入组件要加入定时器？
离开组件要销毁定时器？
要知道组件视图发生改变？
创建 渲染 更新 销毁 前后8个
beforeCreate 创建前
created 创建完成（可以使用this）
beforeMount 渲染前
mounted 渲染后（可以操作dom）
beforeUpdate 更新前（执行多次）
updated 更新后（执行多次）
beforeDestroy 销毁前
destroyed 销毁后
9. nav选项卡组件
<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">标题</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;
// 设置当前选中current
let items = document.querySelectorAll(".nav-item");
// 获取到所有的.nav-item
this.selected({target:items[index]},index);
// 执行selected 方法({target:和index对应的nav-item},index);
// 执行selected函数传两个参数
// 第一个参数是个对象 对象里面有个target属性 属性值是一个dom节点(.nav-item 对应current的dom节点)
// 比如我单击的是btns里面的第2个元素 让后我选择到nav-item里面的第2个元素作为target属性值传递过去
// 第二个参数是index
},
selected(e,index){
this.current = index;
let ew = e.target.offsetWidth; // 获取当前单击元素宽
let el = e.target.offsetLeft;// 元素左侧偏移值
let elem = this.$refs.scroll; // 获取滚动元素； $refs是vue内置的获取元素对象
let vw = elem.offsetWidth;// 滚动元素整体的宽;
// console.log(ew,el,vw);
elem.scrollLeft = el-vw/2+ew/2;
// 设置滚动元素的左侧滚动距离为=调整单击元素到画面的中心。
// 单击的元素滚动到最左侧
// 最左侧-总宽度一半+当前元素宽度一半
}
},
data(){return {
current:0,// 当前选中的导航
showLay:false,//是否显示导航弹出内容
}}
}
</script>
<style scoped>
/* scoped 让样式只在当前组件中管用 */
.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;
/* 水平滚动自动 */
white-space: nowrap;
/* 行内元素不换行 */
scroll-behavior: smooth;
/* 滚动平滑 */
-webkit-overflow-scrolling: touch;
}
.nav-item{
display: inline-block;
/* 转换位行内块 */
vertical-align: middle;
/* 垂直居中对齐 */
padding: 0 15px;
/* 设置间距 */
color:#484848;
/* 设置颜色 */
}
::-webkit-scrollbar{
display: none;
}
/* 隐藏滚动条 */
.active{color:#f30;}
</style>
引入外部插件组件的一般方法
swiper为例子
- 工作目录 cmd安装
myvue> npm install swiper -S
- 使用的组件里面 导入
import Swiper from 'swiper'
import "swiper/css/swiper.css"
如果引入的目录没有./ ../等相对目录，那么就会从 node_module查找需要引用的内容
- 样式
import ‘xxx/swiper.js’
- dom 结构
.swiper-contianer
--- .swiper.wrappr
--- --- .swiper-slide- 初始化swiper
new Swiper(‘.swiper-container’)
- 初始化swiper
swiper组件是要操作dom的，我就应该在组件生命周期
mounted 完毕 取执行 初始化 swiper
10. swiper组件
<template>
<div class="swiper-container" v-if="gallery.length">
<!-- 只有gallery有长度时候才显示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"
// 导入node_modules里面的 swiper文件夹 Swiper类
// 导入node_modules里面的 swiper/css/文件夹里面的swiper.css
export default {
props:["gallery"],
mounted(){
// 当页面初始渲染完毕执行
this.swiper = new Swiper(".swiper-container",{
loop:true,//自动让最后一张的下一张是第一张
pagination:{
el:'.swiper-pagination'//小点指示器
}
});
}
}
</script>
<style>
.swiper-container{
height: 200px;
width: 100%;
}
/* 设置幻灯片高与宽 */
/* 修改小点高亮颜色 */
.swiper-pagination-bullet-active{
background-color: #f30;
}
</style>
