![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
JSライブラリ >
<!-- 開発用 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 開発用(バージョン指定) <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <!-- 本番用 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- 本番用(バージョン指定) --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.min.js"></script>
npm install vue
Vueインスタンスを生成する事により、画面にデータを描画する事ができる。
また、Vueインスタンスを介して描画内容を変更する事も可能。
以下の通りVueインスタンスを生成して画面描画等を行う。
var vm = Vue({
.
.
})
指定できるオプション
| オプション | 内容 |
| data | UIの状態/データ |
| el | Vueインスタンスをマウントする要素 |
| filter | データの整形に使用する |
| methods | イベント発生時等の処理を関数として定義する |
| computed | データから派生して算出される値を関数として定義する |
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
// 2秒後にメッセージを書き換える
setTimeout(function(){
app.message = 'Change message!'
}, 2000);
</script>
後から動的に読み込んだコンテンツをマウントする場合等は、$mount メソッドを利用する。
<div id="app"></div>
<script>
var vm = new Vue({
template: '<p>{{message}}</p>',
data: {
message : 'Message!'
}
})
vm.$mount('#app')
</script>
コンポーネントを利用する事で画面を部分的に部品化して再利用する事ができる。
参考: https://jp.vuejs.org/v2/guide/components.html
例) クリックカウンターボタンをコンポーネント化して再利用する
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click='count++'>click count is {{ count }}.</button>'
})
new Vue({ el: '#components-demo' })
</script>
</body>
</html>
https://jp.vuejs.org/v2/guide/events.html
.stop
.prevent
.capture
.self
.once
.passive
v-if ディレクティブを使用して条件付きレンダリングを行う事ができる。
https://jp.vuejs.org/v2/guide/conditional.html
<div id="app">
<span v-if="display">Message1!</span>
<span v-else>Message2!</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
display: true
}
})
// 2秒後に表示を切り替える
setTimeout(function(){
app.display = false
}, 2000);
</script>
Vue.js のリアクティブシステムによる検知/要素の更新の他に、$watchメソッドによる状態の監視を行う事もできる。
<div id="app">
<input type="text" v-model="message" />
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
watch_message: ''
}
})
// メッセージが変わったらコンソールにログ出力
app.$watch(function(){
return this.message;
}, function(){
console.log('changed!');
});
// 2秒後にメッセージを変更
setTimeout(function(){
app.message = 'Change message!'
}, 2000);
</script>
