Vue.jsで簡単に色々なHelloWorld!
- 公開日
- カテゴリ：Vue.js
- タグ：JavaScript,Vue
Vue.js のコアソースは公式 より開発版をダウンロードして使用
Contents
- ベーシックな 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>
フォームから入力して 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() メソッドが真偽値を評価し、ボタンのラベルを返している
