Vue.jsで簡単に色々なHelloWorld!

公開： 2019年5月7日

カテゴリ： JavaScript Vue.js
タグ： JavaScript,Vue

Vue.jsのコアソースは公式より開発版をダウンロードして使用

アジェンダ

ベーシックなHelloWorld
ボタン押下でHelloWorld
フォームから入力してHelloWorld
ボタン押下でHelloWorld（v-showディレクティブ）
ボタン押下でHelloWorld（v-ifディレクティブ）

ベーシックなHelloWorld

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js - Hello world</title>
</head>
<body>

<div id="app">
  {{ message }}
</div>

<script src="./vue.js"></script>
<script>
  new Vue({
      el: '#app',

      data () {
          return {
              message: 'Hello world!'
          }
      }
  })
</script>
</body>
</html>

HTML

id名「app」を持つDIV要素を作成する。
その中に、Mustache構文でmessageをセット

JavaScript

Vue.jsのコアソースを読み込み
elプロパティでid名を指定すると、「Vue.jsで描画する対象を、id名「app」配下とする」という意味になる
データプロパティにmessageを定義

ボタン押下でHelloWorld

<div id="app">
  <p>{{ message }}</p>
  <button @click="display">メッセージを表示する</button>
</div>

<script src="./vue.js"></script>
<script>
  new Vue({
      el: '#app',

      data () {
          return {
              message: ''
          }
      },

      methods: {
          display: function () {
              this.message = 'Hello world!';
          }
      }
  })
</script>

HTML

ボタンにv-onディレクティブでクリックイベントを設定する

JavaScript

methodsプロパティに、ボタン押下イベント発生時に実行するdisplayメソッドを定義

フォームから入力してHelloWorld

<div id="app">
  <p>{{ message | stripTag }}</p>
  <input type="text" v-model="input">
  <button @click="display">メッセージを表示する</button>
</div>

<script src="./vue.js"></script>
<script>
  new Vue({
      el: '#app',

      data () {
          return {
              message: '',
              input: 'Hello world!'
          }
      },

      filters: {
        stripTag: (value) => {
            return value.toString().replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'')
        }
      },

      methods: {
          display: function () {
              this.message = this.input
          }
      }
  })
</script>

HTML

Mustache構文でmessageをセットする際に、パイプでフィルターをセットする事もできる
この例では、フィルターでタグを除去している
入力値を表示させる場合はXSS攻撃の危険があるので非推奨

ボタン押下でHelloWorld（v-showディレクティブ）

<div id="app">
  <p v-show="isShow">Hello world!</p>
  <button @click="display">メッセージを表示する</button>
</div>

<script src="./vue.js"></script>
<script>
  new Vue({
      el: '#app',

      data () {
          return {
              isShow: false
          }
      },

      methods: {
          display: function () {
              this.isShow = true;
          }
      }
  })
</script>

HTML

v-showディレクティブにisShowプロパティを指定する
v-showディレクティブは必ず描画を行い、styleである display:block/none で表示・非表示を制御する

JavaScript

ボタンを押下した際にmethodsプロパティのdisplayが呼ばれ、isShowプロパティをtrueに切り替える

ボタン押下でHelloWorld（v-ifディレクティブ）

<div id="app">
  <p v-if="isShow">Hello world!</p>
  <p v-else>メッセージはありません</p>
  <button @click="toggleMessage">{{ buttonLabel }}</button>
</div>

<script src="./vue.js"></script>
<script>
  new Vue({
      el: '#app',

      data () {
          return {
              isShow: false
          }
      },

      computed: {
          buttonLabel () {
              return this.isShow ? 'メッセージを非表示にする' : 'メッセージを表示する'
          }
      },

      methods: {
          toggleMessage: function () {
              this.isShow = !this.isShow
          }
      }
  })
</script>

HTML

v-ifディレクティブにisShowプロパティを指定する
同時にv-elseディレクティブも設置する
よくあるif-elseと同じ意味を持っていて、この場合、isShowがtrueならv-ifディレクティブが描画され、falseならv-elseディレクティブが描画される
これらは描画と破棄を繰り返す為、何度も表示の切り替えが必要なインタラクションの場合はv-showを使いましょう

JavaScript