vue第二天 ---案例+过滤器+自定义指令+生命周期+动画
1：品牌管理案例
增加+删除+搜索
页面布局：
面板+列表
用到了panel panel-primary ，panel-heading,panel-body(label(id+输入框，)，button)
列表 table,table-hover,table-striped table-bordered (thead(tr,th),tbody(tr,td))
增加实现过程：
1:获取id，和name的值，直接从data里面获取(因为进行了数据绑定)
2：组织成一个对象，
3：这个对象调用数组的相关方法，把数据添加到data中的liste里面
删除：
1：获取要删除数据的id，获取索引
2：直接用splice进行删除
this.list.some((item,i)=>{
if(item.id = id){
this.list.splice('i',1)
return true
}
})
var index = this.list.findIndex(item=>{
if(item.id ===id){
return true
}
})
this.list.splice(index,1);
在这里需要注意，搜索的时候，是根据id所对应的索引值进行搜索，
id可以根据用户点击的id和本身的id进行比对，如果是，则删除，但是找到id以后，关键你是要用数组的方法，用数组的方法，你要找到索引，新增的数组新方法就很给力，forEach，some，filter，findIndex
都会对数组额每一项进行遍历，执行相关操作
ID
Name
Ctime
option
{{item.id}}
{{item.name}}
{{item.time}}
删除
过滤器
vue容许你有自定义过滤器，可以被用作一些常见的文本格式化。两处：插值表达式，事件绑定。过滤器应该被添加在js表达式的尾部，由管道符表示
过滤器分为私有过滤器和去全局过滤器
在引入vue的时候，浏览器内部就创建了Vue构造函数，我们可以通过.来用他的属性和方法
'过滤器名称'，'回调函数(原始)'
Document
{{msg | remsg('大象')}}
自定义键盘修饰符
在所选框添加键盘事件@key.f2="add"
在vue实例里面调用config
Vue.config.keyCodes.f2 = 113;
自定义全局指令，让文本框获取焦点
在原加指令v-f 即可
Vue.directive('f',{
bind(el):{
el.focus()
},
inserted
update
})
ID
Name
Ctime
option
{{item.id}}
{{item.name}}
{{item.time|dateFormat}}
删除
bind，inserted，update都是钩子函数，类似于回调函数，如果你满足我的条件，就会执行后面的相关操作
VUE生命周期
什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
+ [生命周期钩子](https://cn.vuejs.org/v2/api/#选项-生命周期钩子)：就是生命周期事件的别名而已；
+ 生命周期钩子 = 生命周期函数 = 生命周期事件
+ 主要的生命周期函数分类：
- 创建期间的生命周期函数：
+ beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
+ created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
+ beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
+ mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
- 运行期间的生命周期函数：
+ beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
+ updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
- 销毁期间的生命周期函数：
+ beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
+ destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
创建--运行---销毁流程图
案例
{{msg}}
在VUE怎么发起ajax请求
[vue-resource 实现 get, post, jsonp请求](https://github.com/pagekit/vue-resource)
除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求
1. 之前的学习中，如何发起数据请求？
2. 常见的数据请求类型？ get post jsonp
3. 测试的URL请求资源地址：
+ get请求地址： http://vue.studyit.io/api/getlunbo
+ post请求地址：http://vue.studyit.io/api/post
+ jsonp请求地址：http://vue.studyit.io/api/jsonp
4. JSONP的实现原理
+ 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
+ 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
+ 具体实现过程：
- 先在客户端定义一个回调方法，预定义对数据的操作；
- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
- 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
vue动画：
为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；
动画四个时间点，两个时间段
v-enter 和v-leave-to是一样的
v-enter-active 和v-leave-enter是一样的
但是要自定义动画属性，只需要在transition属性里面添加name="my" 上面用my-enter,之类的就可以
Document
{{msg}}
{{msg}}
利用钩子函数，实现半程动画
before-enter enter after-enter
before一般是设置初始位置
enter是设置，小球动画的足迹，以及可以传参(done),来直接调用after-enter里面写的代码，比如让其再次回到初始位置的flag
Document
列表动画
Document
{{item.id}} ---------{{item.name}} ----------{{item.time}}
列表用transition-group包着
tag=“ul”，默认是span包li，这样不符合规范
appar ---列表以动画的形式展现