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を開いてみると

画像1

データがバインドされない・・・
原因は要素が読み込まれる前にバインドしようとしたからだと思い
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を開いてみる

画像2

バインドされました。
app.data.data1でデータを参照したり変更したりできるのだろうか？
次回はデータの構成とかいろいろ試してみよう。


この記事が気に入ったらサポートをしてみませんか？