[vue.js] Vue '내보내기 기본값'과 'New 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 {}
    }
)}

일반적으로 나머지 응용 프로그램의 하위 루트 루트 인스턴스입니다. 이렇게하면 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를 부트 스트랩하는 데 사용되며 둘 중 하나는 구성 요소 및 템플릿을 빌드하는 데 사용될 수 있습니다.

자세한 내용은 https://vuejs.org/v2/guide/components-registration.html 을 참조하십시오.

답변

사용할 때마다

export someobject

그리고 어떤 대상은

{
 "prop1":"Property1",
 "prop2":"Property2",
}

당신이 위의 사용하여 어디서든 가져올 수 있습니다 import또는 module.js당신은 SomeObject의이 사용할 수 있습니다. 이것은 어떤 객체가 객체가 될 것이라는 제한이 아니며, 클래스 또는 객체 일 수도 있습니다.

당신이 말할 때

new Object()

네가 말했듯이

new Vue({
  el: '#app',
  data: []
)}

여기서 Vue 클래스의 객체를 시작합니다.

내 답변이 귀하의 쿼리를 일반적이고 더 명확하게 설명하기를 바랍니다.

답변

<template>
  <my-components></my-components>
</template>
<script>
  import myComponents from 'my-components'
  export default {
    components: {
      myComponents
    }
    data () {
      return {}
    }
    created(){},
    methods(){}
  }
</script>