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;
 }