Vue学习笔记
# 笔记
## 脚手架结构:
|———— node_modules
|———— public
| |—— favicon.ico: 页签图标
| |—— index.html: 主页面
|———— src
| |—— assets: 存放静态资源
| | |___ logo.png
| |__ component: 存放组件
| | |___ HelloWorld.vue
| |__ App.vue: 汇总所有组件
| |__ main.js: 入口文件
|———— .gitignore: git版本管制忽略的配置
|———— babel.config.js： babel的配置文件
|———— package.json: 应用包配置文件
|———— README.md: 应用描述文件
|———— package-lock.json: 包版本控制文件
## 关于不同版本的 Vue:
1. vue.js 与 vue.runtime.xxxjs的区别：
(1). vue.js是完整版本的 Vue, 包含： 核心功功能 + 模板解析器
(2). vue.runtime.xxx.js 是运行版的 Vue. 只包含： 核心功能 没有脚手架
2. 因为 vue.runtime.xxx.js 没有模板解析器， 所有不能使用 template 配置项， 需要使用reder函数接收到的 createElement 函数去指定具体内容。
## ref属性
1. 被用来给元素或子组件注册引入信息（id的替代者）
2. 应用在 html 标签上获取的是真实 DOM 元素， 应用阻止 组件标签上是组件实例对象（vc）
3. 使用方式： this.$refs.xxx
## 配置props
功能： 让组件接收外部传过来的数据
（1）. 传递数据：
(2). 接收数据
第一种方式（只接收）：
props:['name]
第二种方式（限制类型）：
props:{
name: String
}
第三种方式（限制类型、 限制必要性、指定默认值）：
props：{
name: {
type: String , // 类型
require: true, // 必要性
default: '老王' // 默认值
}
}
备注： props 是只读的， Vue底层会监测你对 props的修改， 就会发出警告，
若业务需求需要修改， 那么请复制 props 的内容到data 中一份， 然后去修改 data 中的数据。
## mixin(混入)
功能： 可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合， 例如：
{
data() {...}
methods: {...}
}
第二步使用混合， 例如：
（1）全局混入： Vue.mixin(xxx)
（2）局部混入： mixins:['xxx']
## 插件
功能： 用于增强Vue
本质： 包含 install 方法的一个对象， install 的第一参数是 Vue, 第二个以后的参数是插件使用者传递的数据
定义插件：
对象 install = function (Vue, options){
// 1.添加全局过滤
Vue.filter(...)
//2. 添加全局指令
Vue.mixin(...)
//3.配置全局混入（合）
Vue.mixin(...)
// 4. 添加实例方法
Vue.prototype.$myMethod = function() {...}
Vue.prototype.$myProperty = xxxxx
}
## scoped防止样式冲突
## 总结 TodoList 案例
1. 组件化编程流程：
（1）拆分静态组件: 组件要按功能点拆分， 命名不要与 html 元素冲突。
（2）实现动态组件： 考虑号数据存放位置， 数据是一个组件在用， 还是一些数据在用：
1）一个组件在用： 放在组件身上即可。
2）一些组件在用， 放在它们共同的父组件上（状态提升）.
（3）实现交互： 从绑定事件开始。
2.props 适用于：
（1）父组件 ===> 子组件 通信
（2）子组件 ===> 父组件 通信（要求父先给子一个函数）
3. 使用v-model时切记： v-model 绑定的值不能是 props 传过来的值， 因为props 是不可以被修改的！
4. props传过来的若是对象类型的值， 修改对象中的属性时 Vue 不会报错， 但不推荐这样做！
## webStorage
1.存储内容大小一般支持在 5MB 左右 （不同浏览器可能还不一样）
2.浏览器通过 Window.sessionStorage Window.localStorage 属性来实现本地存储机制
3.相关 API ：
1. xxxxxStorage.setItem('key', 'value')
该方法接受一个键和值作为参数， 会把键值对添加到存储中， 如果键名存在，则更新对应的值
2. xxxxxStorage.getItem('person');
该方法接受一个键名作为参数， 返回键名对应的值
3. xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数， 并把该键名从存储中删除
4. xxxxxStorage.clear()
该方法会清空存储中的所有数据
4.备注：
1. SessionStorage 存储的内容会随着浏览器窗口关闭而消失
2. LocalStorge存储的内容， 需要手动消除才会消除
3. xxxxxStorage.getItem(xxx) 如果 xxx 对应的value获取不到， 那么 getItem返回的值 是 null
4. JSON.parse(null) 的结果依然是 null
## 组件的自定义事件
1.一种组件间通信的方式，适用于；子组件 ===> 父组件
2.使用场景；A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
3.绑定自定义事件；
1.第一种方式，在父组件中；
2.第二种方式，在父组件中:
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
3.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
4.触发自定义事件；this.$emit('atguigu',数据)
5.解绑自定义事件；this.$off('gtguigu')
6.组件上也可以绑定原生DOM事件，需要使用native修饰符。
7.注意；通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!
## 全局事件总线（GlobalEventBus）
1. 一种组件间通信的方式， 适用于任意组件间通信。
2. 安装全局事件总线：
new Vue({
........
beforCreate() {
Vue.prototype.$bus = this // 安装全局事件总线， $bus就是当前应用的 vm
}
......
})
3. 使用事件总线：
1. 接收数据： A组件想要接收数据， 则在A组件中给 $bus 绑定自定义事件， 事件的回调留着 A组自身。
methods: {
demo(data) {
....
}
}
.......
mouted() {
this.$bus.$on('xxx', this.demo)
}
2. 提供数据： this.$bus.$emit('xxx', 数据)
4. 最好在beforeDestroy钩子中，用 $off 去解绑当组件所用到的事件
## 消息订阅与发布 （pubsub）
1. 一种组件间通信的方式， 适用于 任意组件间通信
2. 使用步骤：
1. 安装 pubsub： npm i pubsub-js
2. 引入 import pubsub from 'pubsub-js'
3. 接收数据： A组件想接收数据， 则 A 组件中订阅消息， 订阅的回调留在 A 组件 自身
methods() {
demmo(data) {
.......
}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx', this.demo) // 订阅消息
}
4. 提供数据: pubsub..publish('xxx' , 数据)
5. 最好在 beforeDestroy钩子中 ， 用 PubSub.unsubscribe(pid)
## nextTick
1. 语法: this.$nextTick(回调函数)
2. 作用: 在 DOM 更新结束后执行其指定的回调
3. 什么时候用: 当改变数据后 , 要基于更新后的新DOM 进行某些操作时, 要在nextTick所指定的回调函数这种执行
## todo.hasOwnProperty('isEdit')
对象.hasOwnProperty(名) 显示对象中是否有这个名存中
## Vue封装的过度与动画
1.作用: 在插入, 更新或移除DOM元素时, 在合适的时候给元素添加样式类名
2.图示:
v-enter -----> v-enter-to
| |
| |
|--------- -----------|
| |
v-enter-active
v-leave -----> v-leave-to
| |
| |
|--------- -----------|
| |
v-leave-active
3. 写法:
1.准备好样式:
元素进入的样式:
1. v-enter: 进入的起点
2. v-enter-activ: 进入的过程中
3. v-enter-to: 进入的终点
元素离开样式:
1. v-leave: 离开起点
2. v-leave-active: 离开过程
3. v-leave-to: 离开终点
2. 使用
你好啊!
3. 备注: 若有多个元素需要过度, 则需要使用: