Vue.jsを試す（２） style.cssの内容を取得し、コメントのみ表示

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="app">
      <span>
        {{ style }}
      </span>
    </div>
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="vue.js@*" data-semver="10.0.26" src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
    <script data-require="axios@*" data-semver="0.018.0" src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

(function(global, $) {
  console.log('url: '+location.href)
  
  var app = new Vue({
    el: '#app',
    data: {
      style: 'It\'s default text',
      message: 'You loaded this page on ' + new Date().toLocaleString(),
      seen: false
    },
    methods: {
      set: function(data) {
        Vue.set(app, 'style', data);
      }
    }
  });

  // $(function() {
  axios.get('./style.css')
  .then(function (response) {
    var data = response.data.match(/\/\*docs[\s\S]*?\*\//gm);
    data.forEach(function(v,i,a) {
      a[i] = a[i].replace(/\/\*docs[\s\S]/, '');
      a[i] = a[i].replace(/[\s\S]\*\//, '');
    });
    app.set(data);
  })
  .catch(function (error) {
    console.log(error);
  });
})(window, jQuery);

/*docs
コメントコメントコメント

```html
<span>赤</span>
```
*/
span {
  color: #f66;
}

/*docs
コメントコメントコメント

```html
<span class="test">.test</span>
```
*/
.test {
  color: #0ff;
}