vue项目中的一些使用方法和技巧

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

vue引入public目录下的静态资源的几种方式

这里static文件夹位于public文件夹下

json文件引入

使用axios的get请求获取到数据

async getClickData(data,tbname){
  let {data:dataArray} = await this.$ajax.get('/static/left-name-data.json');
  // dataArray即是数据，不过是异步的方式取的。
}

js文件引入

data.js示例：

let data=[1,2];

需要在index.html中引入

<script src="./static/data.js"></script>

在项目中就可以直接使用

mounted() {
  console.log(data);// 这里就能直接拿到数据
}

使用v-if、v-show

使用v-if可以销毁页面 还原页面 当使用v-if报警告时（style...null），使用v-show无法满足需求时，可以考虑使用z-index=-10;隐藏组件！

使用vue的transition组件

使用高度渐变动画时，最外层组件必须使用overflow:hidden;

<transition name="tst">
  <ul v-show="showList" class="top-list" style="overflow:hidden;">
    <li v-for="item in 5" :key="item">测试{{ item }}</li>
  </ul>
</transition>

.tst-enter-active,
.tst-leave-active {
  transition: all 1.3s ease;
  height: 400px;
}

.tst-enter-from,
.tst-leave-to {
  height: 0px;
}

如果不用transition，单纯使用css也可以。

  <ul v-show="showList" :class="showList?'no1':'no2'" style="overflow:hidden;">
    <li v-for="item in 5" :key="item">测试{{ item }}</li>
  </ul>

.no1{
  transition: all 1.3s ease;
  height:150px;
}
.no2{
  transition: all 1.3s ease;
  height:0px;
}

vue$router路由相关

1、单独添加缓存

meta属性中keepAlive属性为true就可以，别的不添加这个属性。

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" v-if="$route.meta.keepAlive" />
  </keep-alive>
  <component :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>

2、同路由不同参数刷新问题

添加key，让其变化的时候重新渲染。

方法一：直接使用key
<router-view :key="key"/>
方法二：通过useKey是否存在判断是否使用key
<router-view v-slot="{ Component }">
  <component :is="Component" v-if="!$route.meta.useKey" />
  <component :is="Component" :key="key" v-if="$route.meta.useKey" />
</router-view>

利用计算属性。

computed: {
  key() {
    console.log('执行');
    return this.$route.name ? this.$route.name + new Date() : this.$route + new Date();
  }
},