Простое переключение формы АВТОРИЗАЦИЯ РЕГИСТРАЦИЯ. Простое???

Question

[Никита Котенко]

Начал знакомиться с vue с простой формы авторизации, разделённой на два компонента: login и registration, переключающиеся ссылкой под каждой формой. Замечу, что ссылка находится внутри компонента (когда ссылки были снаружи, мне всё нравилось).

В итоге вроде бы сделал и даже всё работает, но я что-то не кайфанул от квеста с Vue. Или я что-то неправильно сделал относительно концепции использования?:

раскрыть код

<div id="app">
	<component :is="currentForm" v-on:form="switchForm"></component>
</div>
<template id="login-template">
	<div>
		<h1>Login form</h1>
		<form>
			<label>Email</label>
			<input v-model="email">
			<label>Password</label>
			<input v-model="password">
		</form>
		<a href="#" @click="callSwitchForm('registration')">Registration</a>
	</div>
</template>
<template id="registration-template">
	<div>
		<h1>Registration form</h1>
		<form>
			<label>Email</label>
			<input v-model="email">
			<label>Password</label>
			<input v-model="password">
			<label>Re-enter password</label>
			<input v-model="repassword">
		</form>
		<a href="#" @click="callSwitchForm('login')">Login</a>
	</div>
</template>

Vue.component('login', {
	template: '#login-template',
	data: function () {
		return {
			email: '',
			password: '',
		}
	},
	methods: {
		callSwitchForm: function(form) {
	    	this.$emit('form', form)
	    }
	}
})

Vue.component('registration', {
	template: '#registration-template',
	data: function () {
		return {
			email: '',
			password: '',
			repassword: '',
		}
	},
	methods: {
		callSwitchForm: function(form) {
	    	this.$emit('form', form)
	    }
	}
})

var app = new Vue({
	  el: '#app',
	  data: {
	  	currentForm: 'login'
	  },
	  methods: {
	    switchForm: function(form) {
	    	this.currentForm = form
	    }
	  }
})

Ну, и, если я сделал всё правильно, то в чём прелесть vue, если на jquery это делается одной строкой?

Спасибо.

Comments

[Riley Usagi]

Наверняка суть в том, что на jQuery это делается несколькими сотнями строк.
Вы, просто, пока ещё не поняли что такой jQuery и из чего он на самом деле состоит.

Просто продолжайте изучать тему и когда дойдёте до действительно важных и сложных вещей, применяющихся в реальных проектах, вы поймёте всю прелесть Vuex и возможность сократить миллионы строк нечитаемого однофайлового jquery-кода в несколько простых компонентов на Vue