基于Vue.js的mpvue小程序前端框架设计源码资源-CSDN文库

共507个文件

js：425个

html：16个

json：13个

版权申诉

Vue.js

小程序开发

mpvue

前端框架

源码

132 浏览量 2024-09-27 06:30:02 上传评论收藏 4.23MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于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 85B

.eslintrc 37B

.flowconfig 783B

.gitignore 404B

index.html 5KB

index.html 4KB

index.html 3KB

index.html 2KB

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 条

<!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>

评论收藏

内容反馈

版权申诉