本节课要点
我们利用之前学到的知识点做一个用户登录框,其中
1.为了界面不至于太恶心,我们引入bootstrap样式
2.我们故意把登录界面要素比如用户名、密码和提交按钮分成3个组件(仅仅是为了学习,增加难度)
一、引入bootstrap
新建目录css和fonts,放入对应的文件。
安装相应的webpack插件
为了正确的加载bootstrap中的样式和字体,我们需要安装
npm install file-loader --save-dev
webpack的配置文件中要加入
{test:/\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,loader:"file"}
二、折腾组件
user-login.vue内容如下:
<template>
<div id="user-login" class="col-md-8 col-md-offset-2">
<h2 class="text-center">用户登录</h2>
<form class="form-horizontal" role="form">
<user-name placeholder="请输入你的用户名"></user-name>
</form>
</div>
</template>
<style>
@import "./../css/bootstrap.min.css";
#user-login{
margin-top: 50px;
}
</style>
<script>
import username from "./user/use-name.vue";
export default{
components:{
"user-name":username
}
}
</script>
user-name.vue内容如下:
<template>
<div class="row">
<div class="form-group">
<label class="col-sm-2">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" :placeholder="username">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="button" class="btn btn-default">提交</button>
</div>
</div>
</div>
</template>
<script>
export default{
props:["placeholder"]
}
</script>
然后要修改入门文件jssrc/index.js
import Vue from "vue";
import userlogin from "./../components/user-login.vue";
new Vue({
el:".container",
components:{"user-login": userlogin}
});
执行webpack打包,浏览器查看编译之后的html,效果如下:
三、事件是怎么处理的
比如我们点击『提交』按钮,应该怎么处理?
<script>
export default{
props:["placeholder"],
methods:{
test(){
alert("test");
}
}
}
</script>
<button type="button" v-on:click="test" class="btn btn-default">提交</button>
四、怎么获取文本框的值
v-model 双向数据绑定
官方解释如下:可以用v-model指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点儿神奇,v-model不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。
<input type="text" v-model="username" class="form-control" :placeholder="username">
<script>
export default{
props:["placeholder"],
data:function () {
return {username:"张三"}
},
methods:{
test(){
alert(this.username);
}
}
}
五、组件之间的通讯
1.先把提交按钮拆分出来
user-submit.vue内容如下:
<template>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="button" v-on:click="test" class="btn btn-default">提交</button>
</div>
</div>
</template>
<script>
export default{
methods:{
test(){
alert(this.username);
}
}
}
</script>
user-username.vue内容如下:
<template>
<div class="form-group">
<label class="col-sm-2">用户名</label>
<div class="col-sm-10">
<input type="text" v-model="username" class="form-control" :placeholder="username">
</div>
</div>
</template>
<script>
export default{
props:["placeholder"],
data:function () {
return {username:"张三"}
}
}
</script>
user-login.vue内容如下:
<template>
<div id="user-login" class="col-md-8 col-md-offset-2">
<h2 class="text-center">用户登录</h2>
<form class="form-horizontal" role="form">
<user-name placeholder="请输入你的用户名"></user-name>
<user-submit></user-submit>
</form>
</div>
</template>
<style>
@import "./../css/bootstrap.min.css";
#user-login{
margin-top: 50px;
}
</style>
<script>
import username from "./user/use-name.vue";
import usersubmit from "./user/user-submit.vue";
export default{
components:{
"user-name":username,
"user-submit":usersubmit
}
}
</script>
至此,界面上还是一样的,只不过点击『提交』按钮,就拿不到用户名文本框的值了
怎么在user-submit组件里,去访问user-name组件呢?
组件访问方式
今天学习最简单的2个访问方式
(1) this.
parent访问父组件(2)this.
children 访问子组件(是一个数组)
访问某个子组件,可以用数组[索引]是方式。
用索引的方式太麻烦
vue.js 2.0提供了一个ref
的属性:
可以为子组件指定一个索引id,比如:
则访问时可以:
this.
parent.
refs.uname
<user-name ref="uname" placeholder="请输入你的用户名"></user-name>
user-submit.vue里:
<script>
export default{
methods:{
test(){
alert(this.$parent.$refs.uname.$data.username);
}
}
}
</script>
ok,这就实现了相邻组件之间的通信。