cli-方式写组件
组件的构成
template
模板
script
业务逻辑
style
样式
组件的使用
1. 创建组件.vue
2. 导入并注册组件
3. 使用组件
路由与视图
页面.vue
配置 router.js
path:"/cart"
路由对应的地址
name：“cart”
路由的名称
component：Cart
路由地址对应的组件
路由指令
router-link
路由链接（切换路由）
to=”路由地址“
切换的地址
router-view
路由视图显示 url对应的组件的
路由的参数
1. router.js配置
path:"/product/:id"
2. 组件内部获取到参数
{{$route.params.id}}
路由编程跳转
返回
$router.go(-1)
$router.back()
跳转
$router.push("/")
$router.push("/cart")
$router.replace("/cart")
跳转页面不留历史记录
子路由
目标
article
comment 评论
detail参数
{
path:"/article",
component:“Article”,
children:[
{path:“comment”, component:Comment},
{path:“detail”, component:Detail},
]
}
Article.vue
评论>
重定向
{path:"",redirect:“comment”}
激活class
router-link-exact-active
path 和当前的url地址栏路径 完全精确匹配
router-link-active
path 和url地址栏部分匹配
路由的别名
alias:["/home","/index"]
路由的404匹配
{path:"*"}
配置放在最后面
vue中使用ajax
1. 安装
yarn add axios
2. 挂载到vue
import axios from ‘axios’
Vue.prototype.
h
t
t
p
=
a
x
i
o
s
3.
使
用
t
h
i
s
.
http = axios 3. 使用 this.
http=axios3.使用this.http.get(url)
.then(res=>{
})
上线 打包
yarn build
多一个 dist
vue组件的生命周期
定义：一个组件从创建到销毁会经历多个步骤，把这些步骤称为组件的生命周期
组件的每个生命周期都会，触发固定的回调函数，我们把回调函数称为 生命周期钩子函数
生命周期
创建前后
created()
创建完毕
做一些初始化
beforeCreate
创建完毕前
渲染前后
mounted
第一次渲染完毕
html DOM已经渲染 操作页面中的元素
beforeMount
渲染完毕前
更新前后
updated
更新完毕
beforeUpdate
更新前
销毁前后
destroyed
销毁完毕
beforeDestroy
销毁前
子主题 4
登录注册路由权限判断
导航守卫
组件内部守卫
定义：当进入页面或离开页面进行判断
进入页面
重定向别的页面
额外的事情
beforeRouterEnter
路由进入前
to
要进入的路由
from
从哪个路由来得
next
将要去哪儿
next 必须要被调用
beforeRouterLeave
路由离开前
路由配置 全局守卫
路由独享守卫
beforeEnter
页面缓存
缓存组件
特别组件需要缓存 meta:{keepalive:true}
组件间通信
1. 父传子
a， 父组件通过属性方式传入
data(){return {galleryPic:[…]}
b , 子组件通过props 方式接收
props:[“gallery”]
2. 子获取父亲的data数据
this.
p
a
r
e
n
t
.
s
h
o
w
T
a
b
3.
b
u
s
方
式
传
递
（
不
论
，
父
子
还
兄
弟
，
还
是
子
父
）
1.
定
义
b
u
s
.
j
s
i
m
p
o
r
t
V
u
e
f
r
o
m
’
v
u
e
‘
e
x
p
o
r
t
d
e
f
a
u
l
t
n
e
w
V
u
e
(
)
;
2.
如
果
要
获
取
数
据
i
m
p
o
r
t
b
u
s
f
r
o
m
"
b
u
s
.
j
s
"
b
u
s
.
parent.showTab 3. bus方式传递 （不论，父子还兄弟，还是子父） 1. 定义 bus.js import Vue from ’vue‘ export default new Vue(); 2. 如果要获取数据 import bus from "bus.js" bus.
parent.showTab3.bus方式传递（不论，父子还兄弟，还是子父）1.定义bus.jsimportVuefrom’vue‘exportdefaultnewVue();2.如果要获取数据importbusfrom"bus.js"bus.on(事件名,data=>{ // data 就是数据名称})
2. 如果要发送数据
import bus from “bus.js”
bus.$emit(“事件名”,数据)
4.子传父
<swiper @swevent="处理函数($event)" / >
<swiper @numchange = “changeHd(
e
v
e
n
t
)
”
/
>
m
e
t
h
o
d
s
:
c
h
a
n
g
e
H
d
(
e
)
/
/
e
就
是
s
w
i
p
e
r
传
递
过
来
的
数
据
15
t
h
i
s
.
event)”/> methods:{ changeHd(e){ // e 就是swiper 传递过来的数据 15 } } this.
event)”/>methods:changeHd(e)//e就是swiper传递过来的数据15this.emit(“numchaneg”,15)
5. 路由传递
params
配置
{path:"/product/:id"}
获取
{$route.params.id}
query
push("/login?redirect=/about")
获取
r
o
u
t
e
.
q
u
e
r
y
.
r
e
d
i
r
e
c
t
6.
v
u
e
x
(
最
高
级
)
组
件
的
缓
存
1.
定
义
元
信
息
.
r
o
u
t
e
r
/
i
n
d
e
x
.
j
s
n
a
m
e
:
"
c
a
r
t
"
,
m
e
t
a
:
k
e
e
p
:
t
r
u
e
2.
k
e
e
p
−
a
l
i
v
e
进
行
缓
存
:
i
n
c
l
u
d
e
=
"
′
c
a
r
t
′
"
<
k
e
e
p
−
a
l
i
v
e
>
<
r
o
u
t
e
r
−
v
i
e
w
v
−
i
f
=
"
route.query.redirect 6. vuex(最高级) 组件的缓存 1. 定义元信息 .router/index.js {name:"cart", meta:{keep:true}} 2. keep-alive进行缓存 :include="'cart'" <keep-alive> <router-view v-if="
route.query.redirect6.vuex(最高级)组件的缓存1.定义元信息.router/index.jsname:"cart",meta:keep:true2.keep−alive进行缓存:include="′cart′"<keep−alive><router−viewv−if="route.meta.keep"/>
jsonp数据
axios 不支持jsonp
jsonp的原理？
为什么jsonp ?ajax 请求有同源测试
经常需要跨域名请求数据
后端允许 Access-Control-Allow-Origin: *
后端允许 函数名(数据)
jp({name:“mumu”,age:18})
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
