<!doctype html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="my-app">
<my-component name="Paul"></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>
<template>
<div class="hello">
<input v-model="name" />
<div>Hello {{name}}</div>
<button type="button" @click="imHerb">Herb</button>
</div>
</template>
<script>
module.exports = {
props: {
name: '',
},
methods: {
imHerb: function() {
this.name = "Herb";
}
}
}
</script>
<style scoped>
.hello {
background-color: #ffe;
}
</style>