数据库一个表对应一个类，表由子段组成，类由属性组成，互相对应，查表就是查一组对象，一个的对象数组，在vue迭代中最多的就是对象数组，
button默认的type是submit的，一提交就刷新页面，所以要想让他成为一个普通的按钮就type=button
全局过滤器＋调用
全局不能定义到vm实例上，必须定义到外部
注意第一个参数第二个参数的区别
局部过滤器＋调用
时间过滤器
过滤器加参数用pattern接受
让9变09用padStart，注意是大写
点击回车就添加，调用add事件，如果换成别的键比如f2就不好使，
如果用f2的话可以写113
记住太费劲，vue允许自定义键盘码
要焦点
自定义指令，全局和局部
自定义指令，此时el相当于
input
bind也行，但是全局不行，执行最早，当在元素上使用自定义指令时，就会被调用。此时，内存中的dom树，还没有被渲染到页面中，只执行一次以后，渲染以后不再执行，inserted当dom树被渲染到页面时执行，update只要更新就执行
如何给赋值？
如果有-就必须加‘’，上图是一个简写的形式，此时表示bind或update时该指令被执行。
生命周期
所以不能用data和method里面的东西
vue动画，三种方式
transform和transition过渡
动画分为两个阶段，入场和离场，四个状态
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>切换效果</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .v-enter,.v-leave-to{ opacity: 0; transform:translateX(200px) ; } .v-enter-active, .v-leave-active{ transition: all 0.8s ease; } .my-enter,.my-leave-to{ opacity: 0; transform:translateY(200px) ; } .my-enter-active, .my-leave-active{ transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <button @click="flag=!flag">toggle</button> <transition name='my'> <h3 v-if="flag">{{msg}}</h3> </transition> </div> <div id="app1"> <button @click="flag=!flag">toggle</button> <transition> <h3 v-if="flag">{{msg}}</h3> </transition> </div> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ msg:"被执行的动画效果", flag:false }, methods:{ } }); let vm1=new Vue({ el:'#app1', data:{ msg:"被执行的动画效果", flag:false }, methods:{ } }); </script> </body> </html>
name属性就是前缀
使用第三方动画库 Animate.css
第三种方式用钩子函数
https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90
前四个进，后四个出
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .ball{ width: 20px; height: 20px; background-color: red; border-radius: 50%; } </style> </head> <body> <div id="app"> <button @click="flag=!flag">加入购物车</button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" > <div class="ball" v-if="flag"></div> </transition> </div> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ flag:false }, methods:{ //el表示要执行动画的元素 beforeEnter(el){ el.style.transform='translate(0,0)'; }, enter(el){ el.offsetLeft;//不加的话直接跳转没有移动的过程，offset强制重新绘制页面 el.style.transform='translate(100px,450px)'; el.style.transition='all 0.8s ease'; done();//立刻执行afterEnter }, afterEnter(el){ this.flag=!this.flag; } } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> li{ border:2px dashed #aaa; height:50px; line-height:50px; width: 100%; } li:hover{ background-color:#aa4765; } .v-enter,.v-leave-to{ opacity: 0; transform:translateY(200px) ; } .v-enter-active, .v-leave-active{ transition: all 0.6s ease; } .v-move{ transition: all 0.8s ease; } .v-leave-active{ position: absolute; } </style> </head> <body> <div id="app"> id:<input v-model="Userid" /> name:<input v-model="Username" /> <button @click="add()">添加</button> <!--<ul> tag属性修改transition-group编译后默认为span--> <!--为多个元素添加动画--> <transition-group appear tag="ul"> <li v-for="(item,index) in Userlist" :key='item.Userid1' @click="del(index)" > {{item.Userid1}}---------------{{item.Username1}} </li> </transition-group> </ul> </div> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ Userid:'', Username:'', Userlist:[ { Userid1:'1', Username1:'张飞'} ] }, methods:{ add(){ let user= {Userid1:this.Userid,Username1:this.Username}; this.Userid=this.Userlist.push(user); this.Userid=this.Username=''; }, del(index){ this.Userlist.splice(index,1); } } }); </script> </body> </html>
