vue的基本用法

公共样式---pc版的404报错

动态src
这个是vue组件template部分

 <div class="not-found">
        <img :src="img" alt="404">
    </div>
     <div>{{fish}}</div>

script部分

import './404.css'   //先引入less
import img from './error-404.png'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '你还没有登录,请先登录',
      img, //es6用法   等同于  img:img
      fish:'你好'
    }
  }
}

引入的404.css部分

.not-found {
    margin: 10% 0 0;
    text-align: center;
}

下面是现象

公共样式loading pc端，根据传过来的参数，来显示loading
style用法
父组件:

<template>
     <!-- 显示loading -->
     <Load :option="test"></Load>
  </div>
</template>
<script>
import load from './loading'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '你还没有登录,请先登录',
      test:{
        show:true,
        progress:60
      }
    }
  },
  components:{
    Load:load
  }
}
</script>

子组件

<template>
  <div class="hello">
     哈哈哈
     <!-- 显示loading -->
    <div class="loadingbar-wrapper" v-show="option.show">
        <div id="loadingbar" class="waiting" :style="{ width: option.progress+'%'}">
            <dt></dt><dd></dd>
        </div>
    </div>

  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props:['option'],
  data () {
    return {
      msg: '你还没有登录,请先登录'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
@import "../assets/var.less";
@loading-bar-color: @color-white;
#loadingbar {
  position: fixed;
  z-index: 2147483647;
  top: 100px;
  left: -6px;
  width: 1%;
  height: 2px;
  background: @loading-bar-color;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

#loadingbar.left {
  left: 100%;
  right: 0px;
  width: 100%;
}

#loadingbar.up {
  left: 0px;
  top: 100%;
  width: 5px;
  bottom: 0px;
  height: 100%;
}

#loadingbar.down {
  left: 0;
  width: 5px;
  height: 0;
}

#loadingbar.waiting dd, #loadingbar.waiting dt {
  -moz-animation: pulse 2s ease-out 0s infinite;
  -ms-animation: pulse 2s ease-out 0s infinite;
  -o-animation: pulse 2s ease-out 0s infinite;
  -webkit-animation: pulse 2s ease-out 0s infinite;
  animation: pulse 2s ease-out 0s infinite;
}

#loadingbar dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}

#loadingbar dd {
  opacity: .6;
  width: 20px;
  right: 0;
  clip: rect(-6px,22px,14px,10px);
}

#loadingbar dd, #loadingbar dt {
  position: absolute;
  top: 0;
  height: 2px;
  -moz-box-shadow: rgb(255, 156, 50) 1px 0 6px 1px;
  -ms-box-shadow: rgb(255, 156, 50) 1px 0 6px 1px;
  -webkit-box-shadow: rgb(255, 156, 50) 1px 0 6px 1px;
  box-shadow: rgb(255, 156, 50) 1px 0 6px 1px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#loadingbar.left dt {
opacity: .6;
width: 180px;
left: -4px;
clip: rect(-6px,185px,14px,25px);
}

#loadingbar.left dd {
  opacity: .6;
  width: 20px;
  left: 0;
  margin: 0;
  clip: rect(-6px,22px,14px,0px);
}

#loadingbar.left dd, #loadingbar.left dt {
  top: 0;
  height: 2px;
}

#loadingbar.down dt {
  opacity: .6;
  height: 180px;
  top: auto;
  bottom: -47px;
  clip: rect(-6px,20px,130px,-6px);
}

#loadingbar.down dd {
  opacity: .6;
  height: 20px;
  top: auto;
  bottom: 0;
  clip: rect(-6px,22px,20px,10px);
  margin: 0;
}

#loadingbar.down dd, #loadingbar.down dt {
  left: -5px;
  right: auto;
  width: 10px;
}

#loadingbar.up dt {
  opacity: .6;
  height: 180px;
  bottom: auto;
  top: -10px;
  clip: rect(13px,20px,190px,-6px);
}

#loadingbar.up dd {
  opacity: .6;
  height: 20px;
  bottom: auto;
  top: 0;
  clip: rect(-6px,22px,25px,10px);
  margin: 0;
}

#loadingbar.up dd, #loadingbar.up dt {
  left: -5px;
  right: auto;
  width: 10px;
}

@keyframes pulse {
  30% { opacity:0.6; }
  60% { opacity:0; }
  100% { opacity:0.6; }
}

@-moz-keyframes pulse
{
  30% { opacity:0.6; }
  60% { opacity:0; }
  100% { opacity:0.6; }
}

@-ms-keyframes pulse
{
  30% { opacity:0.6; }
  60% { opacity:0; }
  100% { opacity:0.6; }
}

@-webkit-keyframes pulse
{
  30% { opacity:0.6; }
  60% { opacity:0; }
  100% { opacity:0.6; }
}

.loadingbar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}

.loadingbar-wrapper::after {
  position: absolute;
  right: 5px;
  top: 10px;
  z-index: 1001;
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  border: 2px solid @loading-bar-color;
  border-bottom-color: transparent;
  -webkit-animation: rotate 0.75s 0s linear infinite;
          animation: rotate 0.75s 0s linear infinite;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg) }
}
</style>

效果 :

这个位置会根据传过来的数不一样而移动，这里主要是父传子的实际应用吧~

原文地址：https://www.cnblogs.com/antyhouse/p/9412199.html