Vue.jsで簡単に色々なHelloWorld!
- 公開:
- カテゴリ: JavaScript Vue.js
- タグ: JavaScript,Vue
Vue.jsのコアソースは公式より開発版をダウンロードして使用
- アジェンダ
ベーシックな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
- JavaScript
-
- ボタン押下でイベントが発火しtoggleMessage()メソッドが呼ばれ、isShowプロパティの真偽値を反転させている
- これによってメッセージの表示が切り替わる
- 同時に、computed(算出プロパティ)のbuttonLabel()メソッドが真偽値を評価し、ボタンのラベルを返している