html使用vue组件
1.不传递数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../element-ui/lib/index.js"></script>
<script src="../components/navigation_bar.js"></script>
<title>navigation-bar</title>
</head>
<body>
<div id="app">
<navigation-bar></navigation-bar>
</div>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>
- navigation_bar.js (第一种方式)
Vue.component('navigation-bar', {
template:
`<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
&l
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
