<!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
资源评论
xyq2024
- 粉丝: 2965
- 资源: 5572
最新资源
- PMP备考常见传统敏捷术语表 PMP备考必备 PMP术语
- 大数据实验2和6数据和python源代码.7z
- 全面解析：JavaScript语言核心技术及应用领域教程
- Java-wms基于JAVA的智能仓储管理系统， 包含PDA端和WEB端， 功能涵盖WMS（仓库管理系统）， OMS（订单管理系统）， BMS（财务管理系统）， TMS（运输管理系统)
- MATLAB环境下基于隐马尔可夫模型-高斯混合模型-期望最大化的图像分割算法 算法运行环境为MATLAB R2021b，使用期望最大化（EM）算法进行图像分割，并同时依赖于高斯混合模型（GMM）和马尔
- 00大数据期末复习资料.7z
- 欧姆龙PLC程序欧姆龙案例欧姆龙标准程序 本产品适用于新手或者需要学习欧姆龙脉冲控制的新手 本程序包括有欧姆龙CP1H脉冲程序案例，威纶通触摸屏程序，word讲义 程序涉及方面广，适合新手入门学习
- aLinux(大三嵌入式).7z
- WebSocket协议：高效实现现代Web应用的实时通信解决方案
- 软件工程实验提交要求.zip
- 基于Javamail的邮件收发系统（系统+论文+开题报告+任务书+外文翻译+文献综述+答辩PPT）.zip
- Hive函数应用实例解析：提升数据分析效率
- 软件工程PDF、思维导图、用例图、类图.7z
- 0软件工程期中、期末考.7z
- 通过FTP上传文件到一个或者多个CDN资源
- 宠物的每一帧，请务必和代码放在同一路径下再运行
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
