Vue.js文法チートシート

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[Vue.jsチートシート | コレワカ](https://korenarawakaru.com/tech/vue/cheatsheet)

## Vue.jsとは
Vue.jsはUI構築のためのJavaScriptプログレッシブフレームワークのこと
[Vue.js公式サイト](https://jp.vuejs.org/)

### 基本的な書き方

```html:HTML
<div id="app">
  <!-- Vue.js適用範囲 -->
</div>
```
```vue:Vue
var vm = new Vue({
  el: '#app'
});
```

## オプション

### el
Vue.jsの機能を適用するDOMの指定
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="KKdGgmx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_el">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/KKdGgmx">
  Vue.js_el</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### data
データを保持する(データの変数化)。{{ 変数名 }}で出力可能
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="YzyJGrp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_data">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/YzyJGrp">
  Vue.js_data</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### methods
v-onのイベントハンドラとして使用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="ExVdgbx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_ methods">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/ExVdgbx">
  Vue.js_ methods</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### computed
算出プロパティ。データの自動更新をし、計算結果はキャッシュに保存。getでは必ず戻り値が必要
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="bGVmwvK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_ computed">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVmwvK">
  Vue.js_ computed</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### watch
監視プロパティ。特定のプロパティの値の変更を監視し、変更時に設定した関数を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="LYpgRmZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_watch">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/LYpgRmZ">
  Vue.js_watch</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### template
文字列,HTMLコードをテンプレート化する。コンポーネント機能と共に使用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="OJyBRZQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_template">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/OJyBRZQ">
  Vue.js_template</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### props
コンポーネント機能でデータを参照する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="PoPyGaE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_props">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/PoPyGaE">
  Vue.js_props</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### created
インスタンスが作成された後(DOMは生成されていない)に実行するオプション
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="MWaPjXR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_created">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/MWaPjXR">
  Vue.js_created</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### mounted
DOMが生成された後に実行するオプション
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="bGVmwjj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_mounted">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVmwjj">
  Vue.js_mounted</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## ディレクティブ

### v-text
テキストデータを出力
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="XWmxjPW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-text">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/XWmxjPW">
  Vue.js_v-text</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### v-html
HTMLデータを出力
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="PoPyGdQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-html">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/PoPyGdQ">
  Vue.js_v-html</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### v-show
条件分岐(createdフックは最初のみ実行)
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="jObeMvX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-show">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/jObeMvX">
  Vue.js_v-show</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### v-if, v-if-else, v-else
条件分岐
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="oNjazaY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-if">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/oNjazaY">
  Vue.js_v-if</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### v-for
ループする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="mdezrzB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-for">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/mdezrzB">
  Vue.js_v-for</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### v-on, @
イベントを処理する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="pojxExY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-on">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/pojxExY">
  Vue.js_v-on</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### v-bind, :
HTMLの属性を指定する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="bGVmwOx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-bind">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVmwOx">
  Vue.js_v-bind</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### v-model
入力データと指定したデータをリンクする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="MWaPjZM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-model">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/MWaPjZM">
  Vue.js_v-model</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### v-pre
{{}}をそのまま表示する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="eYpPdxO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-pre">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/eYpPdxO">
  Vue.js_v-pre</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### v-cloak
{{}}が表示されるのを防ぐ(最初に表示される事がある)
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="qBOJaga" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-cloak">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/qBOJaga">
  Vue.js_v-cloak</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### v-once
レンダリングを一度だけ実行(データの変更を適用しない)
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="PoPyGVR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-once">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/PoPyGVR">
  Vue.js_v-once</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## グローバル設定

### silent
警告,エラーメッセージの表示,非表示を指定する

```vue:Vue
Vue.config.silent = true;
```

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[Vue.jsチートシート | コレワカ](https://korenarawakaru.com/tech/vue/cheatsheet)