Vue笔记二:登录注册切换小案例

接笔记一,笔记一讲的是组件怎么注册,本文是组件的小案例
首先,据我们所知,Vue实例中是可以使用data属性和method属性,以及生命周期函数等,组件中其实也是可以使用data和methods属性的,与Vue实例不同的是,组件中的data是一个方法,所以必须要有返回值return,那Vue实例中的data是一个对象,是可以直接写数据的,两者的methods都是一样的,存储方法。

登录注册选项卡切换

第一步 创建私有组件,编写单击事件
第二步 创建标签,绑定单击事件
第三步 通过component标签来实现多组件的切换,is属性的值是哪个组件,页面就会显示哪个组件。is的官方文档
.prevent的作用是提交页面不要再重载页面
全部代码

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 登录注册案例 title>
		<style>
		.v-enter,
		.v-leave-to{
			opacity: 0;
			/* 让动画更明显 */
			transform: translateX(100px);
		}
		.v-enter-active,
		.v-leave-active{
			/* 设置动画的执行时间,执行速度 */
			transition: all 1s ease;
		}
		style>
	head>
	<body>
		<div id="app">
			<a @click.prevent="comName='com1'">登录a>
			<a @click.prevent="comName='com2'">注册a>
			<a @click.prevent="comName='com3'">首页a>
			<transition mode="out-in">
				<component :is="comName">component>
			transition>
		div>
		<template id="temp1">
			<div>
				<h1>登录h1>
			div>
		template>
		<template id="temp2">
			<div>
				<h1>注册h1>
			div>
		template>
		<template id="temp3">
			<div>
				<h1>首页h1>
			div>
		template>
		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
		<script>
			var com1 = {
				template: '#temp1',
			}
			var com2 = {
				template: '#temp2',
			}
			var com3={
				template:'#temp3',
			}
			var vm = new Vue({
				el: '#app',
				data: {
					comName:'com1'
				},
				components: {
					com1,
					com2,
					com3,
				}
			})
		script>
	body>
html>

运行结果:

Vue笔记二:登录注册切换小案例_第1张图片

Vue笔记二:登录注册切换小案例_第2张图片

Vue笔记二:登录注册切换小案例_第3张图片

你可能感兴趣的:(Vue,vue.js,前端,javascript)