vue.jsの基礎構文まとめメモ

f:id:nana205:20190614011239p:plain

Vue.jsについて学ぼうと思ったきっかけ

最近のモダンな技術を学びたかったから
Jqueryと同じで導入学習コストが低いから
日本語ドキュメントが豊富だから

　　などの理由です。

テンプレート

ここではCDN（コンテンツデリバリーネットワーク）を使います。

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

HTMLファイル
<!DOCTYPE html>
<html lang="ja" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
  <title></title>
</head>

<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</body>

</html>

Main.js

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

Mustache構文

<h1>{{変数名}}</h1>

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

繰り返しのv-for

HTMLファイル
<ol>
  <li v-for="item in list">{{ item }}</li>
</ol>

javascriptファイル

var app = new Vue({
  el: '#app',
  data: {
    list: ['りんご', 'ばなな', 'いちご']
  }
})

イベント v-on:click

HTMLファイル
<button v-on:click="handleClick">Click</button>

javascriptファイル
var app = new Vue({
  el: '#app',
  methods: {
    handleClick: function (event) {
      alert(event.target)  [object HTMLButtonElement]
    }
  }
})

v-model

HTMLファイル
<input v-model="message">
<p>{{ message }}</p>

javascriptファイル
var app = new Vue({
  el: '#app',
  data: {
    message: '初期メッセージ'
  }
})

条件分岐 v-if

HTMLファイル
<button v-on:click="show=!show">切り替え</button>
<p v-if="show">Hello Vue.js!</p>

javascriptファイル
var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})

vue.jsのライフサイクルフックのまとめ

メソッド	タイミング
beforeCreate	インスタンスが作成され、リアクティブの初期化がされる前
created	インスタンスが作され、リアクティブの初期化された後
mounted	データが変更され、DOMに適用される前
updated	データが変更され、DOMに適用された後
beforeDestroy	Vueインスタンスが破棄される前
destroyed	Vueインスタンスが破棄された後
errorCaptured	任意の子孫コンポーネントからエラーが捕捉された時