zoukankan      html  css  js  c++  java
  • vue.js 使用记录(1)

    1,for循环

    <li @click="toService(type, index)" v-for="(type,index) in typeList" :key="index" class="one_key_type_li">
       {{type.serviceTypeName}}
    </li>

    2,route带参数

    this.$router.push({
      name: "ServiceSelect",
      query: {
         serviceTypeId: type.serviceTypeId,
         serviceTypeName: type.serviceTypeName
       }
    });

    //接收query参数

      created() {
        this.type = this.$route.query.serviceTypeId;

      }

    // 标签跳转
    <router-link to="/Oncekey">
    <span>跳转</span>
    </router-link> 

    3,渲染后执行

    this.$nextTick(() => {
       setTimeout(function() {
          document.getElementById("m" + id).focus();
       }, 200);
    });

    4,store简单使用

    // store.js
    import Vue from "vue";
    import Vuex from "vuex";
    Vue.use(Vuex);
    export default new Vuex.Store({
      state: {
        onceKeyId: ""
      },
      mutations: {
        alterOnceKeyId(state, id) {
          state.onceKeyId = id;
        }
      }
    });
    
    //获取id
    this.$store.state.onceKeyId 
    //修改id
    this.$store.commit('alterOnceKeyId', "2342");

    5,transition动画

    <transition name="slide-fade">
      <ul v-if="typeList">
             动画出现
      </ul>
    </transition>
    
    /* 可以设置不同的进入和离开动画 */
    .slide-fade-enter-active {
      transition: all .3s ease;
    }
    /*.slide-fade-leave-active {
      transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }*/
    .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
      transform: translateX(10px);
      opacity: 0;
    }

     .fade-enter-active{
      transition: opacity .6s;
     }
     .fade-enter{
      opacity: .5;
     }

  • 相关阅读:
    第1周作业
    第0次作业
    第三周作业
    随笔1
    第一次作业
    第二周作业
    第零次作业
    第四周作业
    第三周作业
    第二次作业
  • 原文地址:https://www.cnblogs.com/holdon521/p/9523836.html
Copyright © 2011-2022 走看看