- 计算属性:
什么是: 不实际属性值，绑定时，动态通过其他现有属性，计算出自己的属性值。
何时: 页面上需要一个值，但是，这个值数据库中没有直接保存，而是需要动态计算出来。
如何: new Vue({
el:"#app",
data:{ },
methods:{ },
created(){ },
watch:{ },
computed:{
属性名(){
//通过其他变量计算获得最后结果
return 结果
}
}
})
使用计算属性：计算属性虽然定义成函数，但是，用法和普通模型变量
完全一样！不要加()
特点:
1. 只要依赖的其它变量变化，计算属性都会自动重新计算
2. 一个属性如果多个位置使用，其实只计算一次。
原理: 计算属性的值，每计算一次，结果都会被Vue框架缓存起来，反复使用。除非依赖的变量发生改变时，才重新计算，然后再重新缓存，反复使用。
vs 函数: 也可以实现计算的效果
问题: 不会被缓存！每用一次就重复计算一次！
总结: 如果只关心计算结果时，首选计算属性
如果不关心结果，甚至没有返回值，只关心执行的过程时，首选函数。
-
绑定样式:
2种:-
动态绑定单个css属性:(两种)
- 用字符串方式，绑定整个style属性：
-
<ANY :style="变量"
data:{
变量:"top:50px; left:50px"
}
缺点: 在字符串中不便于修改某一个css属性
- 都用对象方式，绑定style:
<ANY :style="变量"
data:{
变量:{
top:"50px", //必须px
left:"50px" //必须px
}
//绑定时，被自动翻译为字符串:
//"top:50px; left:50px"
}
强调: 固定的style和动态绑定的style可同时存在
比如：
<div style="position:fixed" :style="divStyle">
data:{
divStyle:{
top:"50px", //必须px
left:"50px" //必须px
}
}
运行时，结果: 动态绑定的style会和写死的style合并为一个style:
<div style="position:fixed; top:50px; left:50px"
-
动态绑定class:(两种)
1. 将整个class属性当做一个字符串绑定
问题: 不便于控制一个class的启用或禁用
2. 今后也要使用对象格式绑定:
<b class="固定不变的class" :class="变量名"
data:{
变量名:{
class1: true/false,
class2:true/false,
... ...
}
}
运行时:
1. 将变量中值为true的class转为字符串:
比如: { down:true, fade:true }
-> "down fade"
{down:false, fade:true}
-> "fade"
2. 用翻译好的class字符串和元素上规定的class=""，合并为一个class
如果想用程序切换使用/不使用某个样式类，只要修改类名对应的true/false就行
值为true，就是应用该样式类
值为false，就是不应用该样式类
-
自定义指令:
何时: 当希望元素自动执行一件事，但是vue中的指令不够用，就可以自定义指令。
如何:
1.定义一个新的自定义指令:
Vue.directive("指令名",{//指令名不应该带v-前缀
//会在当前元素加载后，自动执行
inserted(elem){
//elem: 接住的是当前指令所在的DOM元素
//可对elem执行任何原生DOM的函数
}
})
强调: 应该定义在不属于任何new Vue()的外部全局
将来所有new Vue()都可以共用这个自定义指令。
使用指令:
<ANY v-指令名
但是，使用指令时，必须加v-前缀
原理: 当<ANY>这个元素在HTML中加载完之后，自动去调用指
令中携带的inserted()函数-
过滤器:
什么是: 将不能直接使用的变量值，过滤成可以给人看的新值的函数
何时: 只要变量的原始值不是想要的，都可用过滤器过滤成想要的值给人看。
如何:- 定义过滤器:
Vue.filter("过滤器名称",function(oldVal){
return 新值
})
- 使用过滤器:
在绑定语法中都可用"|"将过滤器连接在变量之后
运行时: 原始变量值->过滤器->oldVal参数->return过滤后的新值->给人看
过滤器参数:
何时: 当根据不同值，选择过滤成不同的新结果时
如何: 2步:
1. 定义过滤器时添加形参:
function(oldVal,lang="cn"){
2. 使用过滤器时传入实参:
{{sex2|sexFilter("en")}}
强调: 定义时添加过滤器形参，从第二个形参开始添加。但是使用过滤器
时，自定义实参值，却从第一个实参传入。但是还不会出错！因为过滤器
函数在调用时，自动回将原始值作为第一个实参传入。我们添加的自定义
实参，只能排在第二。
其实程序中的过滤器也可以用|串联多个:
{{变量|过滤器1|过滤器2|... }}
坑：定义后一个过滤器时，拿到的值不是原始值，而是上一个过滤过滤后的中间产物。
axios
什么是: 专门发送ajax请求的基于Promise的函数库
为什么:
1. 然哥四步/五步:
2. 可以自己封装
3. jQuery库中的.ajax中的data:{ ... }
参数1:值1,
... : ...
}
//运行时params中的参数会被翻译为字符串，拼接到url的结尾:
"url?参数1=值1&参数2=值2&..."
}).then( result=> {
为this保持和外部VUe一致，必须用箭头函数
result返回的不只是服务端响应结果
真正的响应结果包含在result.data中
})-
new Vue的生命周期:
什么是: 一个new Vue()的加载过程:
何时: 如果希望在加载过程某个阶段，自动执行一项任务时。
如何: new Vue()的声明周期包括4个阶段，8个函数
钩子函数——其实就是在不同阶段自动执行的回调函数
前: beforeCreate(){ ... }- 创建(create)阶段: 创建new Vue()对象和data()对象
已经有data对象了，但是没有虚拟DOM树
可以发送ajax请求
因为没有虚拟DOM树，所以暂时不能用DOM操作
后: created(){ ... }
前: beforeMount() { ... } - 挂载(mount)阶段: 创建虚拟DOM树，将data中的变量值开始向DOM树上绑定
即有data对象，又有虚拟DOM树
即可发送ajax请求，又可执行DOM操作
后: mounted(){ ... }
//后两个阶段不是必须:
前: beforeUpdate(){ ... } - 更新(update)阶段: 当data中的变量值被改变时才触发
后: updated(){ ...}
前: beforeDestroy(){ ... } - 销毁(destroy)阶段: 当调用专门的$destroy函数销毁一个组件时，才触发
后: destroyed(){ ... }
- 创建(create)阶段: 创建new Vue()对象和data()对象
