Last active
June 9, 2018 17:49
-
-
Save praneetloke/e98f618f9a79a90b8869dab8a72d74c7 to your computer and use it in GitHub Desktop.
Inline rendering of a custom component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div id="app"> | |
<img src="./assets/logo.png"> | |
<div v-show="showMessage">{{message}}</div> | |
<div v-show="items.length > 0">I like</div> | |
<ul> | |
<li v-for="(item, index) in items" v-bind:key="index">{{item}}</li> | |
</ul> | |
<router-view/> | |
<!--This is what we declared as the tag for our custom component--> | |
<test-component/> | |
</div> | |
</template> | |
<script> | |
//Let's import our TestComponent | |
import TestComponentVue from '@/components/TestComponent'; | |
export default { | |
name: 'App', | |
//tell App.vue that we want to declare some components for use in this component | |
components: { | |
// use kebab case for the tag that you will use in the template above and map it to our component | |
// The name part of this can be anything. You could even call the name as 'some-component' and still set its value to TestComponentVue. | |
// However, you should then remember to use the corresponding value in the template above. | |
'test-component': TestComponentVue | |
}, | |
data() { | |
return { | |
showMessage: true, | |
message: 'Hello, World!', | |
items: ['Cake', 'Coding'] | |
}; | |
} | |
}; | |
</script> | |
<style> | |
#app { | |
font-family: 'Avenir', Helvetica, Arial, sans-serif; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
text-align: center; | |
color: #2c3e50; | |
margin-top: 60px; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment