html中使用vue 和 vue模块

#### 在Vue中使用http-vue-loader加载组件

要使用vue组件的话,需要引入http-vue-loader.js 要在服务器的环境下打开 开发时本地服务器 或 idea打开

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<section id="app">
    <my-component></my-component> 
    <section @click="clockss"> 
        {{title}}
    </section>
</section>

<script src="/js/vue/vue2614.js"></script> 
<script src="/js/vue/http-vue-loade.js"></script> 
<script>
    // 使用httpVueLoader
    Vue.use(httpVueLoader);
    new Vue({
        el: '#app',
        data: {
            title: '111'
        },
        methods: {
            clockss() {
            }
        },
        components: {
            // 将组建加入组建库
            'my-component': 'url:./app/components/my-component.vue'  // 加载外部的Vue组件
        }
    })
</script>
</body>
</html>

Vue组件 - my-component

<template>
  <div class="hello">Hello {{who}}</div> 
</template>

<script>
module.exports = {
  data: function() {
    return {
      who: 'world223232'  // 初始化who变量
    }
  }
}
</script>

<style>
.hello {
  background-color: #ffe;  // 定义hello类的样式
}
</style>

posted on   完美前端  阅读(1394)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2020-03-10 flutter 页面布局 SizedBox ConstrainedBox LimitedBox AspectRatio FractionallySizedBox

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示