springboot集成html-vue
html组件
假设我们有一个自定义组件叫做my-component,它的代码如下:
<!-- my-component.html -->
<div>
<h1>Hello, world!</h1>
</div>
现在我们想在另一个页面中使用这个组件,我们可以在页面中引入my-component.html,然后在页面中使用my-component标签来调用它。具体的步骤如下:
在页面中引入my-component.html,可以使用 link 标签或者 script 标签:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="import" href="my-component.html">
</head>
<body>
<my-component></my-component>
</body>
</html>
这样就可以在页面中使用自定义组件了。注意,如果需要在页面中使用多个自定义组件,需要分别引入它们的文件,并使用不同的标签名来调用它们。
html-vue组件的三种引入
使用页面 均搭配vue-elui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件引入测试</title>
<link rel="stylesheet" href="/css/element_ui.css">
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div id="app">
<el-container>
<base-head></base-head>
<el-main>
<h1>{{text}}</h1>
<base-main1></base-main1>
</el-main>
<el-footer>
<base-footer :user="user" ></base-footer>
</el-footer>
</el-container>
</div>
</body>
<script type="text/javascript" src="/js/plug/vue.min.js"></script>
<!--<script src="https://unpkg.com/http-vue-loader"></script>-->
<script type="text/javascript" src="/js/plug/http-vue-loader.js"></script>
<script type="text/javascript" src="/js/plug/element_ui.js"></script>
<script type="text/javascript" src="/js/include/baseFooter.js"></script>
<script>
let baseMain1={
template:"<span>{{text}}</span>",
data(){
return{
text: "baseMain1"
}
}
}
let vue=new Vue({
el:"#app",
components:{
'base-head': httpVueLoader('/js/include/baseHead.vue'),
'base-main1':baseMain1
},
data(){
return{
activeIndex2: '1',
text:"你好",
user:{
name:"tom",
age:18,
address:"北京"
}
}
},
methods:{
}
})
</script>
</html>
第一种 对象引入
主页面
<el-main>
<base-main1></base-main1>
</el-main>
主页面
let baseMain1={
template:"<span>{{text}}</span>",
data(){
return{
text: "baseMain1"
}
}
}
let vue=new Vue({
el:"#app",
components:{
'base-main1':baseMain1
}
})
第二种 vue组件注册
创建baseFooter.js文件
/* 注意 template 后面的符号不是引号---- 英文状态下 标准键盘 数字1 前面的 ```*/
Vue.component("base-footer",{
props:["user"],
template:`
<div>
<span v-text="user.name"></span>
<span v-text="user.age"></span>
<span v-text="user.address"></span>
</div>
`,
data(){
return{
}
}
})
主页面引入并使用
<el-footer>
<base-footer :user="user" ></base-footer>
</el-footer>
....
<script type="text/javascript" src="/js/include/baseFooter.js"></script>
第三种 模块化引用
创建baseHead.vue文件
<template>
<el-header>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<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>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</el-header>
</template>
<script>
/* 注意 这里使用 module.exports 并非在vue工程里面的export default*/
module.exports = {
name: 'base-head',
data () {
return {
activeIndex2: '1',
};
},
created() {
},
mounted() {
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
};
</script>
<style scoped>
</style>
主页面引入
<el-container>
<base-head></base-head>
</el-container>
....
<!--<script src="https://unpkg.com/http-vue-loader"></script>-->
<script type="text/javascript" src="/js/plug/http-vue-loader.js"></script>
let vue=new Vue({
el:"#app",
components:{
'base-head': httpVueLoader('/js/include/baseHead.vue'),
}
})
html-vue组件注意事项
在vue工程文件里 官方推荐使用大驼峰命名,例如
Vue.component(‘MyComponent’, {
// …
})
使用标签
也可以使用 kebab-case(短横线分隔命名),例如 my-component。
Vue.component(‘my-component’, {
// …
})
使用标签
由于html规范导致在HTML中组件使用时的标签必须使用 kebab-case(短横线分隔命名),例如 my-component。