RitoLabo

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

  • 公開:
  • カテゴリ: JavaScript Vue.js
  • タグ: JavaScript,Vue

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

アジェンダ
  1. ベーシックなHelloWorld
  2. ボタン押下でHelloWorld
  3. フォームから入力してHelloWorld
  4. ボタン押下でHelloWorld(v-showディレクティブ)
  5. ボタン押下で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
  1. id名「app」を持つDIV要素を作成する。
  2. その中に、Mustache構文messageをセット
JavaScript
  1. Vue.jsのコアソースを読み込み
  2. elプロパティでid名を指定すると、「Vue.jsで描画する対象を、id名「app」配下とする」という意味になる
  3. データプロパティに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
  1. ボタンにv-onディレクティブでクリックイベントを設定する
JavaScript
  1. 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
  1. Mustache構文でmessageをセットする際に、パイプでフィルターをセットする事もできる
  2. この例では、フィルターでタグを除去している
  3. 入力値を表示させる場合は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
  1. v-showディレクティブにisShowプロパティを指定する
  2. v-showディレクティブは必ず描画を行い、styleである display:block/none で表示・非表示を制御する
JavaScript
  1. ボタンを押下した際に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
  1. v-ifディレクティブにisShowプロパティを指定する
  2. 同時にv-elseディレクティブも設置する
  3. よくあるif-elseと同じ意味を持っていて、この場合、isShowがtrueならv-ifディレクティブが描画され、falseならv-elseディレクティブが描画される
  4. これらは描画と破棄を繰り返す為、何度も表示の切り替えが必要なインタラクションの場合はv-showを使いましょう
JavaScript
  1. ボタン押下でイベントが発火しtoggleMessage()メソッドが呼ばれ、isShowプロパティの真偽値を反転させている
  2. これによってメッセージの表示が切り替わる
  3. 同時に、computed(算出プロパティ)のbuttonLabel()メソッドが真偽値を評価し、ボタンのラベルを返している