h2 vue.js 2.x 入門
p
  a href="https://qiita.com/sekiyaeiji/items/f1df5d9d4c8a147eed77" target="_blank"   https://qiita.com/sekiyaeiji/items/f1df5d9d4c8a147eed77

hr

h3 #01 Vue -> HTML:VueからHTMLに文字列を出力
.js-component01
  p mustache構文の出力を表示： {{ text }}
  p 
    | v-textの出力を表示:
    span v-text="text"
    
.js-component02
  p
    input v-model="text" type="text"
  p
    | v-textの出力を表示: {{ text }}
h3 test case 3
.js-component03
  p
    input v-model="input" type="text"
  p v-on:click="output"
    | 入力文字列を反映
  p v-textの出力を表示: {{ text }}


h3 test case 4
.js-component04
  p.mb10
    input v-model="input" type="text"
  p.button.mb10 v-on:click="output"
    | 入力文字列を反映
  div ここにHTMLコードを表示します {{ html }}
  div
    | ここにHTML出力を表示します：
    span v-html="html"
  

h3 test case 5
.js-component05
  p
    input v-model="number" type="number"
  p ここに2倍の数字を表示します。 {{ number * 2 }}
  
  
h3 test case 6
.js-component06
  p
    input v-model="text" type="text"
  p ここに入力文字列の大文字を表示します。 {{ text | toUpperCase }}


h3 #07 computedを活用して入出力する
.js-component07
  p
    input v-model="number" type="number"
  p
    | ここに3倍の数字を表示します： {{ calc3Times }}
    
h3 #08 computedを活用して入出力する
.js-component08
  p
    input v-model="origin" type="number"
  p
    input v-model="withTax" type="number"
    
h3 #09 v-bind:classを利用してclassを切り替え
.js-component09
  p v-on:click="toggleClass"
    | classを切り替え
  p
    | ターゲット
    span v-bind:class="{ 'isShow': isShow , 'isHide': isHide }"
      | 表示非表示が切り替わります
      
      
h3 #10 v-if、v-elseを利用する
.js-component10
  p
    input#cb001 v-model="isChecked" type="checkbox"
      label for="cb001"
        | 税込み
  p v-if="isChecked" 税込み(例：1,080円)
  p v-else="" 税抜き(例：1,000円)
  
        
h3 #11 v-forを利用する
.js-component11
  ul
    li v-for="(item, index) in data"
      | {{ index + 1 }} - {{ item }}
      
h3 #12 component定義
template id="js-template-component12"
  ul
    li v-for="(item,index) in data.split(',')"
      | {{ index + 1 }} - {{ item }}
  p
    | {{ text }}
.js-component12
  component12 data="hoge, huga, piyo, puyo"

/* 09 */
.isShow {display: inline;}
.isHide {display: none;}

new Vue({
  el: '.js-component01',
  data: {
    text: 'テキストテキストテキスト'
  }
});
new Vue({
  el: '.js-component02',
  data: {
    text: ''
  }
});
new Vue({
  el: '.js-component03',
  data: {
    input: '',
    text: ''
  },
  methods: {
    output: function () {
      this.text = this.input;
    }
  }
});


new Vue({
  el: '.js-component04',
  data: {
    input: '',
    html: ''
  },
  methods: {
    output: function () {
      this.html = '<span style="color: #fc0;">' + this.input + '</span>';
    }
  }
});

new Vue({
  el: '.js-component05',
  data: {
    number: ''
  }
});


new Vue({
  el: '.js-component06',
  data: {
    text: ''
  },
  filters: {
    toUpperCase: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.toUpperCase()
    }
  }
});


// 07
new Vue({
  el: '.js-component07',
  data: {
    number: '0'
  },
  computed: {
    calc3Times: function () {
      return this.number * 3;
    }
  }
});


// 08
new Vue({
  el: '.js-component08',
  data: {
    origin: '100'
  },
  computed: {
    withTax: {
      get: function () {
        return parseInt(this.origin * 1.08)
      },
      set: function (value) {
        this.origin = Math.ceil(value / 1.08);
      }
    }
  }
});

// 09
new Vue({
  el: '.js-component09',
  data: {
    isShow: true,
    isHide: false
  },
  methods: {
    toggleClass: function () {
      this.isShow = !this.isShow;
      this.isHide = !this.isHide;
    }
  }
});


new Vue({
  el: '.js-component10',
  data: {
    isChecked: true
  },
  created: function () {
    this.flag = true;
  }
});

new Vue({
  el: '.js-component11',
  data: {
    data: [
      'hoge',
      'huga',
      'piyo',
      'punyo'
    ]
  },
  created: function () {
    this.flag = true;
  }
});


Vue.component ('component12', {
  props: ['data'],
  template: '#js-template-component12'
});

new Vue({
  el: '.js-component12',
  data: {
    data: []
  }
});