vue基础学习（二）
1、钩子函数
01-案例：自动获取焦点dom版本
回调函数:一个函数被当做参数进行传递的时候,称作这个函数为回调函数
构造函数:一个函数被new 关键字引导执行的时候,称作这个函数为构造函数
钩子函数: 一个应用程序或者框架内部提前定义好的一批函数,这些函数会在特定的时间段自动执行
生命周期: 一个程序会存在初始化-运行-销毁等阶段,这些阶段统称为该程序的生命周期
1、钩子函数mounted的理解
(1) 表示页面一加载完毕就执行mounted中的函数，跟window.onload是一样的原理
(2) mounted不能更改其名字
2、 如何获取dom元素
(1) 设置属性ref=”起的名字”
(2) 在钩子函数中获取 this.$refs.起的名字
2、自定义指令
02-案例：自动获取焦点自定义指令版本
1、 自定义指令：
// 自定义指令通过Vue.directive()创建，它包含两个参数，一个是自定义指令的名字，
可以随便取，但是全部小写；另一个是一个对象，表示自定义指令的配置项。
// inserted钩子函数，它表示自定义指令插入到标签中的时候就执行
// inserted钩子函数有两个参数（el,binding） el表示使用自定义指令的元素，binding表示自定义指令的信息
注意：指令名称全部是小写
步骤分析：
1、 自定义指令
2、 v-mycolor=”数据” 指令需要全部小写，数据需要在data中定义
3、 Binding.value就可以获取数据在data中定义的
3、过滤器
03-案例：创建过滤器
过滤器:对需要展示的数据进行加工处理后再展示到界面，并不会改变原数据
Vue.filter('过滤器名称',function(value,arg){
// value就是需要处理的原始数据 arg是使用过滤器时传递的参数
//对数据处理的业务逻辑
return处理完毕的数据
})
使用方法：原始数据 | 过滤器名称(参数)
4、computed&&watch
04-computed
computed:计算属性,是指在computed对象中定义属性,属性的值是该属性后面函数的返回值,而且函数内部如果用到了data中定义的其他数据,只要这些数据发生了变化,都会重新触发函数的执行,计算属性的值也会发生变化。
new Vue({
el:'#app',
data:{
msg:'hello'
},
computed:{
'info': function(){
//只要msg发生了变化,会重新触发该函数的执行
// info的值就是函数的返回值
return this.msg + 'world'
}
},
05-watch
1、watch 和 computed计算属性的区别
watch可以对data中申明过的数据进行监视,只要被监视的数据发生了变化,就会触发对应函数newVal 表示变化后的值 oldVal 表示变化前的值
computed定义计算属性,定义的属性和在data中定义的使用方式一样,但是computed中的属性值是对应函数的返回值,只要函数中依赖的其他数据发生了变化,会重新计算返回值
06-深度监听
语义理解：
1、watch监听user对象
2、user对象里需要使用hangler函数以及deep：true深度监听
07-案例：搜索功能
步骤分析：
1、 对表单双向数据绑定
2、 定义一个计算属性 newList是个函数 同时将遍历数组改成计算属性的名字
3、 对数组进行过滤
4、 过滤数组中的每一个name(value.name数组中的每一个name)和输入的值是否相等
5、 返回过滤的结果
Es6简写 this都指向的是实例vm
提示：初次进入可以显示所有的数据是因为indexOf(“”)返回值为0 数据都满足条件所以可以都显示
08-axios的get请求
09-axios的post请求
10- 案例：获取真实列表数据
11- vue-resource的jsonp
5、动画
12-过渡和动画：css类名
1、isShow=!isShow的理解
@click=”isShow=!isShow” 表示点击时：原先值为true,点击后为false,原先为false再点击就为true
2、 v-if=”isShow” 此时由点击后值为ture就显示，否则就移除
(1) 如果使用v-show就是隐藏 即display:none
12- 过渡和动画：animate动画库
https://cn.vuejs.org/v2/guide/transitions.html#过渡的类名
V-enter :定义进入过渡的开始状态。
V-enter-active : 定义进入过渡生效时的状态。
V-enter-to :定义进入过渡的结束状态
1、动画的使用方法：
1、使用transition包裹需要动画的标签元素
2、给transition设置name属性
3、动画下过的设置
(1) 以name开头连接enter及其他 即把v-enter写成 .name-enter
(2)
(3) 进入开始状态和离开结束状态一致
13- 过渡和动画：animate动画库
14- 过渡和动画：javascript钩子
https://cn.vuejs.org/v2/guide/transitions.html#自定义过渡的类名
15- 案例：删除动画
1、步骤分析：
1、 确认取消弹窗动画的实现 需要引用animate.css文件
2、 点击删除按钮获取对应的id
3、 点击确认按钮删除对应的数据
