Vue.js 基本的なディレクティブ v-bind編

はじめに

Vue .jsを学習し始めたのでアウトプットしていきます

ディレクティブとは

v-on で始まる特別な属性のこと　
Vue.jsになんらかなの指示を行う仕組み

マスタッシュ構文とは

{{ 変数名 }} とすることで、Vueに定義したdataの変数をコンポーネントやテンプレートに埋め込むことができる。

v-bind

マスタッシュ構文はtextコンテンツのための記法、属性には使用できない
属性へのデータバインディングにはv-bindディレクティブを使用

<input type="text" value="{{プロパティ名}}"/>　←❌
<input type="text" v-bind:value="プロパティ名"/>　← ⭕️

例

index.html

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

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

上記のように記述すると
![スクリーンショット 2021-09-17 17.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268606/e732acbc-af9d-14a4-055e-7936d137d81e.png)
と表示される。
v-bindはこんな感じで使ってください！