2021-07-23大连东软实训第四天---vue

数据库一个表对应一个类，表由子段组成，类由属性组成，互相对应，查表就是查一组对象，一个的对象数组，在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://animate.style/

第三种方式用钩子函数

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><transitionv-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>