Vue '내보내기 기본값'대 '새 Vue'
방금 Vue를 설치하고 몇 가지 자습서를 따라 vue-cli 웹팩 템플릿을 사용하여 프로젝트를 생성했습니다. 구성 요소를 생성 할 때 다음 내부에 데이터를 바인딩하는 것을 알 수 있습니다.
export default {
name: 'app',
data: []
}
다른 튜토리얼에서는 데이터가 바인딩되는 것을 봅니다.
new Vue({
el: '#app',
data: []
)}
차이점은 무엇이며 둘의 구문이 다른 이유는 무엇입니까? vue-cli에서 생성 한 App.vue에서 사용중인 태그 내에서 '새 Vue'코드가 작동하도록하는 데 문제가 있습니다.
신고 할 때 :
new Vue({
el: '#app',
data () {
return {}
}
)}
일반적으로 애플리케이션의 나머지가 내려 오는 루트 Vue 인스턴스입니다. 이것은 html 문서에 선언 된 루트 요소를 중단합니다. 예를 들면 다음과 같습니다.
<html>
...
<body>
<div id="app"></div>
</body>
</html>
다른 구문은 나중에 등록하고 재사용 할 수있는 구성 요소를 선언하는 것입니다. 예를 들어 다음과 같은 단일 파일 구성 요소를 생성하는 경우 :
// my-component.js
export default {
name: 'my-component',
data () {
return {}
}
}
나중에 이것을 가져 와서 다음과 같이 사용할 수 있습니다.
// another-component.js
<template>
<my-component></my-component>
</template>
<script>
import myComponent from 'my-component'
export default {
components: {
myComponent
}
data () {
return {}
}
...
}
</script>
또한 data속성을 함수 로 선언해야 합니다. 그렇지 않으면 반응하지 않습니다.
export default Vue 구성 요소에 대한 로컬 등록을 만드는 데 사용됩니다.
다음은 구성 요소에 대해 자세히 설명하는 훌륭한 기사입니다 https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e
첫 번째 경우 ( export default {...})는 일부 개체 정의를 사용할 수 있도록 만드는 ES2015 구문입니다.
두 번째 경우 ( new Vue (...))는 정의 된 개체를 인스턴스화하기위한 표준 구문입니다.
첫 번째는 JS에서 Vue를 부트 스트랩하는 데 사용되며 둘 중 하나는 구성 요소와 템플릿을 빌드하는 데 사용할 수 있습니다.
See https://vuejs.org/v2/guide/components-registration.html for more details.
<template>
<my-components></my-components>
</template>
<script>
import myComponents from 'my-components'
export default {
components: {
myComponents
}
data () {
return {}
}
created(){},
methods(){}
}
</script>
Whenever you use
export someobject
and someobject is
{
"prop1":"Property1",
"prop2":"Property2",
}
the above you can import anywhere using import or module.js and there you can use someobject. This is not a restriction that someobject will be an object only it can be a function too, a class or an object.
When you say
new Object()
like you said
new Vue({
el: '#app',
data: []
)}
Here you are initiating an object of class Vue.
I hope my answer explains your query in general and more explicitly.
참고URL : https://stackoverflow.com/questions/48727863/vue-export-default-vs-new-vue
'developer tip' 카테고리의 다른 글
| 모든 컨트롤을 대상으로 지정하는 방법 (WPF 스타일) (0) | 2020.10.08 |
|---|---|
| 유형 클래스 MonadPlus, Alternative 및 Monoid의 차이점은 무엇입니까? (0) | 2020.10.08 |
| textNode 값 변경 (0) | 2020.10.08 |
| Github API v3에 가장 적합한 Python 라이브러리 (0) | 2020.10.08 |
| 다시 시작하려면 복구 작업으로 Windows 서비스 설치 (0) | 2020.10.08 |