방금 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>