この記事の目的
vue.jsってどんなもんなんだろう。vue.jsの特徴の双方向バインディングってどういうの？っていうのを一瞬で体験するためにフォームとそこに入力したら即反映という簡単なものを一瞬で作るための記事。
作るもの
- フォームに入力した文字がそのままリアルタイムに反映される
作り方
html、jsファイルの用意
index.html
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Myvueapp</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<p>
{{ name }}
</p>
<p>
<input type="text" v-model="name" />
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/main.js"></script>
</body>
</html>
main.js
(function(){
'use strict';
var vm = new Vue({
el: '#app',
data: {
name: 'taguchi'
}
});
})();
vue.jsの読み込み
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/main.js"></script>
まずはvueを読み込んでから他のjascriptファイルを読み込む。この順番大切。
javascript解説
- elでidを指定。この指定されたidのdivタブ内でvueが効く
- dataでプロパティの設定
- nameは上書き可能。デフォルト値の設定になる
html解説
- idの指定
- v-modelでどのプロパティと紐付けるかを指定する