html中使用vue 和 vue模組
阿新 • • 發佈：2022-03-10
要使用vue元件的話，需要引入http-vue-loader.js 要在伺服器的環境下開啟 開發時本地伺服器 或 idea開啟
<!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 src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
<!--<script src="https://unpkg.com/http-vue-loader"></script>-->
<script>
// 使用httpVueLoader
Vue.use(httpVueLoader);
new Vue({
el: '#app',
data: {
title: '111'
},
methods: {
clockss() {
}
},
components: {
// 將組建加入組建庫
'my-component': 'url:./app/components/my-component.vue'
}
})
</script>
</body>
</html>
// my-component html使用js
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports = {
data: function() {
return {
who: 'world223232'
}
}
}
</script>
<style>
.hello {
background-color: #ffe;
}
</style>