More than 3 years have passed since last update.

Vue.jsの基本的な使い方　備忘録

Posted at 2021-01-17

#Vue.jsを使うには
HTMLファイルでVue.jsをCDNを用いて直接読み込む場合、ソースコードは上から下に読み込まれて行くのでbodyタグの一番最後の記述する。

HTML

<body>
  <div id="app"> ⇦　divタグにid=appと指定することでappの部分は任意の文字でOKです。
　　　<!-- 今回の場合このdivタグ内がVue.jsが影響を及ぼす範囲です。-->
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="js/main.js"></script>
</body>

jsファイルで「 var app = new Vue 」と変数化することでコンソールからアクセスすることができる。

var app = new Vue({
  el: '#app',
})

##v-if
真偽値を用いて要素を表示・非表示の切り替えを行う。要素自体を生成/破棄している

HTML

<div id="app">
  <p v-if="toggle"> ⇦　ここでtoggleのfalseをv-ifが受け取り要素を非表示にしています
    Hello
  </p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    toggle: false ⇦　この場合pタグの要素が非表示になる。trueにすると再表示されます。
  }
})

##v-show
CSSのdisplayをnoneにすることで表示している要素を消しているためデベロッパーツールで該当の箇所を箇所を確認すると要素は残っている。

HTML

<div id="app">
  <p v-show="toggle"> ⇦　ここでtoggleのfalseをv-ifが受け取り要素を非表示にしている。
    Hello
  </p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    toggle: false ⇦　この場合pタグの要素（Hello）が非表示になる。trueにすると再表示されます。
  }
})

##v-on
DOM要素にイベントリスナーを登録する

HTML

<div id="app">
  <button v-on:click="onClick"> ⇦　ここでv-on:clickにイベントハンドラのメソッド名を入れて呼ぶ
    クリック
  </button>
  <p>
    {{ now }}　⇦　現在日時がnowに代入されて表示される
  </p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    now: ''
  },
  methods: {
    onClick: function() {
      this.now = new Date().toLocaleString(); ⇦　nowに現在時刻を代入するメソッド
    }
  }
})

##v-for
"color in colors"とすることで、colorsの配列に入っている値を繰り返し処理でcolorに代入している。その後liタグ内でcolorを呼び出すことで

Red
Green
Blue
と表示される。

HTML

<div id="app">
  <ol>
    <li v-for="color in colors">{{ color }}</li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    colors: ['Red', 'Green', 'Blue']
  }
})

##v-model
双方向データバインディングが行えるディレクテブ。
入力フォームに値を入れた場合、リアルタイムでプロパティを変更することができる。

HTML

<div id="app">
  <p>
    <input type="text" v-model="message"> ⇦　双方向データバインディングがしたいプロパティをv-modelに入れる
  </p>
　<!-- 下記のようにすることでmessageオブジェクトの値が変わって行くことを確認できる -->
  <pre>{{ message }}</pre> ⇦　入力フォームで変更を加えた場合messageの値も同じように変更される
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

##v-bind
属性へのデータバインディングを使用する場合は、マスタッシュ構文ではなくv-bindを使用する。
v-bindを下記のようにインプットタグで使う場合、属性の値にはプロパティ名を使用する。
下記のように記述することで入力欄に「Hello Vue.js」と表示される。

HTML

<div id="app">
  <input type="text" v-bind:value="message"/>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js'
  }
})

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Vue.jsの基本的な使い方 備忘録

Vue.jsの基本的な使い方　備忘録