vue学习笔记（2）
js表达式和js语句
1：表达式；一个表达式会产生一个值，
2：js代码，比如if（）语句；for（）语句
vue模板语法
1;插值语法：用于解析标签体内容，用法{{xxx}},里面xxx是js表达式，可以直接读取到data中的数据，可以随data中数据变化随时变化，
2：指令语法：v-bind，用于解析标签，包括属性内容和方法
可以动态的绑定数据包括图片或者链接什么的，
二者相似度很高，
v-model 双向绑定
只能应用于表单类元素，有输入类型的，就是用户可以在客户端进行输入，后台用于获取用户输入的内容，
v-bind单向绑定
数据只能从data流向页面，可以实时变化，简写为 ：
MVVM
其中m为model，data中的数据，
v是视图，view，模板，dom页面，
vm 视图模型，vue实例
vm实例中data绑定v视图，实时更新页面
页面监听data数据改变
data中所有的属性都出现在vm身上，
vm身上所有的属性及vue原型的所有属性，在vue模板中dou'ke'y
object.defineproperty
object.defineproperty(给那个对象添加参数，'添加的属性名'，{value:xxxx})
里面还有其他属性，
enumerable:true 控制属性是否可以被枚举，默认值是false
writable:true 控制属性是否可以被修改，默认值是false
configurable:true 控制属性是否可以被删除，默认值是false
get( ){
returen xxxxxxxx
}
set(value){
}
数据代理
data中的数据被vm实例_data劫持，vm代理data中的数据，给每一个属性添加了一个set和get方法，读取的话是通过get获取到数据再展示到视图窗口，修改通过set去修改data中的数据
绑定事件
v-on:click='xxx'，简写为@click='xxx'，此处后面可以加小括号跟形参，如果有形参就用（）里面携带，如果后面需要event的数据事件就在参数后面用$event占位
@click='' xxx（参数，$event）''
xxx函数要写在methods中
methods中不要写箭头函数，不然this指向就会改变
事件的修饰符
.prevent：阻止默认事件，比如页面跳转，表单提交
.stop：阻止冒泡
.once：事件只触发一次
.capture：使用事件捕获
.self：event.target是当前做操作的的元素时触发
以上属性可以连续使用，比如@click.stop.prevent
键盘事件
@keyup键盘按下
@keydown
后面可以跟按键别名，enter，esc，space，tab，up，daown，left，right
计算属性computed
需要用的数据不存在要通过已有的数据来计算得到，
计算属性内部有缓存机制，可以复用，可以直接读取，
监视属性watch
watch: {
deep: true, 深度监视
immediate: true, 初始化时调用
handler: function (新值, 旧值) {
}
},
watch可以进行异步操作，
样式绑定
：class='xxxx' 可以绑定字符串，对象，数组，
：style='{xxxx：xxxxx}'
条件渲染
v-if；v-elseif；v-else；属于一组判断，中间不能中断，切换频率低就用v-if，这个会在节点中频繁删除和创建元素
v-show；节点没有被删除，只是使用display:none
列表渲染
v-for="(item, index) in items" :key="index"
item是每一项，index是索引，items是对象也可以是数组，:key是唯一标识，一般用唯一值，
虚拟dom对比中用到了key，会首先找到key相同的两个进行比较，如果有变化就进行替换，没有变化就复用，index作为key会导致错误的dom更新
数组排序，
let array=[x,x,x,x,x,xx,]
array.sort((a, b) => a - b); 这是数组升序
array.sort((a, b) => b -a); 这是数组降序
vue监测数据代理
vue会监视data中所有层次的数据
通过set来监视，如果需要给后添加的数据做响应式可以采取两种办法，
Vue.set(要添加的对象，key，value)
vm.$set(要添加的对象，key，value)
数组中数据的监测，通过包裹数组更新元素的方法，调用原生操作数组的api，重新解析模板，更新页面
修改数组的方法：push();pop();unshift();shift();splice();sort();reverse();
不能给根元素添加属性，就是不能直接在data内添加，可以在data内声明一个对象，把需要添加的数据添加到对象内
收集表单内数据
如果是普通输入框默认收集value就行，
如果是radio类型，需要额外配置value属性
如果是checkbox，默认设置一下收集到的是数据类型，
v-text
向其所在的节点中渲染文本内容，会替换掉节点中的内容
v-cloak
本质始是个特殊属性，vue实例创建完毕并接管容器后会删掉v-cloak
使用css中的display：none可以解决因为用户网络加载慢而出现{{xxx}}的问题
v-once
v-once躲在的节点会在初次动态渲染后就变成静态内容了
以后数据的改变也不会引起v-once所在的节点更新，可以优化性能
新的 配置directives
directives:{},没看懂 不太会。不学这个了
生命周期
又名生命周期函数，钩子函数，
生命周期函数内的this指向的是组件实例对象
1：beforecreate，数据监测数据代理之前； 此时无法通过vm访问到data,methods的方法和数据
2：created,数据监测数据代理完成；此时可以通过vm访问到data,methods的方法和数据
3：beforemount，挂在之前，此时页面呈现的是未经vue编译的dom结构，对dom的操作最终都不奏效
4：mounted，挂在完成；此时页面呈现的是经过vue编译的dom，一般在此时开启定时发送网络请求，绑定事件等初始化操作
5：beforeupdate，更新之前；此时页面是旧的，但是数据是新的，页面与数据未保持一致
6：updated：更新完成；此时数据与页面保持一致，页面是新的，数据也是新的
7：beforedestroy：被销毁之前； 此时vm中所有的data，methods指令等都可以使用，一般再次阶段进行关闭定时器，取消订阅解绑自定义事件等操作
8：destroyed，销毁完成
常用的生命周期钩子，一个是mounted，这个事件可以发送网络请求，启动定时器，绑定自定义事件，订阅消息等，第二个是beforedestroy，这个时间清除定时器，解绑自定义事件，取消订阅等收尾工作
vue组件
使用组件
1：定义组件
2：注册组件
3：使用组件，
全局组件和局部组件
局部在组件内部components中注册，只在当前组件内有效，全局组件，vue.component中注册，全局都可以使用
暴露的三种方式
1： export const xxxx：分别暴露
2：export {xxxx} 统一暴露
3：export default xxx 默认暴露
ref属性
可以获取DOM元素和组件的引用
用来给元素或者子组件注册引用信息，跟id差不多，
应用在html标签上获取到的是真是dom元素，应用在组件上得到的是组件实例对象，
使用方法
获取是通过this.$refs.123456
获取到以后可以进行dom的操作以及对子组件内的方法进行操作等
$nextTick(cb)
这个方法把推迟到下一个dom更新周期之后执行，等组件dom全部更新之后再进行cb回调函数
forEach
array.forEach(element => {
});
foreach不会被中断，即使找到合适的项，
arr.some
arr.some((item,index)=>{
if(逻辑判断)
return true 就可以直接退出
})
arr.every
arr.every((item，index)=>{item.state
})
这个方法会返回一个布尔值，只有内部每一项都符合才会返回true，有一项不符合就会返回false
props
接受外部组件传递的数据，
props:[],默认数组接受
props:{xx:string;xxx:number}可以限制传递的类型
props:{把里面每一个传递项做一个更详细的限制
xx；{type:string; 传递值的类型
required:true; 是否必须传递，后面跟一个布尔值
default:xxx; 如果不传值就按找默认值xxxx来执行
}
}
props的数据是只读的，vue会监测对props数据的修改，修改会报错，如果需要修改传递过来的值可以在data中备份一份，去data备份中的数据进行修改
mixin混合
把多个组件公用的配置提取成一个混入对象，
这个太乱了，没学
插件
没懂，先不学了
scoped
这个是避免每个组件类名样式重复，所以给每一个组件一个自己的局域范围内生效的样式，即使不同的组件样式类名相同也不会冲突和覆盖i，app里面正常也写上scoped，不然会影响其他组件，
reduce
(es6)reduce遍历进行某种计算。然后返回其值，并继续计算 不改变原数组，返回计算的最终结果,从第二项开始计算 prev为计算结果 cur为当前项
arr.reduce((prev,cur)=>{
}[,初始值xxx])
数组的长度是多少，这个reduce函数就会被调用几次，
pre是上一次的值，
cur是当前的值
第一次调用的时候pre的值是初始值xxx，
内部就是逻辑判断，值必须得return出去；
这个有点难，我不是特别懂
locastorage本地存储(20M)
不会随着浏览器的关闭消失，需要手动清除
//localStorage.setItem(key,value)存储
localStorage.setItem('key',JSON.stringify(arr))
window.localStorage.setItem('key(setItem时需要输入key,value)')
存储一个本地缓存，通过键值对的形式
//localStorage.getItem(key)得到本地缓存
//localStorage.removeItem(key)删除数据
//localStorage.clear()删除全部数据
//sessionStorage本地存储(5M)
会随着浏览器的关闭销毁
//sessionStorage.setItem(key,value)存储
//sessionStorage.getItem(key)得到
//sessionStorage.removeItem(key)删除数据
//sessionStorage.clear()删除全部数据
window.sessionStorage.setItem('key(setItem时需要输入key,value)')
自定义事件
*适用于子组件发父组件传递
1：子组件中再methods中定义，this.$emit('自定义事件的名字'，this+要传递的参数)
2：父组件中，在子组件标签中触发自定义的事件，<子组件 @自定义事件='调用方法'></子组件>
在父组件methods中调用方法
methods:{
调用方法(收到一个value值){
this.data中创建接收的数据=收到传递过来的value
}
}
全局事件总线
*任意组件件通信的方式，
1：安装全局事件总线，在main.js中，new Vue({
创建beforecreate(){
Vue.prototype.$bus=this 安装全局事件总线
}
})
使用全局事件总线
接受数据
mounted(){
this.on('xxx',this.xxx)
}
a组件向接收数据，则a组件中给$bus绑定自定义事件，
提供数据
this.emit('xxx',数据)；
2：创建eventbus.js模块，并且暴露出去，
import Vue from 'vue'
export default new Vue（）
先引入定义的eventbus.js
在methods
数据发送的组件调用bus.$emit('d事件名',this+要发送的数据)
引入eventbus
先引入定义的eventbus.js
然后在created中
数据接受的组件调用bus.$on('事件名'，事件处理函数(形参)=>{
this.xxx=形参， 这个形参就是传递过来的数据
})
动态组件
内置的组件
component
动态组件
-
Props：
is- string | ComponentDefinition | ComponentConstructorinline-template- boolean
-
用法：
渲染一个“元组件”为动态组件。依
is的值，来决定哪个组件被渲染。<!-- 动态组件由 vm 实例的 `componentId` property 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件 --> <component :is="$options.components.child"></component>
这是一个占位符，要显示哪个组件可以直接把组件名写到里面
keep-alive
让组件不会因为切换而销毁，即使不展示的情况下也进行缓存，被包裹的组件名
如果不写默认都会被缓存
keep-alive的include属性，指定哪些组件被缓存，多个用逗号隔开
keep-alive的exclude属性，指定哪些组件不被缓存，多个用逗号隔开
但是注意这两个属性不能同时使用
同时可以配合两个生命周期函数，一个是activated(){ }当组件被激活时；一个是deactivated(){}当组件被缓存时
在动态组件上使用 keep-alive
我们之前在一个多标签的界面中使用 is attribute 来切换不同的组件：
<component v-bind:is="组件名"></component>
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。例如我们来展开说一说这个多标签界面：
我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<component v-bind:is="组件名"></component>
</keep-alive>
注意这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。
插槽slot
每一个solt都必须要有一个name，如果没有默认是name='default'
如果要把内容填充到指定的插槽中。需要使用v-slot这个指令，
v-slot指令必须要在template中，
使用方法
<template v-slot:123123><template>
v-slot可以简写，简写形式为#
<template #123123><template>
作用域插槽v-slot:xxx='scoped'
为slot提供属性和对应的值
ESlint
javascript语法检查，
设置-搜索tabsize把缩进改为2，
在eslintrc.js中rules配置规则
axios
axios({
methods:'请求类型'，
url：'请求地址'，
params:{查询参数}，
data:{请求体参数}
}).then((result)=>{
.then是请求成功的回调
})
如果是get请求，参数放在params中，如果是post请求，参数放在data中
如果返回值是promise实例，在前面加await，方法前面加async
数据可以用const result=await axios({xxxx})来接收，可以用解构赋值方法直接结构出来，
const {data：res}=await axios({xxxx})，使用解构赋值把打他结构出来，使用：重命名
console.log(res.data)
axios直接发起请求
axios直接发起get请求
const {data:res}=await axios.get('url地址'，{get参数，params:{ })
注意：使用get传参，是路径后面用花括号包起来里面再写params:{xxx}
axios直接发起post请求
const {data:res}=await axios.post('url地址'，{xxx:xxx})
注意：使用post传参，直接再路径后面用花括号把参数包起来即可
