vue入门 day02
当在文本框上按下回车键13再抬起时，自动调用vue中的search
1. 双向绑定:
什么是单向绑定: 只能将程序中的修改更新到页面中。但是无法将页面中的更改，更新回程序中。
只能从Model -> View 不能从View -> Model
比如: {{}} v-text : 等等 都是单向绑定
比如: 1. 单选按钮radio: 要绑定checked
不绑定value，因为radio中的value是写死的，固定不变的。等着被选择。
绑定checked: 因为是否选中radio，取决于checked属性的值。用户更改选中项，改的也是checked属性值。——radio只能绑定v-model:checked=“变量”
绑定时:
小脾气: v-model在radio中：
从程序绑定到页面时: 会自动用checked后绑定的变量值和当前radio写死的value值做比较，返回bool值决定当前radio是否选中。时不用自己在checked后写完整条件！只写一个变量名即可！
改变选中状态时，v-model会将选中的radio的写死的value值更新回程序中绑定的变量上
2. 单个checkbox绑定: 也绑定checked属性
3. select元素绑定: 绑定的是select元素整体的value属性
因为，无论选择了哪一个option，当前选中项的值都 变成select元素的value属性值。
如何:
原理:
当从Model->View绑定时: 用变量的值和每个option的value做比较，按个相等，就选中哪一个 当修改select下的选中项后，将当前选中的option的value值更新回变量去
其实，以上绑定都有一个共同的简写: 只写v-model即可，可省略:value :checked等。v-model会个识别元素中起决定作用的可变的属性，自动绑定。
watch监控机制:
什么是: Vue中的watch监控机制可监控vue所有模型变量的变化。只要模型变量变化，就自动触发一个同名的函数。在函数中可调试变量的值或执行实时操作
何时: 希望只要变量的值变化，就立刻做一件事儿时
如何: new Vue({
el:"#app", //找要监控的整个页面空间
data:{
变量1:值1
}, //所有页面需要的模型变量
methods:{ ... }, //所有事件处理函数和一些自定义函数
created(){ ... }, //当new Vue()对象加载完自动执行
watch:{ //定义监控变量的函数
变量1(){//必须同名，只有同名的函数，才能监视同名的变量
执行一切js或vue的操作
}
}
})
2. 计算属性:
什么是: 不实际属性值，绑定时，动态通过其他现有属性，计算出自己的属性值。
何时: 页面上需要一个值，但是，这个值数据库中没有直接保存，而是需要动态计算出来。
如何: new Vue({
el:"#app",
data:{ },
methods:{ },
created(){ },
watch:{ },
computed:{
属性名(){
//通过其他变量计算获得最后结果
return 结果
}
}
})
使用计算属性：计算属性虽然定义成函数，但是，用法和普通模型变量完全一样！不要加()
特点:
-
只要依赖的其它变量变化，计算属性都会自动重新计算
-
一个属性如果多个位置使用，其实只计算一次。
原理: 计算属性的值，每计算一次，结果都会被Vue框架缓存起来，反复使用。除非依赖的变量发生改变时，才重新计算，然后再重新缓存，反复使用。
vs 函数: 也可以实现计算的效果
问题: 不会被缓存！每用一次就重复计算一次！
总结: 如果只关心计算结果时，首选计算属性
如果不关心结果，甚至没有返回值，只关心执行的过程时，首选函数。
3. 绑定样式:
2种:
1. 动态绑定单个css属性:
2种:
- 用字符串方式，绑定整个style属性：
缺点: 在字符串中不便于修改某一个css属性
- 都用对象方式，绑定style:
强调: 固定的style和动态绑定的style可同时存在
比如：
data:{
divStyle:{
top:"50px", //必须px
left:"50px" //必须px
}
}
运行时，结果: 动态绑定的style会和写死的style合并为一个style:
2.动态绑定class
2种
1.将整个class属性当作一个字符串绑定
问题：不便于控制一个class的启用或禁用
2.今后要使用对象格式绑定
运行时：
1.将变量中值为true的class转为字符串：
比如：{down:true,fade:true}
->“down fade”
{down:false,fade:true}
->“fade”
2.用翻译好的class字符串和元素上规定的class=""，合并为一个class
如果想用程序切换使用/不适用某个样式类，只要修改类名对应的true/false就行
4.自定义指令
何时：当希望元素自动执行一件事，但是vue中的指令不够用，就可以自定义指令。
如何：
1.定义一个新的自定义指令
Vue.directive("指令名",{ //指令名不应该带v-前缀
//会在当前元素加载后，自动执行
inserted(elem){
//elem:接住的是当前的指令所在的DOM元素
//可对elem执行任何原生DOM的函数
}
})
强调：应该定义在不属于任何new Vue()的外部全局
将来所有new Vue()都可以共用这个自定义指令
2.使用指令 但是，使用指令时，必须加v-前缀
原理：当这个元素在HTML中加载完成后，自动去调用指令中携带的inserted()函数
5. 过滤器:
什么是: 将不能直接使用的变量值，过滤成可以给人看的新值的函数
何时: 只要变量的原始值不是想要的，都可用过滤器过滤成想要的值给人看。
如何:
-
定义过滤器:
Vue.filter(“过滤器名称”,function(oldVal){
return 新值
})
-
使用过滤器:
在绑定语法中都可用"|"将过滤器连接在变量之后
运行时: 原始变量值->过滤器->oldVal参数->return过滤后的新值->给人看
过滤器参数:
何时: 当根据不同值，选择过滤成不同的新结果时
如何: 2步:
-
定义过滤器时添加形参:
function(oldVal,lang="cn"){
-
使用过滤器时传入实参:
{{sex2|sexFilter("en")}}
强调: 定义时添加过滤器形参，从第二个形参开始添加。但是使用过滤器时，自定义实参值，却从第一个实参传入。但是还不会出错！因为过滤器函数在调用时，自动回将原始值作为第一个实参传入。我们添加的自定义实参，只能排在第二。
其实程序中的过滤器也可以用|串联多个:
{{变量|过滤器1|过滤器2|… }}
坑：定义后一个过滤器时，拿到的值不是原始值，而是上一个过滤过滤后的中间产物。
6. axios
什么是: 专门发送ajax请求的基于Promise的函数库
为什么:
-
然哥四步/五步:
-
可以自己封装
-
jQuery库中的$.ajax()
将来在Vue项目中，几乎不会用jQuery
如果仅仅为了发ajax请求而引入jQuery函数库，特别小题大做。
-
Vue官方有一个vue.resource组件
但已停止维护
- axios: Vue官方推荐的最好的ajax函数库。
何时: 今后只要在任何位置想发ajax请求，都可用axios
如何:
1.引入axios.js
2.调用axios.get()函数发送请求
axios.get("url",{
params:{
参数1：值1
...:...
}
//运行时params中的参数会被翻译为字符串拼接到url结尾
}).then(result=>{
this
result返回的不只是服务端响应结果
真正的响应结果包含在result.data中
})
7.new Vue()的生命周期
如何：new Vue()的生命周期包括4个阶段，8个函数
前: beforeCreate(){ … }
1.创建（create）阶段：创建new Vue()对象和data()对象
已经有data对象了，但是没有虚拟DOM树
可以发送ajax请求
因为没有虚拟DOM树，所以暂时不能用DOM操作
后：created(){ … .}
前: beforeMount(){ … }
2.挂载（mounted）阶段：创建虚拟DOM树，将data中的变量值开始向DOM树上绑定
既有data对象，又有虚拟dom树
即可发送ajax请求，又可执行dom操作
后：mounted(){…}
前：beforeUpdate(){…}
//后两个阶段不是必须
3.更新（update）阶段：当data中的变量值被改变时才触发
后：updated(){ … }
前：beforeDestroy(){ … }
4.销毁（destroy）阶段：当调用专门的$destroy函数销毁一个组件时，才触发
后：destroyed(){ … }