Vue.js学習メモ

<index.html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Vue App</title>
<link rel="stylesheet" href="css/styles.css">
</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)

var vm = new Vue({
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も更新されるということ。