springboot集成html-vue

最新推荐文章于 2024-06-24 18:02:27 发布

Rain-小雨淅淅

最新推荐文章于 2024-06-24 18:02:27 发布

阅读量394

点赞数

文章标签： vue.js spring boot html

本文链接：https://blog.csdn.net/Rain_1470626/article/details/129793995

版权

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。