※.このページの内容はとにかく急いで勉強しているので、正確でないことが多々あります。こんな奴いるんだ程度に見てください。
何が何だかわからないので、とにかくやってみます。
初めてすぎて何が何だかわかんない！から公式サイトの説明をそのまま実行してみます。
まずは、さっと基本情報をみておきます。
Node.jsは、JavaScriptをサーバでも動かせるすごい環境です。
Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。
Node.js とは | Node.js
Vue (発音は /vju:/、view と同様) は、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他のモノリシックなフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリはビュー層だけに焦点を当てており、使い始めるのも、他のライブラリや既存のプロジェクトに統合することも容易です。
はじめに | Vue.js
プログレッシブフレームワークは，必要になった時に問題解決するライブラリを適宜導入して問題を解決するという姿勢を持っています。最初に始めるときは小さく，大規模になるにつれて適切なライブラリやツールを導入することで大きく対応できる柔軟性を持ちます。不必要な学習コストが発生することもありません。
第1回 プログレッシブフレームワーク Vue.js：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社
豊島区の山の湯
Vue.jsをとにかくやってみる
とにかく突貫でやるので、Vue.jsはインストールせずにCDNを使います。
CDN
プロトタイピングや学習を目的とする場合は、以下のようにして最新バージョンを利用できます:
<script src="https://unpkg.com/vue@next"></script>
インストール | Vue.js
はじめに
はじめに | Vue.jsをやってみます。
最初、<head>内に書いてしまい「Counter: {{ counter }}」がそのまま表示されてしまいました。
<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(Counter).mount('#counter')
</script>
</head>
<body>
<div id="counter">
Counter: {{ counter }}
</div>
</body>
</html>
そのまま表示されてしまいました。
ここで新しい属性が出てきました。v-bind 属性はディレクティブと呼ばれます。ディレクティブは Vue によって提供された特別な属性であることを示すために v- 接頭辞がついています。
はじめに | Vue.js
ひたすら読んで書き写して実行して各ディレクティブを体感しました。
<html>
<head>
<title>Vue.jsをとにかくやってみる</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div>
<h2>宣言的レンダリング</h2>
<h3>文字列をレンダリングする</h3>
<div id="counter">
Counter: {{ counter }}
</div>
<h3>v-bind : 要素の属性にバインドする</h3>
<div id="bind-attribute">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
</div>
<div>
<h2>ユーザー入力の制御</h2>
<h3>v-on : インスタンスのメソッドを呼び出し</h3>
<div id="event-handling">
{{ message }}<button v-on:click="reverseMessage">文字をひっくり返す</button>
</div>
<h3>v-model : フォームの入力とアプリケーションの状態を双方向にバインディングする</h3>
<div id="two-way-binding">
{{ message }}<input v-model="message" />
</div>
</div>
<div>
<h2>条件分岐とループ</h2>
<h3>v-if : 条件に応じて描画</h3>
<div id="conditional-rendering">
<span v-if="seen">今、私が見えます</span>
</div>
<h3>v-for : 配列に要素をマッピングする</h3>
<div id="list-rendering">
<ol>
<li v-for="todo in todos">{{ todo.text }}</li>
</ol>
</div>
<h2>コンポーネントによる構成</h2>
<div id="todo-list-app">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
</div>
<script type="text/javascript" src="myVue.js"></script>
</body>
</html>
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(Counter).mount('#counter')
const AttributeBinding = {
data() {
return {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
}
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')
const EventHandling = {
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('')
}
}
}
Vue.createApp(EventHandling).mount('#event-handling')
const TwoWayBinding = {
data() {
return {
message: 'Hello Vue!'
}
}
}
Vue.createApp(TwoWayBinding).mount('#two-way-binding')
const ConditionalRendering = {
data() {
return {
seen: true
}
}
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
const ListRendering = {
data() {
return {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}
}
Vue.createApp(ListRendering).mount('#list-rendering')
const TodoList = {
data() {
return {
groceryList: [
{ id: 0, text: '野菜' },
{ id: 1, text: 'チーズ' },
{ id: 2, text: '人が食べるもの何か' }
]
}
}
}
const app = Vue.createApp(TodoList)
app.component('todo-item', {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
})
app.mount('#todo-list-app')
dataのプロパティは、インスタンスが作成時に存在した場合にのみ リアクティブ (reactive) です。次のように新しいプロパティを代入すると:
vm.b = 'hi'
bへの変更はビューへの更新を引き起こしません。あるプロパティがのちに必要であることがわかっているが、最初は空または存在しない場合は、なんらかの初期値を設定する必要があります。
アプリケーションインスタンス | Vue.js
vm.bに合わせて
vm.aに変更を加えたり表示したりすると
vm.bがビューに反映されて、
vm.aを変更したり表示しないと
vm.bがビューに反映されませんでした。
反映されてもされなくても開発ツールのConsoleには
[Vue warn]: Property "b" was accessed during render but is not defined on instance.
と警告が出ていました。
もっと勉強すれば理由がわかるのかもしれません。
<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>「vm.a」は「{{ a }}」</p>
<p>「vm.b」は「{{ b }}」</p>
</div>
<script type="text/javascript">
const vm = Vue.createApp({
data() {
return {a: 1}
}
}).mount('#app')
vm.a = 2 <<<<ここがあるとvm.bが反映される
vm.b = 'hi'
</script>
</body>
</html>
vm.bが反映される
<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>「vm.b」は「{{ b }}」</p>
</div>
<script type="text/javascript">
const vm = Vue.createApp({
data() {
return {a: 1}
}
}).mount('#app')
vm.b = 'hi'
</script>
</body>
</html>
vm.bが反映されない
インスタンスのライフサイクル表がありました。頑張って覚えていきます。
アプリケーションインスタンス | Vue.js
<html>
<head>
<title>Vue.jsをとにかくやってみる</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<h2>アプリケーションインスタンス</h2>
<div id="app">
<p>「vm.a === data.a」は「{{ a === $data.a }}」</p>
<p>「vm.a」は「{{ a }}」</p>
<p>「vm.b」は「{{ b }}」</p>
<p>「vm.foo」は「{{ foo }}」</p>
<button v-on:click="foo = 'baz'">barをbazに変更する</button>
</div>
<script type="text/javascript" src="myVue.js"></script>
</body>
</html>
const data = {
a: 1,
foo: 'bar'
}
const vm = Vue.createApp({
data() {
return data
},
created() {
console.log('a is: ' + this.a)
}
}).mount('#app')
vm.a === data.a
vm.a = 2
data.a
vm.b = 'hi'
Object.freeze(data)
