Vue3の基本操作

Vue3を学んだ際の備忘録として残しておきます。
インストールはnpmでもCDNでも構いません。
お好みの環境構築で適宜進めてください。

インストール(CDN)

<script src="https://unpkg.com/vue@next"></script>

v-on:click

一番使うであろうクリックイベント。
マスタッシュ構文を使うのがVueの特徴ですよね~
慣れてしまえばReactよりは書きやすいかと

<div id="app">
      <p>
        {{ counter }}
      </p>
 <button v-on:click="counter++">Click! 1</button>//インラインで書く場合
      <button v-on:click="clickHandler">Click! 2</button>//分けて書く場合
</div>

const app = Vue.createApp({
  data: () => ({
    counter: 1//初期値
  }),
	methods: {
	    clickHandler: function () {
	      this.counter++;//インクリメント
	    }
	  }
});
app.mount("#app");

イベントハンドラーに渡す方法

<button v-on:click="clickHandler('test')">Click! 2</button>
<p>{{message}}</p>//testが出力される。

~~~~
clickHandler: function (message) {
      this.message = message;
}

v-for

itemsに格納されている配列を分割してitemに格納します。
JavaScriptのforEach文を書き慣れていると理解しやすいかと。

<li v-for="item in items">
  {{item.title}}
</li>

v-bind

アンカータグのhrefにもVue構文を書きたいのであればv-bindを使ってあげます。

<li v-for="item in items">
    <a v-bind:href="item.url">
        {{item.title}}
    </a>
</li>

V-bind:class

classをバインディングしたいときはv-bind:classを使う。

<span v-bind:class="{ large: isLarge }">Vue.js!</span>

//省略記法
<span :class="{ large: isLarge }">Vue.js!</span>

const app = Vue.createApp({
  data: () => ({
    isLarge: true
  })
});
app.mount("#app");


//複数のクラスをバインディングする際はカンマ区切りで記述する。ハイフンなどがある場合はシングルクォートで囲む
<span v-bind:class="{ large: isLarge,'text-danger':hasError }">Vue.js!</span>

v-mdoel

ReactでいうonChange
インプット内で入力された文字がバインディングされます。
ToDoAppなど作るときには必ずと言っても使う機能です。

<input type="text" v-model="newItem" />

//
data: () => ({
  newItem: ""
}),
//

v-show

表示切り替えができる。

<p v-show="toggle">
      Hello Vue.js!
</p>


const app = Vue.createApp({
  data: () => ({
    toggle: false
  })
})
app.mount('#app')

基本的な記述はまだまだたくさんあるので、公式ドキュメントを見ながらcodepenなどでコーディングしてみてください！
（随時追記していく予定です！）