组件化
1. vue单文件组件
< template>
< div> xxx< / div>
< / template>
< script>
export default {
props : [ ] / { }
data ( ) { } ,
computed : { }
methods : { } ,
watch : { }
filters : { }
directives : { }
components : { }
}
< / script>
< style scoped>
< / style>
2. 组件化编码的基本流程
1 ) . 拆分界面, 抽取组件
2 ) . 编写静态组件
3 ) . 编写动态组件
初始化数据, 动态显示初始化界面
实现与用户交互功能
设计data
类型 : [ { id : 1 , title : 'xxx' , completed : false } ]
名称 : todos
位置 : 如果只是哪个组件用, 交给它, 如果是哪些组件用, 交给共同的父组件
关于状态数据的更新
data数据定义在哪个组件, 更新数据的行为就定义在哪个组件
如果子组件要更新父组件的数据, 调用父组件的更新函数来更新父组件的数据
一个组件接收属性数据不要直接修改, 只是用来读取显示的
相关问题 :
组件的data配置为什么只能是函数, 不能是对象?
保证同一个组件的多个实例对象的data对象不是共用的, 而是各自自己的data对象
组件对象与Vue是什么关系?
所有组件对象的原型对象都是一个vm对象
所有组件对象都能看到定义在Vue原型对象上的属性或方法
3. 组件间通信
1 ) . 组件通信的5 种方式
props
vue的自定义事件
全局事件总线
slot
vuex ( 后面单独讲)
2 ) . props:
** 父子组件间通信的基本方式
属性值的2 大类型 :
一般/ 非函数: 父组件-- > 子组件
函数 : 子组件-- > 父组件
问题 :
隔层组件间传递 : 必须逐层传递 ( 麻烦)
兄弟组件间 : 必须借助父组件 ( 麻烦)
2 ) . vue自定义事件
在父组件中给子组件标签绑定事件监听 this . $refs. xxx. $on ( 'EventName' , callback)
在子组件中分发事件 this . $emit ( 'EventName' , 数据)
** 子组件向父组件的通信方式
功能类似于function props
问题 : 不适合隔层组件和兄弟组件间的通信
3 ) . 全局事件总线
利用vm对象的$on ( ) / $emit ( ) / $off ( )
利用组件对象的原型对象是vm对象, 组件对象能直接看到Vue原型对象上的属性
创建vm对象作为全局事件总线对象保存到Vue的原型对象上, 所有的组件对象都可以直接可见 :
Vue . prototype. $bus = new Vue ( )
任意组件A 可以通过this . $bus. $on ( ) 绑定监听接收数据
任意组件B 可以通过this . $bus. $emit ( ) 分发事件, 传递数据
4 ) . slot
父组件向子组件通信
通信是带数据的标签
注意 : 标签是在父组件中解析
App. vue:
< span slot= "middle" >
< span> 已完成{ { completeSize} } < / span> / 全部{ { todos. length} }
< / span>
Footer. vue:
< slot name= "middle" / >
5 ) . vuex
多组件共享状态 ( 数据的管理)
组件间的关系也没有限制
功能比事件总线强大, 更适用于vue项目
6 ) . Pubsub消息订阅发布 (需要下载Pubsub包)
子组件向父组件通信
下载、引入Pubsub
父组件:Pubsub. subscribe ( '消息名' ,回调) 订阅
子组件:Pubsub. publish ( '消息名' ,数据) 发布
Pubsub. unsubscribe ( '消息名' ) 取消订阅
4. 自定义消息订阅与发布
1 ) . 相关语法
a. PubSub: 包含所有功能的订阅/ 发布消息的管理者对象
b. PubSub. subscribe ( msg, subscriber) : 订阅消息: 指定消息名和订阅者回调函数,会产生一个唯一token c. PubSub. publish ( msg, data) : 异步发布消息: 指定消息名和数据
d. PubSub. publishSync ( msg, data) : 同步发布消息: 指定消息名和数据
e. PubSub. unsubscribe ( flag) : 取消订阅: 根据标识取消某个或某些消息的订阅
2 ) . 内部容器结构
{
"add" : {
uid_1 : callback1,
uid_2 : callback2
} ,
"delete" : {
uid_3 : callback3
}
}
5. 自定义事件总线
1 ) . 相关语法
a. EventBus: 包含所有功能的全局事件总线对象
b. EventBus. on ( eventName, listener) : 绑定事件监听
c. EventBus. emit ( eventName, data) : 分发事件
d. EventBus. off ( eventName) : 解绑事件监听
2 ) . 内部容器结构
{
"add" : [ callback1, callback2] ,
"delete" : [ callback3]
}
6. 与后台进行通信
1). 使用什么发ajax请求?
vue-resource vue1.x使用,现在基本不用了
axios vue2.x使用
2). 在什么时候发请求?
mounted()中
事件监听回调函数或相关函数中
7. vue UI组件库
常用的UI组件库
PC: Element / iview /
Mobile: mint-ui / vant-ui / cube-ui
mint-ui的使用
根据官方文档使用
配置实现按需引入打包
前台路由的2种模式比较, 解决history模式404问题
hash模式 :
路径中带#: http: / / localhost: 8080 / #/ home/ news
发请求的路径 : http: / / localhost: 8080 项目根路径
响应 : 返回的总是index页面 == > path部分 ( / home/ news) 被解析为前台路由路径
history模式 :
路径中不带#: http: / / localhost: 8080 / home/ news
发请求的路径 : http: / / localhost: 8080 / home/ news
响应 : 404 错误
希望 : 如果没有对应的资源, 返回index页面, path部分 ( / home/ news) 被解析为前台路由路径
解决 : 添加配置
devServer : historyApiFallback: true ,
output : publicPath: '/' ,