WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

Vue.js コンポーネント

Vue.jsはJavaScriptフレームワーク

jp.vuejs.org

こちらの記事を参考にしました。
app.codegrid.net

デモ
http://efu.sakura.ne.jp/web/vue/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
  <div id="app"></div>
  <div id="app2"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
  <script src="script.js"></script>
</body>
</html>

//子コンポーネントクラス
var circleIcon = Vue.extend({
  //属性を受け渡す
  props: {
    size: {
      type: Number,//型のチェック
      default: 20//既定値
    }
  },
  template:
    '<svg :width="size" :height="size" viewBox="0 0 16 16">' +
    '<path fill="#FBC02D" d="M16 6.2l-5.3-1.12-2.7-4.69v13.01l4.94 2.21-.57-5.39 3.63-4.02zm0 0"/>' +
    '<path fill="#FDD835" d="M5.3 5.09l-5.3 1.11 3.63 4.02-.57 5.39 4.94-2.21v-13.01l-2.7 4.7zm0 0"/>' +
    '</svg>'
});

var AbsoluteNumber = Vue.extend({
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  template:
    '<p>{{ Math.abs( value ) }}</p>'//絶対値に変換されて表示
});

//ルートコンポーネント
var componentRoot = new Vue({
  template:
    '<p>' +
    '<circleIcon :size="40"></circleIcon>' +
    '<circleIcon></circleIcon>'+
    'Hello!' +
    '<circleIcon></circleIcon>'+
    '<circleIcon :size="40"></circleIcon>' +
    '</p>',
  //NG 要素が2つ
  // template: '<p>Hello!</p><p>Vue.js!</p>',
  //NG HTML要素がない
  // template: 'Hello!',
  //OK 1つの中に複数の要素が入っている
  // template: '<div><p>Hello!</p><p>Vue.js!</p></div>',
  //OK 空の要素
  // template: '<div></div>',

  components: {
    circleIcon: circleIcon
  }
});

var componentRoot2 = new Vue({
  template:
    '<div>' +
    '<absolute-number :value="100"></absolute-number>' +
    '<absolute-number :value="-50"></absolute-number>' +
    '</div>',
    components: {
      AbsoluteNumber: AbsoluteNumber
    }
})

// 要素にマウントする
componentRoot.$mount('#app');
componentRoot2.$mount('#app2');


参考サイト
lab.aratana.jp

広告を非表示にする