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>
效果 :
这个位置会根据传过来的数不一样而移动,这里主要是父传子的实际应用吧~
vue的基本用法的更多相关文章
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
- checkbox在vue中的用法总结
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
- Vue slot 插槽用法:自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
- Vue SSR: 基本用法 (二)
上一篇讲解了ssr的原理,这篇主要讲基本用法: 1.安装 npm install vue vue-server-renderer --save 我们将在整个指南中使用 NPM,但你也可以使用 Yarn ...
- cdn模式下vue的基本用法
我们知道jq是简化了dom操作,而react和vue则是通过使用虚拟dom的方式,不需要频繁的更改ui界面,而是通过更改数据的方式来更新界面. 我们知道些jq插件时会在IFFE中传入jQuery,jQ ...
- vue watch详细用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法 html: <input type="text" v-model ...
- vue路由高级用法
五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',r ...
- vue 事件基本用法
事件基本用法 事件的函数都定义在VUE实例中的methods中,当然也可以直接写在元素内,但是这并不利于后期的维护,需要注意的是:在methods定义的函数内想要引用插值内容,需要使用this,不然就 ...
随机推荐
- 同步IO,异步IO,阻塞,非阻塞的定义与区别
异步I/O 是指用户程序发起IO请求后,不等待数据,同时操作系统内核负责I/O操作把数据从内核拷贝到用户程序的缓冲区后通知应用程序.数据拷贝是由操作系统内核完成,用户程序从一开始就没有等待数据,发起请 ...
- 安装jQuery
description jQuery,顾名思义,也就是JavaScript和Query(查询),即辅助JavaScript开发的库.jQuery是一个快速.简洁的JavaScript框架,是继Prot ...
- Vue-filter指令全局过滤和稀有过滤
简单介绍一下过滤器,顾名思义,过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具.例如,从['abc','abd','ad ...
- Android应用查看本地数据库
使用Android Studio 视图==>工具窗口 == >Device File Explorer ==> 文件在 data/data目录下,你的应用程序报名,右键save as ...
- centos6.x下让redis以服务方式运行
1.从官网下载redis-2.8.9.tar.gz之后,将redis解压在/usr/local下,目录是redis-2.8.9,然后按照官网给出的办法安装redis即可. 2.安装完在redis-2. ...
- spark 机器学习 knn原理(一)
1.knnK最近邻(k-Nearest Neighbor,KNN)分类算法,在给定一个已经做好分类的数据集之后,k近邻可以学习其中的分类信息,并可以自动地给未来没有分类的数据分好类.我们可以把用户分 ...
- Makefile中 的 phony target,empty target
phony target Makefile的语法很简单 <target> : <prerequisites> [tab] <commands> 目标.先决条件.命令 ...
- Android NDK 同时编译多个模块
|-test |---Android.mk |---Application.mk |---sub1 |------Android.mk |------main.c |---sub2 |------An ...
- 用js刷剑指offer(二叉搜索树的后序遍历序列)
题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 牛客网链接 js代码 function Verif ...
- Redis 从入门到放弃
Redis 从入门到放弃 http://www.iocoder.cn/Fight/Redis-went-from-getting-started-to-quitting/