背景
Vue.jsの基本的な書き方を忘却録として残す
開発環境
PC:macOS Monterey(Intel Macbook Pro 2020)
エディター：Visual Studio Code
Vue.js： 2系
コード
app.js
// Vueインスタンスの生成
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue！'
}
})
index.html
<div id="app">
{{ message }}
</div>
出力
Hello Vue!
基本構文
new Vue()でVueインスタンスを生成する
インスタンスを生成することで、Vueアプリケーションが有効になる
VueはMVVMの影響を受けているので、Vueインスタンスの変数名にはvmがよく使われる
上記のapp.jsでインスタンスを生成する時の引数（オプションオブジェクト）は以下である
-
el
Vueの有効範囲を指定する
elに書かれた要素配下でVue.jsの機能が有効になる
app.jsは「#app」と記述しているので、idがappのHTML要素、すなわち「<div id=”app”></div>」の中でVue.jsの機能が有効になる -
data
Vueの有効範囲内で利用できる変数を指定する
app.jsではmessageが変数、Hello Vue!が値になる
VUeインスタンスが作成されると、自身のdataオブジェクトの全てのプロパティをリアクティブシステムに追加される。値が変更すると、すぐに更新される。
リアクティブシステムについてはこちらを参照
リアクティブに変更しないようにするためには、Object.freeze()を使用する
app.js
// 定義したdataオブジェクト
var data = { a: 1 }
// 追加することで、変更を防ぐ
Object.freeze(data)
var vm = new Vue({
el: '#app',
data: data
})
index.html
<div id="app">
<p>{{ a }}</p>
<input v-model="a">
</div>
inputに値を入れても, {{ a }}は変化しない
その他の設定オブジェクト
-
methods
関数 -
computed
-
watch
あるデータが変更されたタイミングで何か処理をしたいときに使用する
オプション一覧はこちらを参照
Vueのインスタンスプロパティとインスタンスメソッド
ユーザーが定義したプロパティと区別するため、$が付いている
app.js
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
// インスタンスプロパティ($data, $el)
// $data： Vue インスタンスが監視しているデータオブジェクト
vm.$data === data // => true
// $el: Vue インスタンスが管理している ルートな DOM 要素
vm.$el === document.getElementById('example') // => true
// インスタンスメソッド
vm.$watch('a', function (newValue, oldValue) {
// このコールバックは `vm.a` の値が変わる時に呼ばれる
})
インスタンスプロパティ、メソッドの一覧はこちら
Vueのライフサイクル
続きはここから書く
