mirror of https://github.com/vuejs/vue.git
48 lines
1.4 KiB
HTML
48 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Vue.js SVG example</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="../../dist/vue.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- template for the polygraph component. -->
|
|
<script type="text/x-template" id="polygraph-template">
|
|
<polygon v-attr="points:points"></polygon>
|
|
<circle cx="100" cy="100" r="80"></circle>
|
|
<text v-repeat="stats" v-component="axis-label"></text>
|
|
</script>
|
|
|
|
<!-- template for the axis label component. -->
|
|
<script type="text/x-template" id="axis-label-template">
|
|
<text v-attr="x:point.x, y:point.y">{{label}}</text>
|
|
</script>
|
|
|
|
<!-- demo root element -->
|
|
<div id="demo">
|
|
<!-- Use the component -->
|
|
<svg width="200" height="200">
|
|
<g v-component="polygraph" v-with="stats:stats"></g>
|
|
</svg>
|
|
<!-- controls -->
|
|
<div v-repeat="stats">
|
|
<label>{{label}}</label>
|
|
<input type="range" v-model="value" min="0" max="100">
|
|
<span>{{value}}</span>
|
|
<button v-on="click:remove(this)">X</button>
|
|
</div>
|
|
<form id="add">
|
|
<input name="newlabel" v-model="newLabel">
|
|
<button v-on="click:add">Add a Stat</button>
|
|
</form>
|
|
<pre id="raw">{{stats | json}}</pre>
|
|
</div>
|
|
|
|
<p style="font-size:12px">* input[type="range"] requires IE10 or above.</p>
|
|
|
|
<script src="svg.js"></script>
|
|
|
|
</body>
|
|
</html> |