移动端布局
rem单位
1 import ‘js/rem.js‘;
引入 rem.js 文件后，css 中就可以直接写 rem 单位了，改变移动端设备时，宽高会等比例更新。
flexbox布局（弹性盒布局）
1 *{ 2 margin: 0; 3 padding:0; 4 } 5 html,body{ 6 height: 100%; 7 } 8 li{ 9 list-style: none; 10 } 11 body{ 12 #container{ 13 height: 100%; 14 display: flex; 15 flex-direction: column; 16 #header,#footer{ 17 background: yellowgreen; 18 //侧轴（水平）居中 19 align-items: center; 20 } 21 #header{ 22 display: flex; 23 height: 1rem; 24 //顶在左右两边 25 justify-content: space-between; 26 line-height: 1rem; 27 li{ 28 padding: 0 10px; 29 } 30 } 31 #footer{ 32 display: flex; 33 height:1.2rem; 34 justify-content: space-around; 35 li{ 36 text-align: center; 37 } 38 } 39 #main{ 40 flex:1; 41 } 42 43 #Menu{ 44 position: fixed; 45 46 .mask{ 47 position: fixed; 48 left:0; 49 right: 0; 50 top: 1rem; 51 bottom:1.2rem; 52 background: red; 53 } 54 .bar{ 55 position: fixed; 56 width: 5rem; 57 right: 0; 58 top: 1rem; 59 bottom:1.2rem; 60 background: blueviolet; 61 } 62 } 63 } 64 }
font-awesome 字体图标
1 import ‘./assets/font-awesome-4.7.0/css/font-awesome.min.css‘;
1 <font class="fa fa-home"></font>
transition 过渡
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
transition 是 vue 提供的组件，这个组件的作用是给其子节点添加动画效果。
1 <template> 2 <div id="Menu"> 3 <transition 4 enter-class 5 enter-active-class="animated fadeIn" 6 enter-to-class 7 leave-class 8 leave-active-class="animated fadeOut" 9 leave-to-class 10 > 11 12 <div class="mask" v-if="show"></div> <!-- 加载动画的控件 --> 13 </transition> 14 <transition 15 enter-class 16 enter-active-class="animated fadeInRight" 17 enter-to-class 18 leave-class 19 leave-active-class="animated fadeOutRight" 20 leave-to-class 21 > 22 <div class="bar" v-if="show"></div> <!-- 加载动画的控件 --> 23 </transition> 24 </div> 25 </template> 26 <script> 27 export default { 28 data() { 29 return { 30 show: false 31 }; 32 }, 33 mounted() { 34 // setTimeout(() => { 35 // this.show = true; 36 // }, 3000); 37 //$on是创建事件 38 this.$eventbus.$on("abc",function(){ 39 this.show = !this.show; 40 }.bind(this)) 41 } 42 }; 43 </script>>
当对应的事件被触发之后（涉及到eventbus，触发事件的按钮在header页面，没往这放），div:mark与div：bar就会实现淡入淡出的动画。
v-if 和 v-show 都可以实现动画。
:duration="10000" 可设置动画时长，单位毫秒。
enter-class 在第一帧之后就删除了；
enter-to-class 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
transition-group
transition只能有0个或1个子节点，而transition-group可以有零个或多个子节点。
循环渲染时，必须写key，并且key的值是唯一标识符（不要用数组下标）。
1 <template> 2 <div id="main"> 3 <input type="text" v-model="duang" /> 4 <button @click="fn">添加</button> 5 <transition-group 6 enter-class 7 enter-active-class="animated fadeIn" 8 enter-to-class 9 10 leave-class 11 leave-active-class="animated fadeOut" 12 leave-to-class 13 14 v-on:before-enter="a" 15 v-on:enter="b" 16 v-on:after-enter="c" 17 > 18 <li v-for="(item,index) in arr" :key="item.id"> 19 {{item.text}} 20 <button @click="fn2(index)">删除</button> 21 </li> 22 </transition-group> 23 </div> 24 </template>> 25 <script> 26 export default { 27 data() { 28 return { 29 duang: "", 30 arr: [] 31 }; 32 }, 33 methods: { 34 fn() { 35 this.arr.push({ 36 text: this.duang, 37 id: new Date().getTime() 38 }); 39 }, 40 fn2(index) { 41 this.arr.splice(index, 1); 42 }, 43 a: function(el) { 44 console.log("进入前", el); 45 }, 46 b: function(el,done) { 47 console.log("进入。。。", el); 48 setTimeout(function() { 49 done(); //done()放为进入之后执行的方法，不加的话不会土司进入后这句话。 50 }, 500); 51 }, 52 c: function(el) { 53 console.log("进入后", el); 54 } 55 } 56 }; 57 </script>>
钩子函数
动画回调函数（钩子函数），动画执行的过程中，自动触发的一些函数。
既可以写在 transition 中，也可以写在 transition-group 中。
1 <transition 2 v-on:before-enter="beforeEnter" //进入之前 3 v-on:enter="enter" //进入时... 4 v-on:after-enter="afterEnter" //进入之后 5 v-on:enter-cancelled="enterCancelled" //进入后取消（一般不用） 6 7 v-on:before-leave="beforeLeave" //离开之前 8 v-on:leave="leave" //离开时... 9 v-on:after-leave="afterLeave" //离开之后 10 v-on:leave-cancelled="leaveCancelled" //离开后取消（一般不用） 11 >
钩子函数分两组：
- enter 为创建节点前自动执行、创建节点过程中自动执行、创建节点完毕时自动执行、创建节点取消时自动执行。
- leave 为删除节点前自动执行、删除节点过程中自动执行、删除节点完毕时自动执行、删除节点取消时自动执行。
1 methods: { 2 beforeEnter: function (el) { 3 console.log(‘进入前‘, el) 4 }, 5 enter: function (el, done) { 6 console.log(‘进入...‘, el) 7 setTimeout(()=>{ // 要给动画效果预留时长，如果瞬间done()，那么看不到动画效果。 8 done() // 表示完成动画 9 }, 2000) 10 }, 11 afterEnter: function(el){ 12 console.log(‘进入完成‘, el) 13 }, 14 enterCancelled: function(el){ 15 console.log(‘取消进入‘, el) 16 } 17 }