1--------------------父子组件传递关系
子组件：props:{
banners:{
type:Array,
default(){
return[]
}
}
}
父组件： <HomeSwper :banners="banners"></HomeSwper>
2. 视口模式
npm install postcss-px-to-viewport --save-dev 打包时依赖
postcss.config.js
------------
module.exports={
plugins:{
"postcss-px-to-viewport":{
viewportWidth:375, //视窗的宽度，对应的是我们设计稿的宽度
viewportHeight:667, //视窗的高度，对应的是我们设计稿的高度
unitPrecision:5, //指定‘px’转换为视窗单位值的小数位数
viewportUnit:'vw', //指定需要转换成的视窗单位，建议使用vm
selectorBlackList:['ignore','tab-bar','tab-bar-item'], //指定不需要转换的类
minPixelValue:1, //小于或等于‘1px’不转换为视窗单位
mediaQuery:false, //允许在媒体查询中转换‘px’
exclude:[/TabBar/] //正则表达式 ，除TabBar 这个所有匹配文件
}
}
}
3-----Class样式有关
<router-link tag="button" replace active-class="active">首页<router-link/> tag变为指定的标签 replace不可以返回 active-class="active"指定点击样式
3.1---在路由index.js中添加mode:history 默认是hash模式
3.2----在router中的index.js->添加：linkActiveClass:'active'
.active{
color:red
}
3.3----push按压式堆叠
this.$router.push('/home') 通过代码修改路由 所以不需要加这个标签<router-link><router-link/>
.replace('/home')
3.4-----动态路由：
<router-link :to="'/home/'+userid">首页<router-link/> {path:'/home/:userid',component:Home}
在home.vue中获取相应的id 这里的id是对应 {path:'/home/:userid',component:Home}这里面的userid $route:谁活跃就拿到谁
computed:{
userid(){
return this.$route.params.userid
}
}
3.4.1-----动态路由 query的使用及例子
<router-link :to="{path:'/profile',query:{name:'why',age:18,height:1.88}}"><router-link/>
--->地址形式localhost:8080/profile/userid?name:'why',age:18,height:1.88
在profile.vue取出name:'why',age:18,height:1.88 所对应的值 {{$route.query}}
computed:{
userid(){
return this.$route.query.name
}
}
3.4.2---------APP.vue
<button @click="userClick">用户</button/>
<button @click="profileClick">档案</button/>
data(){
return{ userId:'zhangsan' }
}
method:{
userClick(){ this.$router.push('/user/' + this.userId) }
profileClick(){
this.$router.push({
path:'/profile',
query:{
name:'why',age:18,height:1.88
}
})
}
}
3.5-------懒加载，需要用到时，再调用
const Home =()=>import('../components/Home')
第一种模式： {
path:'/home',
component:Home 第二种模式：component:()=>import('../components/Home')
}
3.6------路由嵌套
{
path:'/home',
component:Home，
children:[
{
path:'',
redirect:'news'
},
{
path:'news',
component:()=>import('../component/HomeNews')
},
{
path:'message',
component:()=>import('../component/HomeMessage')
},
]
}
在Home.vue中配置路由 ：<router-link to="/home/new">消息<router-link/> < router-view>< router-view/>
3.7--------导航守卫：监听页面跳转 在跳转过程经行一些操作 全局守卫
created（）{} 组件创建完
mounted（）{} 挂载在dom 时
updated(){} 界面发生变化
destroyed(){}
-- activated(){} 当页面处于活跃 -》这两个函数，只有该组件被保持了状态使用了keep-alive时，才有效
--deactived(){} 当页面处于不活跃 -》
router->index.js
{
path:'/profile',
component:Profile,
meta:{
title:'档案'
}
}
前置
守卫（guard）/钩子（hook） 跳转之前
router.beforeEach((to,from,next) =>{
从from跳转到to
document.title = to.matched[0].meta.title meta:元数据 描述数据的数据
next()
})
后置守卫
router.afterEach((to,from) =>{
})
3.7-------组件导航守卫 Home.vue
beforeRouteLeave 离开页面之前
beforeRouteLeave(to,from,next){
this.path = this.$route.path;
next()
}
3.8----------keep-alive 组件保留状态
keep-alive 组件保留状态 -> <keep-alive><keep-view/><keep-alive/> 使created(){}和destroyed(){} 不会被频繁创建和销毁
include 会被缓存
exclude 不会被缓存 <keep-alive exclude="Profile,User"><keep-view/><keep-alive/> 排除Profile.vue和User.vue 缓存
3.9-----------
App.vue
<style> 在style里面引用样式用@ 除此之外用import Home from ".."
@import "./assets/css/base.css"
<style/>
在main.js直接引用
require("./assets/css/base.css")
4.0---------
TabBarItem.vue
<slot name="item-icon"></slot>
<slot name="item-text"></slot>
App.vue
<tab-bar-item>
<img slot="item-icon" src=".." >
<div slot="item-text">首页</div>
</tab-bar-item>
4.1-----------
点击相应的按钮 所对应相应的状态（颜色）
computed:{
isActive(){
return this.$route.path.indexof(this.path) !== -1 即是true 判断活跃状态的路径是否等于当前路径
}
}
4.1.1--------
<div :style="activeStyle"></div>
data(){
return{
props:[
path:String,
activeColor:{
type:String, default:'red'
}
]
}
}
computed:{
activeStyle(){
return this.isActive ? {color:this.activeColor} : { }
}
}
4.2----------修改文件路径的引用问题 在config文件下的webpack.base.conf.js 中修改
reslove:{
extensions :['.js','.vue','.json'],
alias:{
'@':resolve('src'),
'assets':reslove('@/assets'), 在脚手架3.0版本以上
'assets':reslove('src/assets'), 在脚手架2.0版本以上
'components':reslove('@/components') 在脚手架3.0版本以上
'components':reslove('@/components') 在脚手架2.0版本以上
.......
}
}
在src 中要加一个~符号 ， 而import中不需要加
4.3----------promise -》js异步操作有关
链式编程
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve()
},1000)
}).then(()=>{
第一次拿到结果的处理代码
console.log('Hello world')
return new Promise((resolve,reject)=>{
第二次网络请求
setTime(()=>{
resolve()
},1000)
})
}).then(()=>{
console.log('Hello vue.js')
return new Promise((reslove,reject)=>{
setTime(()=>{
resolve()
},1000)
})
}).then(()=>{
console.log('Hello js')
})
4.3.1--------------异步请求数据
setTime(()=>{
console("Hello world")
},1000)
4.3.2--------------
原始：
$.ajax('url1',function(data1){
$.ajax(data['url2'],function(data2){
$.ajax(data['url3'],function(data3){
...
console.log(data3)
})
})
})
4.3.3--------------
1. new Promise((resolve,reject)=>{
setTimeout(()=>{
// 成功时候调用resolve
// resolve('Hello world')
失败时候调用reject
reject('error message')
},1000)
}).then((data)=>{
console.log(data);
}).catch(err=>{
console.log(err)
})
2. new Promise((resolve,reject)=>{
setTimeout(()=>{
成功时候调用resolve
resolve('Hello world')
失败时候调用reject
reject('error message')
},1000)
}).then(data=>{
console.log(data);
},error=>{
console.log(err)
})
