Vue.jsのコンポーネント実装(超基礎)
コンポーネントを使ってログインフォームを実装しました！
今回は、Vue.jsのコンポーネントの学習としてログインフォームを実装しましたので、メモがわりに投稿したいと思います！
まず、コンポーネントについてなんですが、Vue.jsではよく出てくるのでしっかり押さえておいたほうが良いでしょう！軽く説明しますと、コンポーネントは、繰り返し使用されるような機能やテンプレートをあらかじめ定義しておき、再利用性や保守性を高めることを目的としています。これによって、開発効率を上げられたり、品質を保てたりします。大規模なシステムほどこの恩恵を受けます。
この辺で説明は終わりますが、より詳しく知りたい方はこのブログより深く解説しているサイトやVue.jsの公式ドキュメントなどを参照してみてください！
実装したもののコードを以下に上げておきます。
<div id="login-example">
<user-login></user-login>
</div>
<!-- テンプレート -->
<script type="text/x-template" id="login-template">
<div id="login-template">
<div>
<input type="text" placeholder="ログインID" v-model="userid">
</div>
<div>
<input type="password" placeholder="パスワード" v-model="password">
</div>
<button @click="login()">ログイン</button>
</div>
</script>
<script>
// コンポーネント定義
Vue.component("user-login", {
template: "#login-template",
data: function() {
return {
userid: "",
password: ""
};
},
methods: {
login: function() {
auth.login(this.userid, this.password);
}
}
});
// ログイン周りのダミー
// 本来ならバックエンド側で実装したログイン機能を呼び出すはず
var auth = {
login: function(id, pass) {
window.alert("userid:" + id + "\n" + "password:" + pass); // ここではidとpasswordをアラートに表示
}
};
new Vue({
el: "#login-example"
});
</script>HTMLの中にJavaScoriptを書いており、必要最小限のタグのみ書いています。よかったら、自分の環境で動かしてみてください。
ちなみに、コンポーネントを定義するときは上にも書いてありますが、
Vue.component({
template: ""
});
…のように決まった書き方をします。以下にブラウザから見た結果を載せておきます。
では！
