JSFiddle - React, Tailwind, and code Playground
by flourscent
HTML
<script src="https://unpkg.com/[email protected]"></script>
<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);
}
}
new Vue({
el: "#login-example"
});
</script>