一、实验目的:
掌握Vue提供的全局API。
掌握Vue实例对象中的常用属性。
二、实验要求:
了解Vue的常用全局API和实例属性及其使用
编写程序完成以下实验内容并上交实验报告
三、实验内容:
(一)实验基础
1、全局API
(1) 全局API用于先声明全局变量或者直接在Vue上定义一些新功能。
(2) 全局API不在构造器里。Vue内置了一些全局API,可在构造器外部用Vue提供的API函数来定义新的功能。
2、本次实验主要通过Vue.use指令和vu.$slot属性的使用掌握全局API和实例属性的使用方法。
(二)实验题
1、请使用插槽vm.$slot实现一个导航栏结构。
2、请创建一个自定义插件,实现一个登录页面。
四、设计思路:
1. 编写一个导航栏,指定slot=“header”,在组件内指定插槽位置。
2. 编写一个vue文件存放登录页面内容,在js中注册vue,在main.js使用插件,在要使用的页面调用插件。
五、实验过程中遇到的问题及解决手段:
Slot插槽位置不对,导致导航栏偏移:指定插槽名称。
单文件不知道如何使用插件,使用Vue-cli构建了一个项目来存放不同的文件。
六、程序源代码:
1.
<!DOCTYPE html>
<html xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<child-component>
<h2 slot="header"><div id="nav">
<ul >
<li ><a href="#">首页</a></li>
<li ><a href="#">博客</a></li>
<li ><a href="#">资源</a></li>
<li ><a href="#">留言</a></li>
</ul>
</div></h2>
<p>正文内容</p>
<p>更多正文内容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
<template id="first">
<div class="component">
<div class="header">
<slot name="header">
</slot>
</div>
<div class="main">
<slot></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>'
</template>
<script>
Vue.component('child-component', {template: '#first'});
var app = new Vue({
el: '#app'
})
</script>
<style type="text/css">
#nav{
width:100%;
height:39px;
margin:0px;
background:lightblue;
}
#nav ul li{
margin:5px 10px;
float:left;
list-style:none;
}
#nav ul li a{
float:left;
padding:0px 16px;
<!--margin:auto;-->
color:#ffffff;
font-size:15px;
}
</style>
</body>
</html>
2.
Login.vue
<template>
<div class="htmleaf-container" v-show="isShow">
<header class="htmleaf-header">
<h1><span>登录</span></h1>
</header>
<div id="wrapper" class="login-page">
<div id="login_form" class="form">
<form class="login-form">
<input type="text" placeholder="用户名" id="user_name"/>
<input type="password" placeholder="密码" id="password"/>
<button id="login" >登录</button>
<button class="unshow" id="unshow" @click="unshow()">稍后登录</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data () {
return {
isShow: false,
message: '',
timer: null
}
},
methods: {
show (mes) {
this.message = mes
this.isShow = true
},
unshow(){
this.isShow = false
}
}
}
</script>
<style scoped>
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 5rem;
line-height: 0.35rem;
white-space: wrap;
padding: 0.25rem;
border-radius: 6px;
color: #fff;
font-size: 0.18rem;
background: rgba(0,0,0, 0.8)
}
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Microsoft YaHei","Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shake_effect{
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
@-webkit-keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
p.center{
color: #fff;font-family: "Microsoft YaHei";
}
#unshow{
z-index: 2;
background: #b3b3b3;
}
</style>
Login.js:
import Vue from 'vue'
import login from './login.vue' // 引入组件
login.install = function () {
Vue.component(login.name, login)
}
export default login
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
import Login from './components/login.js'
Vue.use(Login)
new Vue({
render: h => h(App),
router,
}).$mount('#app')
HelloWorld.vue:
<template>
<div id="app">
<div @click="tab">点击显示toast</div>
<Login ref="tip2" />
</div>
</template>
<script>
export default {
methods: {
tab () {
this.$refs.tip2.show('')
}
}
}
</script>
<style lang="scss">
</style>