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 2022-03-10 20:25  完美前端  阅读(1410)  评论(0)    收藏  举报

导航