html 插入vue 子组件

最新推荐文章于 2023-12-15 09:43:23 发布

=^_^=银爪

最新推荐文章于 2023-12-15 09:43:23 发布

阅读量1.2k

点赞数 1

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_65635437/article/details/130891125

版权

效果图

1.引入vue文件，可以把vue和vant下载好放在本地文件夹

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 中心 </title>
    <script src="Scripts/jquery-1.9.1-min.js"></script>
    <link href="css/font.css" rel="stylesheet" />
    <link href="Scripts/vant/index.css" rel="stylesheet" />
    <script src="Scripts/vue@3.js"></script>
    <script src="Scripts/vant/vant.min.js"></script>
</head>

2.在绑定的app中写html

用for循环绑定数据

使用<my-component></my-component>标签引用子组件

<div id="app">
        <div class="container">
            <van-tabs v-model="active" class="tabBox" >
                <van-tab :title="el.title" class="tabContent" v-for="(el,i) in tabList">
                    <div class="tadayInfo" :class="el.bgColor"><my-component></my-component>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>

3.在script 中注册vue并且定义数据

const MyComponent = {} 为子组件内容

components: { 'my-component': MyComponent,},注册子组件

<script>
    var vue;
    const MyComponent = {
        template: `
   
        <div class="tadayInfo-title">
           <img src="./images/centre/今日统计@2x.png" alt="" style="width: 100%;height: 100%;">
          </div>
            <div class="tadayInfo-contentBox">
              <div class="tadayInfo-content" v-for="(el,i) in taDayInfoList">
                <div class="tadayInfo-number">{{el.number}}</div>
                 <div class="tadayInfo-tag">{{el.tag}}</div>
                  </div>
                   </div>
                   
    `,data() {
                return {
                    taDayInfoList:[
                        {number:'120',tag:'转为私客'},
                        {number:'240',tag:'转为渠道客'},
                        {number:'360',tag:'转为渠道公客'},
                        {number:'480',tag:'转为云客中心'}
                    ]
                }
            },
    };
    loadData();
    function loadData() {

        var app = {
            data() {
                return {
                    tabList:[
                        { title: "私客", bgColor: 'bgColorPink', },
                        { title: "渠道客", bgColor: 'bgColorBlue', },
                        { title: "渠道公客", bgColor: 'bgColorYellow', },
                        { title: "云客中心", bgColor: 'bgColoRed', },
                    ],
                }
            },
            components: {
                'my-component': MyComponent,
            },
            computed: {
                fields() {

                },
            },

            created() { },
            mounted() { },
            methods: {},
        };

        vue = Vue.createApp(app);
        vue.use(vant);
        vue.use(vant.Lazyload);
        vue.mount('#app');
    }

</script>

4.编写css样式，美化页面

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        width: 100vw;
        height: 100vh;
        background-color: #f6f6f6;
        overflow: auto;
        margin-bottom: 100px;
    }

    .tabBox {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #111111;
    }

    .tabContent {
        padding: 24px 20px;
        background-color: #FFF9F9F9;
    }

    .tabBox .van-tabs__line {
        background-color: #fff;
        padding-bottom: 0px;
        opacity: 0;
    }

    .tabBox .van-tab--active {
        font-size: 20px;
        color: #FF5252;

    }

    .tadayInfo {
        width: 100%;
        height: 100%;
        border: 1px solid #ffffff14;
        border-radius: 10px;
        position: relative;
        padding-bottom: 16px;

    }
.bgColorPink{
    background-image: linear-gradient(233deg, #db379c 0%, #d17db5 100%);
    box-shadow: 0 3px 9px -4px #d879ad;
}
.bgColorBlue{
    background-image: linear-gradient(233deg, #5965BF 0%, #536BBC 100%);
    box-shadow: 0 3px 9px -4px #5D6FBD;
} 
.bgColorYellow{
    background-image: linear-gradient(233deg, #8fbf82 0%, #1ddf54 100%);
    box-shadow: 0 3px 9px -4px #bad47a;
} 
.bgColoRed{
    background-image: linear-gradient(233deg, #c87a7a 0%, #d72020 100%);
    box-shadow: 0 3px 9px -4px #7e303b;
} 

    .tadayInfo-title {
        width: 110px;
        height: 24px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .tadayInfo-contentBox {
        display: flex;
        margin-top: 34px;
        color: #fff;
        font-family: PingFangSC-Regular;
    }

    .tadayInfo-content {
        text-align: center;
        transition: color .1s linear;
        width: 25%;
    }

    .tadayInfo-number {
        font-weight: 600;
        font-size: 20px;
    }

    .tadayInfo-tag {
        font-weight: 400;
        font-size: 12px;
    }

    /* .clientCard {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border-radius: 1rem;
        padding: 0.5rem 1rem;
        margin-top: 15px;
        box-shadow: 0 3px 11px -4px #29775f5e;
        filter: blur(10px);
    }

    .clientCard-title {
        width: 116.49px;
        height: 50px;
        background: #6F72F6;
        box-shadow: inset 0 1px 1px 0 #75ffffff;
        border-radius: 10px 2px 0 6px 0;
    } */
</style>

也可以单独把子组件拿出来，写在js文件里面

可以将MyComponent的定义保存在一个单独的.js文件中，然后在需要使用它的HTML页面中引入这个.js文件。

例如，可以在一个名为my-component.js的文件中定义组件：

const MyComponent = {
  template: `
    <div class="tadayInfo-title">
      <img src="./images/centre/今日统计@2x.png" alt="" style="width: 100%;height: 100%;">
    </div>
    <div class="tadayInfo-contentBox">
      <div class="tadayInfo-content" v-for="(el,i) in taDayInfoList">
        <div class="tadayInfo-number">{{el.number}}</div>
        <div class="tadayInfo-tag">{{el.tag}}</div>
      </div>
    </div>
  `,
  data() {
    return {
      taDayInfoList:[
        {number:'120',tag:'转为私客'},
        {number:'240',tag:'转为渠道客'},
        {number:'360',tag:'转为渠道公客'},
        {number:'480',tag:'转为云客中心'}
      ]
    }
  },
};

然后在HTML页面中引入这个文件，并且调用Vue.createApp并挂载组件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Component Demo</title>
  <script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script>
  <script src="./my-component.js"></script>
</head>
<body>
  <div id="app">
    <my-component></my-component>
  </div>

  <script>
    const app = Vue.createApp({});
    app.component('my-component', MyComponent);
    app.mount('#app');
  </script>
</body>
</html>

我们将MyComponent定义保存在了my-component.js文件中，并且在HTML页面中引入了这个文件。然后，在调用Vue.createApp之前，我们使用app.component('my-component', MyComponent)将组件注册为全局组件，并在HTML中使用<my-component></my-component>标签来引用它。

=^_^=银爪

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
html 插入vue 子组件

const MyComponent = {} 为子组件内容components: { 'my-component': MyComponent,},注册子组件<script>var vue;<img src="./images/centre/今日统计@2x.png" alt="" style="width: 100%;"></div></div></div>`,data() {return {{number:'120',tag:'转为私客'},
复制链接

扫一扫