vueでデータのバインディングを
モダンな開発環境を入れないでサッと使ってみたいと思ったところ
公式ではJSFiddle使うと楽だよって言われたけども
ローカルで利用したかったので確認。
vueの読み込みについてはCDNから行う形で
index.htmlとtest.jsの2ファイルでバインディング出来ている事だけ確認する。
なお、ビューモデルは対象のidが読み込まれた後で読まないと
id見つけられなくてエラー吐くので(最初についheadに書いて吐いた)
bodyの最後に読み込んでいる。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>vue test</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form>
<input type="text" v-model="message">
<p>Message is {{ message }}</p>
</form>
</div>
<!-- ViewModelはid設定した要素より後ろで読み込む -->
<script type="text/javascript" src="test.js"></script>
</body>
</html>
test.js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
これでindex.htmlをブラウザで開くと
messageがバインディングされていることが確認できた。
参考
はじめに — Vue.js
はじめてのVue.js - 単一ファイルコンポーネントを作れる環境構築編 (npm + gulp + browserify + babel + vueify)