Vue.js学習メモ
<index.html>
<!DOCTYPE html>
<html lang="ja">
<head>
<title>My Vue App</title>
</head>
<body>
<div id="app">
<p>Hello {{ name.toUpperCase() }}!</p>
<p><input type="text" v-model="name"></p>
</div>
<script src="js/main.js"></script>
</body>
</html>
①Vue.jsで扱うUIの領域を定義する為に、div id="app"を用意する。
<js/main.js>
(function() {
'use strict';
// two data binding (to UI)
el: '#app',
data: {
name: 'nakamura'
}
});
})();
②Vue.jsでUIに結びつくモデル、vmを作り、el:でどのviewの領域と結び付けるかを指定する。そしてdata:でモデルが持つデータを指定する。
③上記のデータを{{ name }}でUIに反映させる。(データからUIへの反映)
④input="text" v-model="name" (UIからデータへの反映)
two way data bindingというのはdataが更新されればUIが更新され、UIが更新されればdataも更新されるということ。