Files
wails/cmd/templates/vuebasic/frontend/src/components/HelloWorld.vue
2019-02-15 21:11:42 +11:00

56 lines
938 B
Vue

<template>
<div class="container">
<h1>{{message}}</h1>
<a @click="getMessage">Press Me!</a>
</div>
</template>
<script>
export default {
data() {
return {
message: " "
};
},
methods: {
getMessage: function() {
var self = this;
window.backend.basic().then(result => {
self.message = result;
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
margin-top: 2em;
position: relative;
min-height: 5rem;
width: 100%;
}
a:hover {
font-size: 1.7em;
border-color: blue;
background-color: blue;
color: white;
border: 3px solid white;
border-radius: 10px;
padding: 9px;
cursor: pointer;
transition: 500ms;
}
a {
font-size: 1.7em;
border-color: white;
background-color: #121212;
color: white;
border: 3px solid white;
border-radius: 10px;
padding: 9px;
cursor: pointer;
}
</style>