vuejs
/
vue
зеркало из https://github.com/vuejs/vue.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!DOCTYPE html>
<html lang="en">
<head>
  <title>vue.js version</title>
    <script src="https://cdn.jsdelivr.net/stats.js/r11/stats.min.js"></script>
    <script src="../../dist/vue.js"></script>
  <style>
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
svg {
  width: 800px;
  height: 600px;
}
  </style>
</head>
<body>
 <div id="app">
 <svg>
    <circle  v-for='point in points' :cx='point.x' :cy='point.y' r='2px' fill='#FC309D'></circle>
 </svg>
</div>
<script type="text/javascript" charset="utf-8">
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms, 2: mb

// align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

document.body.appendChild( stats.domElement );

var WIDTH = 800
var HEIGHT = 600
var model = createModel(1000);

new Vue({
  el: '#app',
  data: model,
  created: function () {
    var self = this
    self.raf = window.requestAnimationFrame(render)
    stats.begin()
    function render () {
      stats.end()
      stats.begin()
      self.raf = window.requestAnimationFrame(render)
      self.step()
    }
  }
});

function createModel (count) {
  var points = []
  for (var i = 0; i < count; ++i) {
    points.push({
      x: Math.random() * WIDTH,
      y: Math.random() * HEIGHT,
      vx: Math.random() * 4 - 2,
      vy: Math.random() * 4 - 2
    })
  }

  return {
    points: points,
    step: step
  }

  function step () {
    points.forEach(move)
    // move(points[0])
  }

  function move (p) {
    if (p.x > WIDTH || p.x < 0) p.vx *= -1
    if (p.y > HEIGHT || p.y < 0) p.vy *= -1
    p.y += p.vy
    p.x += p.vx
  }
}
</script>
</body>
</html>