本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
用插槽实现一个导航栏
每次访问电影网站，都会看到一个导航栏，今天就仿照一个导航栏结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏</title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none;
}
.c-nav {
width: 900px;
height: 42px;
margin: 0 auto;
border-radius: 5px;
position: relative;
}
.c-nav li {
float: left;
width: 83px;
text-align: center;
line-height: 42px;
}
.c-nav li a {
color: rgb(253, 252, 252);
display: inline-block;
height: 42px;
}
header {
background: rgb(0, 0, 0);
}
.c-nav li.current a {
color: rgb(54, 17, 221);
background-color: rgb(255, 0, 0);
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<my-component>
<!-- 定义导航栏结构 -->
<template v-slot:header>
<div id="c_nav" class="c-nav">
<ul><li><a>电影院</a></li></ul>
<ul ref='nav'>
<li v-bind:class="name" v-for="item,key in list" @mouseenter="current(key)" @mouseleave="cancel(key)" :id=key>
<a href="https://www.baidu.com/">{{item}}</a>
</li>
</ul>
</div>
</template>
</my-component>
</div>
<script>
// 注册组件
Vue.component('my-component', {
render(createElement) {
return createElement('div', [
createElement('header', this.$slots.header),
])
}
})
var vm = new Vue({
el: '#app',
// 定义初始数据
data: {
list: ['首页', '电影', '电视剧', '综艺', '动漫'],
name:' '
},
methods: {
// 定义事件处理函数
current(key) {
vm.$refs.nav.getElementsByTagName('li')[key].className = 'current'; //鼠标悬停
},
cancel(key) {
vm.$refs.nav.getElementsByTagName('li')[key].className = ''; //鼠标离开
}
}
})
</script>
</body>
</html>
电影网站的导航栏，哈哈
创建一个自定义插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<my-component><my-component/>
</div>
<script>
// 定义一个MyPlugin（自定义插件）对象
let MyPlugin = {}
// 编写插件对象的install方法
// install()方法有两个参数，第1个参数Vue是Vue的构造器，options是一个可选的配置对象。
MyPlugin.install = function (Vue, options) {
// 在插件中为Vue创建组件myComponent
Vue.component('my-component', {
template: '<button>{{msg}}</button>',
data() {
return {
msg: '登录'
}
}
})
}
// 调用Vue.use()方法安装插件，在第1个参数中传入插件对象MyPlugin，第2个参数传入可选配置。
Vue.use(MyPlugin, {
someOption: true
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
需要下载vue.js然后替换成自己的地址。
