web复习总结

程序练习

1. 用Vue.js来输出一个微信内滴滴打车的WebApp首页Tab(首页含有巴士、快车、专车、顺风车、出租车、代驾)

html

<div id=”didi-navigator”>  
<ul><li v-for=”tab in tabs”>{
   {
    tab.text}} </li> 
    </ul>  
     </div> 

js

     New Vue({
        
      el:’# didi-navigator’, 
           data:{
        
              tabs:[      
                   {
    text : ‘巴士’ },
                   {
    text : ‘快车’ },
                   {
    text : ‘专车’ },
                   {
    text : ‘顺风车’ },
                   {
    text : ‘出租车’ },
                   {
    text : ‘代驾’ }]
                   }})

用vue.js编写一端代码，实现页面切换时为左侧划出

  <template> 
   <div id="app">  
       <!-- 使用transiton来规定页面切换时候的样式-->
             <transition name="slide-left">   
                  <router-view></router-view>    
                    </transition>  
                     </div>
                     </template>
                     <script>
                     export default {
    
                      name: 'app', 
                       mounted(){
       }, 
                        data () {
     
                           return {
     
                               index:0  
                                 }  },  
                                 methods :{
     
                                     }}
                                     </script>
                                     <style lang="less"> 
                                      /*左滑动效*/   
                                      .slide-left-enter-active {
     
                                         animation: slideLeft 0.3s;   } 
                                          /****自定义动画**/
                                            @keyframes slideLeft {
     
                                              from {
      
                                                 transform: translate3d(100%, 0, 0);
                                        /*横坐标,纵坐标,z坐标*/