This content originally appeared on CodeSource.io and was authored by Deven
In this article, you will learn about the difference between Vue export default and Vue new.
Vue is a progressive JavaScript framework used to build web interfaces and one-page applications. To work with Vue you need to declare it. Let’s see the ways of declaring it:
Using Vue new:
You can create a Vue instance by calling new Vue(). It is basically a JavaScript Object. The syntax for using it is shown below:
new Vue({
el: '#app',
data () {
return {}
}
)}This refers to the root Vue instance from which the rest of the application comes down. and it will work with the HTML document. See the example below:
Using export default:
Another way is declaring a component. In Vue you can create a component and register it. You may also reuse it later if you needed. Let’s see an example of creating a single component named “TestOne” and reusing it into another component named “TestTwo” in the below section:
// TestOne.vue
export default {
name: 'TestOne',
data () {
return {}
}
}Here, we have defined single component and let’s use it into another component:
// TestTwo.vue
<template>
<TestOne/>
</template>
<script>
import TestOne from './components/TestOne.vue'
export default {
name : 'TestTwo'
components: {
TestOne
}
data () {
return {}
}
----
}
</script>You can see that we can reuse the component “TestOne” in another component named “TestTwo” by using export default. You can use export-default for creating local registration for the Vue component.
The post Vue export default vs Vue new appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Deven
Deven | Sciencx (2021-12-15T10:50:12+00:00) Vue export default vs Vue new. Retrieved from https://www.scien.cx/2021/12/15/vue-export-default-vs-vue-new/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.