【Vue.js基礎文法１】まとめました

こんにちは！

Vue.jsの基本的な文法についてまとめてみました。

jp.vuejs.org

Vueをやったことない人や復習する人、これから取り組もうとしている人がいらっしゃったら是非みてみてください。

参考↓

js-pro.jp

内容としては、以下になります。

1. cdn読み込み

2. マスタッシュ構文で表示

3. v-bindで表示

4. v-ifで条件分岐

5. v-forで繰り返し表示

6. v-onでイベントを実行

7. v-modelで値の書き換え（双方向バインディング）

8. コンポーネント

9. 算出プロパティ

10. 監視プロパティ

Vue.js

<!-- 1. cdn読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 2. マスタッシュ構文で表示 -->
<div id="app">
    {{ message }}
</div>

<!-- 3. v-bindで表示 -->
<div id="app">
  <input v-bind: value="message">　<!-- v-bind:value -> :value (省略表記) -->
</div>

<!-- 4. v-ifで条件分岐 -->
<div id="app">
  <h1 v-if="flag">Vue is Good!</h1> <!-- こっちが表示される -->
  <h1 v-else>Vue is Bad!</h1>
</div>

<!-- 5. v-forで繰り返し表示 -->
<div id="app">
  <li v-for="item in list">{{ item }}</li>
</div>

<!-- 6. v-onでイベントを実行 -->
<div id="app">
  <span>{{ count }}</span>
  <button v-on:click="increment">+</button><!-- v-on:click -> @click (省略表記) -->
</div>

<!-- 7. v-modelで値の書き換え（双方向バインディング） -->
<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<!-- 8. コンポーネント -->
<div id="app">
    <my-component :message="'hoge'"></my-component>
    <my-component :message="'fuga'"></my-component>
    <my-component :message="'hogefuga'"></my-component>
</div>

<!-- 9. 算出プロパティ -->
<div id="app">
  <li>{{ message }}</li>
  <li>{{ message2 }}</li>
  <li>{{ fullmessage }}</li>
</div>

<!-- 10. 監視プロパティ -->
<div id="app">
  <input v-model="message"><br>
  <input v-model="message2"><br>
  <span>{{ fullmessage }}</span>
</div>

scriptの部分は以下

<script>
<!-- 8 -->
Vue.component('my-component', {
    props:['message'],
    template: '<li>{{message}}</li>'
})

new Vue({
  el: '#app',
  data:{
    message:'Hello World!', <!-- 2, 3, 7 -->
    message2: ' vue.js',
    flag: true, <!-- 4 -->
    list: ['Vue', 'React', 'Angular'], <!-- 5 -->
    count: 0 <!-- 6 -->
  },
  <!-- 6 -->
  methods: {
    increment: function(){
    this.count++
    }
  },
  <!-- 9 -->
  computed: {
    fullmessage: function() {
      return `${this.message} ${this.message2}`
    }
  },
  <!-- 10 -->
  watch: {
    message: function(val) {
    this.fullmessage= `${val} ${this.message}`
  },
    message2: function(val) {
    this.fullmessage = `${this.message2} ${val}`
    }
  }
})
</script>

以上です！