HTML文件使用自定义的VUE组件(.vue文件)-摩杜云开发者社区

由于使用js文件的vue组件,不管是从局限性还是习惯使用上都不大好,所以还是使用vue组件比较好,但是在普通HTML页面肯定是没办法直接使用的,所以只能借助一个工具了-httpVueLoader

步骤一

引入httpVueLoader,我是直接使用最新版的了

<script src="https://unpkg.com/http-vue-loader"></script>

步骤二

编写自定义组件(.vue文件)

<template>
  <div class="mymoney">
    <div class="mymoney-outer">
      <input v-model="qfwTxt" @blur="onblur" @focus="onfocus"/>
      <input v-model="bigTxt" readonly/>
    </div>
  </div>
</template>

<script>
module.exports = {
  props: ['decimal_point'],//接收父组件传的值
  data() {
    return {
      qfwTxt: '',
      bigTxt: ''
    }
  },
  methods: {
    onblur() {
      this.bigTxt = `${this.qfwTxt}元`;
      //把值传给父组件
      this.$emit('input', this.qfwTxt)
    },
    onfocus() {
      //具体操作
    }
  },
  created() {
    //初始化赋值
    if (this.$attrs.value) {
      this.qfwTxt = this.$attrs.value;
      this.bigTxt = `${this.$attrs.value}元`;
    }
  }
}
</script>
<style scoped>
.mymoney {
  background: white;
}

.mymoney-outer {
  margin: 0;
  padding: 0;
  border: 1px solid #000000;
}

</style>

这里要注意的一点是需要使用module.exports 对组件进行导出

步骤三

创建vue实例,然后需要先使用httpVueLoader,之后再注册组件

<script type="text/javascript">
// 使用httpVueLoader
Vue.use(httpVueLoader)
// 注册组件
Vue.component("my-money",'url:./my_money.vue');
var vm = new Vue({
    el: '#webApp',
    components:{
    },
    data: {
        testTxt: 2,
        testTxt1: 12500,
    },
    created: function () {
    },
    methods: {
    }
})
</script>

具体效果

如果是本地运行的话,因为file和http这两个协议的问题,会出现跨域问题

总结

总的来说,使用vue组件还是比较好的,毕竟模块化了,而且样式啥的都区分,也符合大众的习惯

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>HTML页面使用js的vue组件</title>
</head>

<body>
<div id="webApp">
    <!-- my-money 就是我自定义的组件 -->
    <my-money v-model="testTxt1" :decimal_point="testTxt"></my-money>
</div>

<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>

<script type="text/javascript">
// 使用httpVueLoader
Vue.use(httpVueLoader)
// 注册组件
Vue.component("my-money",'url:./my_money.vue');
var vm = new Vue({
    el: '#webApp',
    components:{
    },
    data: {
        testTxt: 2,
        testTxt1: 12500,
    },
    created: function () {

    },
    methods: {

    }

})
</script>

</body>
</html>