基本的に自分のために書いているのであまり読みやすくはないかも・・・
最初に/今回やったこと
勝手に夏休み自由研究をしてみた。前々から気になってたVue.jsに取り組んで見る。
今回は最小限のものを作成してみる。
Vue.jsの公式サイトのチュートリアルだと1つのHTMLファイルの中にHTMLとJavascriptを混在させるような書き方で、イマイチしっかりとした開発をイメージできず、かといって vue-cli を使ってボイラープレート作るといきなり壮大になってしまうので、順番にだんだん複雑になるような感じで自分の理解をプログレッシブにすすめていきたいというか。
できたもの
ユーザー名とパスワードをinputに入れて、submitするとただしユーザー名、パスワードかどうか判定するというもの。判定する部分を別ファイルに書いて、ちゃんと連動して動作するかやってみた。
解説(1) index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Vue.js simple SPA example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="./index.js"></script>
</head>
とりあえずここでは vue.js は CDN から取ってきてみた。で、外部ファイルの index.js を読み込んでいる。
<body>
<h1>Vue.js ファイル分割デモ</h1>
htmlファイルとjsファイルを分割した状態で動作させるデモ
<h1>
Login(Correct Login Name: myLoginName)
</h1>
<p>
<div id="loginaccount">
<p>{{ loginaccountname }}</p> <!--ここには入力したlogin名が表示される。実際には取る-->
<input v-model="loginaccountname">
</div><!--<input id="loginAccount">-->
</p>
これが vue.js らしいやつ。このムスタッシェで囲まれたやつはなんと呼べばいいのか未だによくわからん。とりあえずHTML内にこれを書いて、inputタグに v-model というのを書いておけば連携してくれるらしい。後ほどやるけどjavascriptプログラムからこれを更新する方法もある。
<p>
<div id="loginsubmit">
<button v-on:click="checklogin">ログイン</button>
</div>
<!--<input type="submit" value="ログイン" id="loginSubmit">-->
</p>
<h1>
Result
</h1>
<p id="loginResult"></p>
</body>
</html>
で、ログインボタン(submitボタン)に v-on:click=イベント名 と書いておくと、submitボタンをクリックした時にイベント checklogin を発火させて、処理させることができるみたい。で、結果については #loginResult に出力するようにした。
解説(2) index.js
次に javascript のほう
window.onload = function(){
// window.onloadイベントの中で動作させる
var loginName = new Vue({
// ログイン名入力欄
el: "#loginaccount",
data: {
loginaccountname: ""
}
})
とりあえず window.onload イベントの中で動かすようにした。まずはチュートリアルに忠実に、Vueのインスタンスを作るのだが、この時点では1こづつVueインスタンス作ると非効率だったりコンポーネント間でデータ参照するの大変じゃね？とか思ってた。
var loginSubmit = new Vue({
// ログインボタンを押した時の挙動を定義
el: "#loginsubmit",
methods: {
checklogin: function(event){
// checkloginイベント(htmlファイル内で定義している)の内容を記述
correctLoginName = "myLoginName"
correctPassword = "mySecretPassword1234"
console.log(loginName.$data.loginaccountname)
console.log(loginPassword.$data.loginpassword)
if ((loginName.$data.loginaccountname == correctLoginName) &&
(loginPassword.$data.loginpassword == correctPassword)) {
document.getElementById("loginResult").innerHTML = "Login Success !"
}
else {
document.getElementById("loginResult").innerHTML = "Login Failed !"
}
}
}
})
}
コンポーネント(って呼んでいいのか？)のイベントは、Vueインスタンスの中の methods の中に定義すればいいらしいのでそうした。HTML内で宣言したVueコンポーネントの値を読み取るときは コンポーネントの変数名.$data.宣言した名前 とすれば読み取られるらしい。この時点ではどうやってHTMLファイル内のVueコンポーネントの値を更新すればいいかよくわからなかったので getElementByID で要素を取得して無理やりというか、更新している。
さいごに
とりあえずファイル分けて動作させることはできたので、次は vue.js の目玉機能のルーティングに挑戦してみる