vue项目简书(一)

时间:2022-06-26
本文章向大家介绍vue项目简书(一)，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

1. vue数据请求完成之前的'Loading'动画, 它将给用户更好的使用体验. 这里将使用项目中的 loading 动画为例.

这里以组件的方式创建并使用 loading,创建组件

a. 新建 .vue 文件： src -> components -> laoding -> tran.vue

b. 编辑 tran.vue 文件

<template>
  <div class="loading">
    <div class="center">
      <div class="bgi"></div>
    </div>
    <div class="yy"></div>
  </div>
</template>

<script>
    export default {
        name: "Loading"// 定义的组件名称 使用时写法：loading
    }
</script>

<style scoped>
  .loading {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
  }
  .center{
    width: 3.5rem;
    height: 3.5rem;
    position: relative;
    top: 40%;
    left: 39%;
    animation: ani 1s linear 0s infinite;
  }
  .bgi{
    width: 100%;
    height: 100%;
    background: url('../../L-imgs/icon_loading.png') center center no-repeat transparent;
    -webkit-background-size: 100% 700%;
    background-size: 100% 700%;
    background-position: 0 0;
    animation: ani_tt 9s linear 0s infinite;
  }
  .yy{
    width: 1.5rem;
    height: 1rem;
    border-radius: 50% / 50%;
    background-color: #000;
    margin: 0 auto;
    position: relative;
    top: 40%;
    animation: ani_yy 1s linear 0s infinite;
  }
  /*关键帧动画*/
  @keyframes ani {
    0% {
      top: 40%;
      opacity: 1;
    }
    50%{
      top: 32%;
      opacity: 0.1;
    }
    100%{
      top: 40%;
      opacity: 1;
    }
  }
  @keyframes ani_tt {
    0% {background-position:0 0;}
    14.2% {background-position:0 0;}
    14.2001% {background-position:0 16%;}
    28.4% {background-position:0 16%;}
    28.4001% {background-position:0 33%;}
    42.6% {background-position:0 33%;}
    42.6001% {background-position:0 50%;}
    56.8% {background-position:0 50%;}
    56.8001% {background-position:0 67%;}
    71% {background-position:0 67%;}
    71.0001% {background-position:0 84%;}
    85.2% {background-position:0 84%;}
    85.2001% {background-position:0 100%;}
    100% {background-position:0 100%;}
  }
  @keyframes ani_yy {
    0%{
      width: 1.5rem;
      opacity: 0.05;
    }
    50%{
      width: 3rem;
      opacity: 0.01;
    }
    100%{
      width: 1.5rem;
      opacity: 0.05;
    }
  }
</style>

使用组件

原理: 通过自定义一个变量 isLoading 初始化为 true ，在数据请求成功之后将变量改为 false ，在 template 中通过变量来控制是否显示隐藏，使用 vue 自带的 过渡效果 增加用户体验

a. .vue 文件使用代码示例片段 

<template>
  <div>
    <transition name="fade">
      <loading v-if="isLoading"></loading>
    </transition>
  </div>
</template>
<script>
import Loading from '../components/loading/trans'

export default{
  components:{ Loading  },
  data(){
    return{
      isLoading: true
    }
  },
  mounted() {
    const me = this
    // 初始化页面数据
    me.loadPageData()
  },
  methosd:{
    loadPageData: function() {
      // axios 请求页面数据 .then 中将状态值修改  this.isLoading = false
    },
  }
}
<script>

参考博客: https://www.jianshu.com/p/104bbb01b222

在Vue单页应用中，如果在某一个具体路由的具体页面下点击刷新，那么刷新后，页面的状态信息可能就会丢失掉。这时候应该怎么处理呢？

  1. 在这个Vue单页应用中，是用Vuex作为状态管理的，一开始的思路是将Vuex里的数据同步更新到localStorage里。

即：一改变vuex里的数据,便触发localStorage.setItem 方法，参考如下代码：

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex)
 
function storeLocalStore (state) {
    window.localStorage.setItem("userMsg",JSON.stringify(state));
}
 
export default new Vuex.Store({
    state: {
        username: "王二",
        schedulename: "标题",
        scheduleid: 0,
    },
    mutations: {
        storeUsername (state,name) {
            state.username = name
            storeLocalStore (state)
        },
        storeSchedulename (state,name) {
            state.schedulename = name
            storeLocalStore (state)
        },
        storeScheduleid (state,id) {
            state.scheduleid = Number(id)
            storeLocalStore (state)
        },
    }
})

然后在页面加载时再从localStorage里将数据取回来放到vuex里，于是我在 App.vue 的 created 钩子函数里写下了如下代码：

localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
     
//考虑到第一次加载项目时localStorage里没有userMsg的信息，所以在前面要先做判断

以上的解决方法由于要频繁地触发 localStorage.setItem 方法，所以对性能很不友好。而且如果一直同步vuex里的数据到localStorage里，我们直接用localStorage做状态管理好了，似乎也没有必要再用vuex。因此不推荐使用.

2.如果有什么方法能够监听到页面的刷新事件，然后在那个监听方法里将Vuex里的数据储存到localStorage里，那该多好。

很幸运，还真有这样的监听事件，我们可以用 beforeunload 来达到以上目的，在 App.vue 的 created 钩子函数里写下了如下代码：

//在页面加载时读取localStorage里的状态信息
localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
        
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
   localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})

参考博客: https://blog.csdn.net/aliven1/article/details/80743470

3. 路由动画

路由切换显得自然,使用户有更好的体验.

App.vue文件

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>
  export default {
  name: 'App',
    data() {
      return {
        transitionName: 'slide-left'
      }
    },
    watch: {
      '$route'(to, from) {
        if (to.path == '/') {
          this.transitionName = 'slide-right';
        } else {
          this.transitionName = 'slide-left';
        }
      }
    },
  }
</script>

<style>
  /*路由动画的样式*/
  .child-view {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .5s cubic-bezier(.55,0,.1,1);
  }
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(30px, 0);
    transform: translate(30px, 0);
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }
</style>

4.引擎：有四大引擎显得尤为重要： V8 ：不仅提升了 JS 的执行效率，助力 ES 规范落地，而且催生了 Node.js 浏览器引擎：以 Webkit、Blink、Chromium 为典型代表，浏览器的高速发展为 Web 的繁荣奠定了基础 Node.js ：大大拓展了前端的生存空间，以至于“Any application that can be written in JavaScript, will eventually be written in JavaScript.” Hybrid 容器：让被 App 统治的移动互联网时代也给 Web 开发留下了一席之地，小程序是典型代表

小知识:

1.vue2.0返回上一页 @click="$router.back(-1)"

随机文章
Javascript知识点必读
最近更新