<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue benchmark</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0 10px;
font-family: sans-serif;
}
#fps {
position: fixed;
top: 0px;
right: 0px;
padding: 32px;
font-size: 32px;
text-align: right;
}
* {
box-sizing: border-box;
}
.server-uptime {
display: block;
overflow: hidden;
margin: 0 auto;
width: 50%;
}
.server-uptime + .server-uptime {
margin: 20px auto 0 auto;
border-top: 1px solid #999;
}
.days {
display: flex;
flex-direction: row;
flex-flow: wrap;
}
.uptime-day {
display: flex;
}
span.uptime-day-status {
width: 10px;
height: 10px;
margin: 1px;
}
.hover {
display: none;
}
.uptime-day-status:hover + .hover {
display: flex;
position: absolute;
margin-top: -35px;
margin-left: -30px;
border-radius: 4px;
color: #eee;
background-color: #333;
padding: 10px;
font-size: 11px;
}
</style>
</head>
<body>
<p>Reference: <a href="https://github.com/tildeio/glimmer/blob/master/packages/glimmer-demos/lib/uptime.ts">Ember Glimmer 2 demo</a></p>
<div id="app">
<p>FPS: {{ fps }}</p>
<button @click="toggle">{{ playing ? 'pause' : 'play' }}</button>
<server-uptime
v-for="server in servers"
:key="server.name"
:name="server.name"
:days="server.days">
</server-uptime>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
// functional components are prefect for small, presentational components
// and they are much more efficient than stateful ones.
Vue.component('uptime-day', {
props: ['day'],
functional: true,
render (h, ctx) {
var day = ctx.props.day
return h('div', { staticClass: 'uptime-day'}, [
h('span', { staticClass: 'uptime-day-status', style: { backgroundColor: day.up ? '#8cc665' : '#ccc' } }),
h('span', { staticClass: 'hover' }, [day.number + ': ' + day.up ? 'Servers operational!' : 'Red alert!'])
])
}
})
Vue.component('server-uptime', {
props: ['name', 'days'],
computed: {
upDays () {
return this.days.reduce(function (upDays, day) {
return upDays += (day.up ? 1 : 0)
}, 0)
},
maxStreak () {
var streak = this.days.reduce(([max, streak], day) => {
if (day.up && streak + 1 > max) {
return [streak + 1, streak + 1]
} else if (day.up) {
return [max, streak + 1]
} else {
return [max, 0]
}
}, [0, 0])
return streak.max
}
},
template: `
<div class="server-uptime">
<h1>{{name}}</h1>
<h2>{{upDays}} Days Up</h2>
<h2>Biggest Streak: {{maxStreak}}</h2>
<div class="days">
<uptime-day
v-for="day in days"
:key="day.number"
:day="day">
</uptime-day>
</div>
</div>
`
})
function generateServer (name) {
var days = []
for (var i=0; i<=364; i++) {
var up = Math.random() > 0.2
days.push({ number: i, up })
}
return { name, days }
}
function generateServers () {
return [
generateServer("Stefan's Server"),
generateServer("Godfrey's Server"),
generateServer("Yehuda's Server")
]
}
var s = window.performance.now()
var app = new Vue({
el: '#app',
data: {
fps: 0,
playing: false,
servers: Object.freeze(generateServers())
},
methods: {
toggle () {
this.playing = !this.playing
if (this.playing) {
update()
} else {
clearTimeout(timeoutId)
}
}
}
})
console.log('initial render: ' + (window.performance.now() - s) + 'ms')
var fpsMeter = {
alpha: 2/121,
lastValue: null,
push (dataPoint) {
if (this.lastValue) {
return this.lastValue = this.lastValue + this.alpha * (dataPoint - this.lastValue)
} else {
return this.lastValue = dataPoint
}
}
}
var timeoutId
var lastFrame = null
function update () {
var thisFrame = window.performance.now()
if (lastFrame) {
app.fps = Math.round(fpsMeter.push(1000 / (thisFrame - lastFrame)))
}
app.servers = Object.freeze(generateServers())
timeoutId = setTimeout(update, 0) // not using rAF because that limits us to 60fps!
lastFrame = thisFrame
}
</script>
</body>
</html>
基于Vue.js的mpvue小程序前端框架设计源码 （507个子文件） 
.babelrc 160B commit-msg 477B style.css 9KB styles.css 2KB style.css 1KB style.css 902B style.css 846B style.css 564B style.css 431B style.css 403B demo.css 187B test.css 0B .editorconfig 244B .eslintignore 19B .eslintrc 429B .eslintrc 218B .eslintrc 184B .eslintrc 117B .eslintrc 117B .eslintrc 85B .eslintrc 37B .flowconfig 783B .gitignore 404B
index.html 5KB index.html 5KB index.html 4KB index.html 3KB index.html 3KB index.html 2KB index.html 2KB index.html 2KB index.html 2KB index.html 2KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 975B basic.js 261KB vue.common.js 261KB vue.esm.js 261KB vue.js 259KB build.js 203KB vue.runtime.common.js 189KB vue.runtime.esm.js 189KB vue.runtime.js 188KB factory.js 166KB build.js 161KB index.js 150KB build.js 114KB build.js 93KB vue.min.js 80KB vue.runtime.min.js 57KB transition.spec.js 40KB component-keep-alive.spec.js 26KB index.spec.js 26KB ssr-string.spec.js 23KB patch.js 22KB parser.spec.js 22KB framework.spec.js 20KB on.spec.js 19KB transition-mode.spec.js 19KB component-slot.spec.js 18KB children.spec.js 17KB codegen.spec.js 17KB index.js 16KB index.js 14KB node.spec.js 14KB model-select.spec.js 14KB index.js 13KB for.spec.js 13KB entry-framework.js 13KB props.spec.js 13KB ssr-template.spec.js 12KB bind.spec.js 11KB style.spec.js 11KB transition-group.spec.js 11KB lifecycle.js 11KB component.spec.js 10KB lifecycle.spec.js 10KB hooks.spec.js 10KB component-scoped-slot.spec.js 10KB observer.spec.js 10KB render.js 10KB inject.spec.js 9KB optimizer.spec.js 9KB hydration.spec.js 9KB state.js 9KB component-async.spec.js 9KB html-parser.js 9KB once.spec.js 9KB events.spec.js 9KB options.js 9KB lifecycle.js 9KB instance.spec.js 9KB model-checkbox.spec.js 8KB if.spec.js 8KB transition.js 8KB ssr-bundle-render.spec.js 8KB共 507 条
- 1
- 2
- 3
- 4
- 5
- 6
资源评论
lly202406
- 粉丝: 2603
- 资源: 5442
最新资源
- C#MVC5+EF6+EasyUI1.5快速开发框架源码带部署文档数据库 SQL2008源码类型 WebForm
- (源码)基于SpringBoot和MyBatis的拼车管理系统.zip
- (源码)基于ArduinoNano和Blynk平台的远程控制系统.zip
- 业余无线电操作证A类 题库
- C#ASP.NET商家联盟会员管理系统源码数据库 SQL2008源码类型 WebForm
- C#.NET社区物业管理系统源码数据库 SQL2008源码类型 WebForm
- 流量查看工具GlassWire-Elite 3.3.678 多国语言安装包
- PHP协同OA网络办公系统源码数据库 MySQL源码类型 WebForm
- 贵州财经大学808数据结构2018-2022年考研真题
- oracle java perl ok
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
