github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/themes/wind/static/libs/vue-1.0.24/examples/svg/index.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3    <head>
     4      <meta charset="utf-8">
     5      <title>Vue.js SVG example</title>
     6      <link rel="stylesheet" href="style.css">
     7      <script src="../../dist/vue.js"></script>
     8    </head>
     9    <body>
    10  
    11      <!-- template for the polygraph component. -->
    12      <script type="text/x-template" id="polygraph-template">
    13        <g>
    14          <polygon :points="points"></polygon>
    15          <circle cx="100" cy="100" r="80"></circle>
    16          <axis-label
    17            v-for="stat in stats"
    18            :stat="stat"
    19            :index="$index"
    20            :total="stats.length">
    21          </axis-label>
    22        </g>
    23      </script>
    24  
    25      <!-- template for the axis label component. -->
    26      <script type="text/x-template" id="axis-label-template">
    27        <text :x="point.x" :y="point.y">{{stat.label}}</text>
    28      </script>
    29  
    30      <!-- demo root element -->
    31      <div id="demo">
    32        <!-- Use the component -->
    33        <svg width="200" height="200">
    34          <polygraph :stats="stats"></polygraph>
    35        </svg>
    36        <!-- controls -->
    37        <div v-for="stat in stats">
    38          <label>{{stat.label}}</label>
    39          <input type="range" v-model="stat.value" min="0" max="100">
    40          <span>{{stat.value}}</span>
    41          <button @click="remove(stat)">X</button>
    42        </div>
    43        <form id="add">
    44          <input name="newlabel" v-model="newLabel">
    45          <button @click="add">Add a Stat</button>
    46        </form>
    47        <pre id="raw">{{stats | json}}</pre>
    48      </div>
    49        
    50      <p style="font-size:12px">* input[type="range"] requires IE10 or above.</p>
    51  
    52      <script src="svg.js"></script>
    53  
    54    </body>
    55  </html>