代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue组件小案例</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style type="text/css">
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,.v-leave-active{
transition: all 0.6s ease;
}
/* .v-move{
transition: all 1s ease;
}
.v-leave-active{
position: absolute;
}
#app form{
width: 100%;
} */
</style>
</head>
<body>
<div id="app">
<a href="" @click.prevent="changeLog">登录</a>
<a href="" @click.prevent="changeReg" >注册</a>
<transition mode="out-in">
<login v-if="flag"></login>
<register v-else></register>
</transition>
<!-- <a href="" @click.prevent="changeComName('login')">登录</a>
<a href="" @click.prevent="changeComName('register')" >注册</a>
<transition model="out-in">
<componment :is="comName"></componment>
</transition> -->
</div>
<template id="reg">
<form role="form">
<div class="form-group">
<label for="name">用户名</label>
<input type="text" class="form-control" placeholder="请输入用户名">
<label for="name">密码</label>
<input type="password" class="form-control" placeholder="请输入密码">
<label for="name">确认密码</label>
<input type="password" class="form-control" placeholder="请输入密码">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
</template>
<template id="log">
<form role="form">
<div class="form-group">
<label for="name">用户名</label>
<input type="text" class="form-control" placeholder="请输入用户名">
<label for="name">密码</label>
<input type="password" class="form-control" placeholder="请输入密码">
<label for="name">验证码</label>
<input type="text" class="form-control" placeholder="请输入验证码">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
</template>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
flag:true,
comName:"login"
},
methods: {
changeLog(){
this.flag=true
},
changeReg(){
this.flag=false
},
changeComName(comName){
this.comName = comName
}
},
components: {
login: {
template: "#log"
},
register: {
template: "#reg"
}
}
})
</script>
</body>
</html>
解析
-
引入vue.js
-
创建vue对象
-
创建组件components=》模板名称=》模板id
-
写组件template 中登录和注册内容
-
登录注册的布局
-
在div中显示
-
点击显示与隐藏
-
默认登录显示 可以绑定：class{active:true }等等等
-
写方法点击事件的外部的不是组件里面的
-
写两个点击事件 显示与隐藏
<login v-if="flag"></login> <register v-else></register> -
直接使用组件不是用v-if(减少使用v-if 对函数的编写多了一点，少了v-if)
<a href="" @click.prevent="changeComName('login')">登录</a> <a href="" @click.prevent="changeComName('register')" >注册</a> <transition model="out-in"> <componment :is="comName"></componment> </transition> //data comName:"login" //方法 changeComName(comName){ this.comName = comName }
