Vue インスタンス
今回のお題は、こちらです
インスタンスの説明は、ガイド本文を読むのが適切なので、scriptの検証と結果だけつらつらと書いていきます。
そして、いままで両方の環境を掲載していましたが、比較する意味がない場合、検証しやすいまたは、楽が出来る方のみを掲載したいと思います。
データとメソッド
データとメソッド
index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<script src="https://unpkg.com/vue"></script>
<style>
[v-cloak] { display:none; }
</style>
</head>
<body>
<div id="app">
</div>
<script>
let data = { a: 1}
var app = new Vue({
el: '#app',
data: data
})
console.log(app.a === data.a)
app.a = 2
console.log('data.a', data.a)
data.a = 3
console.log('app.a', app.a)
console.log(app.a === data.a)
</script>
</body>
</html>
- 検証結果はでていますが、実際試してみます.
- jsの基礎のところで習う、オブジェクトは参照値ですから、Vueで扱うときも参照値ですとの説明でしょうか。
- そして、dataに登録されていない、値は変化してもリアクティブにならないので、空でも登録しなさいとの説明,inputタグの値などの事を指しているんでしょうね。
Object.freeze（）
- App.vue
<template lang="pug">
#App
p {{ foo }}
button(@click="foo = 'bug'") click!
</template>
<script>
const obj = { foo: 'bar' }
// Object.freeze(obj)
Object.freeze(obj)
export default {
name: 'app',
data () {
return obj
},
}
</script>
<style>
省略
- Object.freeze()自体は、JSの基本機能で、値の書き換えを許可しないものですね。
- ですから、設定してあると、ボタンをクリックしてもリアクティブしないということですね。
- ＠clickは、 v-on:clickを書くのが面倒になってきたので、うれしいです。
-
v-vind: -> :同じく面倒になったら、使うみたいです, 次回から使います。
$
Vueインスタンスが予め定義しているのがわかるように記号を割り当てています、これが頭についているものはVueインスタンスのプロパティかメソッドですとのこと。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div>{{ a }}</div>
<button @click="a += 1">click!</button>
</div>
<script>
var obj = { a: 1 }
var app = new Vue({
el: '#app',
data: obj,
methods: {
humanizeURL: function (url) {
return url
.replace(/^https?:\/\//, '')
.replace(/\/$/, '')
}
}
})
console.log(app.$data.a === obj.a)
console.log(app.$el === document.getElementById('app'))
console.log(app.$data === obj)
app.$watch('a', function(newValue, oldValue) {
console.log('NewValue', newValue, 'OldValue', oldValue)
})
</script>
</body>
</html>
- 検証結果はでていますが、自分で確認しておきます。
- $watchは、値が変わったのを検知したときに、発火するみたいですね、たしかにclickしたときに、ログが流れています。
- 後、頻繁にアロー関数はつかうなと警告が出ています。 アロー関数は便利ですが、thisの挙動がよくわかっていない初心者は素直に従ったほうがいいみたいです。 次回からはアロー関数はたまに使うぐらいにします。
- 入門系は、functionから始まる事が多い関数の書き方は、実際複数あります、できるだけすっきり書きたいので、省略系になります。 最初違和感がでますが、慣れてきます。
- 今回は短いですが、区切りなので、Git commitして、終わりにしたいと思います。