Vue.jsはじめました勉強用作業メモ
公式サイト
https://jp.vuejs.org/index.html
事前準備環境
- visualStudioCode
- node.js
Vue.jsとは(wiki引用)
Vue.js（ヴュージェイエス）、またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである[4]。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション（SPA）を構築することも可能である。
導入方法
- 今あるhtmlページ実装に乗せる形で導入したい。→ cdnで導入がおすすめ
- 本格的なSPAページとして1から実装したい。→ cliで導入がおすすめ
手順
- cdnで試してみよう
index.html
<html>
<title>Vue.js Test</title>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var app = new Vue({
el: '#app',
data: {
message: 'メッセージを表示'
}
})
});
</script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
- 本番バージョン使いたい場合はこちら
index.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 色々いじってみる
- 表示・非表示とか。
index.html
<html>
<title>Vue.js Test</title>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var app = new Vue({
el: '#app',
data: {
disp1: true,
disp2: false
}
})
});
</script>
</head>
<body>
<div id="app">
<div v-show="disp1">表示される</div>
<div v-show="disp2">表示されない</div>
</div>
</body>
</html>
- 色々いじってみる2
- メソッドとか
index.html
<html>
<title>Vue.js Test</title>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var app = new Vue({
el: '#app',
data: {
message: '時間がでるよ!'
},
methods: {
reverseMessage: function () {
this.message = new Date();
}
}
})
});
</script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">時間を取得</button>
</div>
</body>
</html>