html中创建vue组件及引用

最新推荐文章于 2024-05-15 15:35:06 发布

李湘湘

最新推荐文章于 2024-05-15 15:35:06 发布

阅读量4.3k

点赞数

分类专栏： http-vue-loader 文章标签： html vue

本文链接：https://blog.csdn.net/qq_40255459/article/details/108888286

版权

http-vue-loader 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html中创建vue组件及引用

需要的js文件
在这里插入图片描述
组件vue文件中的代码

<template>
  <div class="person-infor" @click="addressClick">
    <div class="address-wrap" v-if="!data.address_str">
      <p>请添加收货地址</p>
    </div>
    <div class="address-wrap" v-else>
      <img
        src="./images/icon_adress.png"
        alt=""
        style="
          width: 11px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        "
      />
      <p style="padding-left: 20px">
        {{ data.username }}&nbsp;&nbsp;{{ data.phone }}
      </p>
      <p class="adress">{{ data.address_str }}</p>
    </div>
  </div>
</template>
<style scoped>
p {
  margin: auto;
  padding: 0;
}
/* 地址组件 */
.person-infor {
  background-color: #fff;
  padding: 10px 10px 10px 15px;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 10px;
  color: #5d5d5d;
}
.person-infor p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
  text-overflow: ellipsis;
}
.person-infor .adress {
  padding-left: 18px;
  line-height: 1.3;
}
.address-wrap {
  padding-right: 20px;
  position: relative;
}
.address-wrap:after {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: relative;
  top: -2px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -4px;
}
/* 地址组件end */
</style>
<script>
module.exports = {
  props: {
    data: Object,
  },
  data: function () {
    return {
    };
  },
  methods: {
    addressClick() {
      console.log("子组件，点击了");
      this.$emit("addressclick");
    },
  },
};
</script>

html文件中引入及用法

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset='utf-8'>
    <title>http-vue-loader引用vue组件</title>
    <!-- 页面描述 -->
    <meta name="description" content="" />
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--页面css end-->
    
    <style type="text/css">
        body {
            background: #f5f5f5;
            margin: auto;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="app" class="forget-pass">
        <address-info :data="datas" @addressclick="addressClick"></address-info>
    </div>


    <!--公共js start-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--公共js end-->
    <script src="./js/vue.js"></script>
    <script src="./js/httpVueLoader.js"></script>
    <!--页面js start-->
    <script type="text/javascript">
        // Vue.use(httpVueLoader)
        var vm = new Vue({
            el: '#app',
            components: {
                'address-info': httpVueLoader('indexs.vue')
            },
            data: {
                // 传到组件的数据
                datas: {
                    username: '李湘湘',
                    phone: '123456789',
                    address_str: '用户地址用户地址用户地址用户地址'
                }
            },
            methods: {
                addressClick() {
                    // 这里执行跳转地址列表
                    console.log('父组件点击了，跳转到地址列表');
                },
            },
            mounted: function () {

            },
            destroyed: function () {

            },
            created: function () {
            }

        })


    </script>
    <!--页面js end-->

</body>

</html>

李湘湘

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
html中创建vue组件及引用

html中创建vue组件及引用需要的js文件组件vue文件中的代码<template> <div class="person-infor" @click="addressClick"> <div class="address-wrap" v-if="!data.address_str"> <p>请添加收货地址</p> </div> <div class="address-wrap"
复制链接

扫一扫