Vue.jsを触ってみる1
ずっとjQueryばかり使っていたので別のJavaScriptのライブラリを触ってみたくてVue.jsをチョイス
ガイドをみながら自分なりにサンプルを作ってみる
https://jp.vuejs.org/v2/guide/
ファイル構成
index.html
/lib/vue.js
/lib/sample.js
sample.js
var dataList = {
data1 : "データ1",
data2 : "データ2"
}
var app = new Vue({
el : "#data",
data : dataList
})
Vue インスタンスを生成するのが基本のようです。
elに指定したDOM要素が制御対象
dataに指定したデータをDOM要素の任意の場所に表示されるようになります
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>ページタイトル</title>
<script src='./lib/vue.js'></script>
<script src='./lib/sample.js'></script>
</head>
<body>
<div id="data">
{{ data1 }} + {{ data2 }}
</div>
</body>
</html>
index.htmlを開いてみると
データがバインドされない・・・
原因は要素が読み込まれる前にバインドしようとしたからだと思い
sample.jsを読み込む位置を変更
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>ページタイトル</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='./lib/vue.js'></script>
</head>
<body>
<div id="data">
{{ data1 }} + {{ data2 }}
</div>
<script src='./lib/sample.js'></script>
</body>
</html>さ
再度index.htmlを開いてみる
バインドされました。
app.data.data1でデータを参照したり変更したりできるのだろうか?
次回はデータの構成とかいろいろ試してみよう。
この記事が気に入ったらサポートをしてみませんか?