使用vue inspect > output.js可以查看Vue脚手架的默认配置 使用vue.config.js对脚手架进行默认配置
props只读，如果要修改，先复制到data中一份，对复制的数据进行修改 普通接受: props: ['name'] 限制类型: props: { name: String } 限制类型、必填、默认值 props: { name: { type: String, required: true, default: '马铮' } }
- 父传子通过props,
- 子传父通过调用父组件传过来的的方法
- 使用v-model时：v-model不能是props传过来的值，因为props是不可修改的
- 一种组件的通信方式，子组件 -> 父组件
- 使用场景：在父组件中给子组件绑定事件，事件回调在父组件中
- 适用于任意组件之间的通信
- 安装全局事件总线
new Vue({
beforeCreate() {
Vue.prototype.$bus = this;
}
})- 使用事件总线
// A组件想接收数据，给A绑定事件，事件回调留在A组件内
mounted() {
this.$bus.$on('hello', (data) => {
console.log('我是学校, 我收到了student信息', data)
})
},
// B组件提供数据
this.$bus.$emit('hello', this.name)
// 销毁(beforeDestroy)
this.$bus.$off()- pubsub.js中的发布和订阅的事件名一定要相同
- 在下次dom更新循环结束后执行回调
- 使用场景：在修改数据之后立即调用这个方法，获取更新后的dom
- 单元素组件的过渡
- 使用transition组件封装
- 通过 appear attribute 设置节点在初始渲染的过渡，appear就是首次的意思
- 列表过渡，使用transition-group
- devServer.proxy 可以是一个指向开发环境 API 服务器的字符串，缺点是1.不能配置多个代理，2.不能灵活的控制走不走代理
module.exports = {
devServer: {
proxy: 'http://localhost:5000'
}
}- 具体规则
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:5000',
pathRewrite: {'^/api' : ''}, // 重写路径，把api转为''
ws: true, 支持websocket
changeOrigin: true // 用于控制请求头中host的值
},
'/foo': {
target: '<other_url>'
}
}
}
}- 作用：让父组件可以向子组件的指定位置插入html结构，父子组件通信: 父组件 -> 子组件
- 分类：默认插槽、具名插槽、作用域插槽
- 作用域插槽：数据在组件自身，但数据生成的html结构由组件的使用者决定
- Action 通过 store.dispatch 方法触发：
store.dispatch('increment')
// 第一个context：与 store 实例具有相同方法和属性，第二个额外的参数
actions: {
increment (context, value) {
context.commit('increment')
}
}- Mutations 通过 store.commit 方法触发：
store.commit('increment')
// state是第一个参数，payload是额外的参数
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}-
模块化+命名空间
- 目的：让代码更好维护，让多种数据分类更加明确
- 实现切换,active-class指定高亮样式
- 指定展示位置
- 注意点
- 路由组件放在page文件夹中，一般组件放在component文件夹中
- 切换路由时，组件会被销毁，需要时再挂载
- 每个组件都有$route信息，存储自己的路由信息
- 整个应用只有一个router，通过组件的$router属性获取
- 嵌套路由：使用children配置项，跳转时(to)写完整路径
- query传递参数：一种是字符串写法，一种是对象写法
- params传递参数：配置路由时，声明占位符接受params，使用对象写法时，必须用name(命名路由)
- props传递参数：在route.js文件中写，有三种方式(对象、boolean、func)
- 缓存路由组件keep-alive，让不展示的组件缓存，不被销毁
// include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
// exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
// max - 数字。最多可以缓存多少组件实例
// <keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。
<keep-alive include="First">
<router-view></router-view>
</keep-alive>- 路由组件独有的生命周期钩子
- activated 缓存组件激活时调用
- deactivated 缓存组件失活时调用
- 路由器的两种工作模式
- hash模式
- hash值不会包含在http请求中，即不会带给服务器
- 地址携带#号
- 地址可能被标记不合法
- history模式
- 兼容性相对较差
- 部署需后端支持，解决404问题