데이터로 전체 페이지를 바인딩하는 올바른 방법 또는 vuejs 방법은 무엇인가?
녹아웃Js 배경에서 나왔어.요소에 바인딩을 지정하지 않은 경우모델을 사용하여 요소의 전체 페이지를 커버할 수 있다.예를 들어 클릭 이벤트가 발생한 경우 div를 볼 수 있도록 할 수 있다.나는 VueJs와 설명서를 배우고 있다.나는 네가 엘로 원소를 표현해야 하는 vue 인스턴스를 봤구나.
다음과 같은 경우:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})만약 내 버튼이 '#app' div와 같은 div에 있지 않다면?두 vue 인스턴스 간에 통신하는 방법 또는 둘 이상의 요소를 다루기 위해 vue 인스턴스를 사용할 수 있는 방법부에즈 방식이 어때?
내부의 첫 번째 원소에 바인딩하는 것은 매우 일반적이다.<body>.vue는 당신을 속박하지 않을 것이다.body왜냐하면 그들의 행사 청취자들을 거기에 올려놓는 모든 종류의 다른 것들이 있기 때문이다.
그렇게 하면 부에가 페이지 전체를 관리하고 있고, 가버리면 된다.문서들은 한 페이지에 둘 이상의 Vue 인스턴스를 가지고 있는 경우를 다루고 있지만, 나는 문서 밖에서 이것을 발견하지 못했고, 나는 내 머리 위에서 좋은 이유를 생각할 수 없다.보다 일반적으로 루트 Vue 인스턴스의 비트를 지속적으로 잘라내고 "하위" 구성요소로 리팩터링할 수 있다.이렇게 하면 파일 크기를 관리할 수 있고 앱을 구성할 수 있다.
이곳은 많은 사람들이 불필요하게 일을 복잡하게 만드는 곳이다. 과잉 사용으로.props부품을 부품에 전달하기 위해서입니다.구성 요소를 리팩터링하기 시작할 때, 모든 상태를 한 상점에서, 부두 밖에서 유지한 다음 구성 요소가 스토어와 직접 대화하도록 하면 훨씬 더 쉬운 시간을 가질 수 있다.(상점을 에 넣다.data모든 구성 요소의 요소).이러한 패턴(MVVM)은 멋진데, 왜냐하면 많은 상태 요소들이 결국 화면에 둘 이상의 표현을 하게 되고, "단일적인 진실의 원천"을 가지게 되고, 매장 내 품목들 간의 관계를 최소화하면서, 대부분의 일반적인 목적을 위한 복잡성과 코드의 양을 급격히 감소시킬 것이기 때문이다.DOM과 독립적으로 앱 상태를 구성할 수 있다.
따라서 Vue 인스턴스(및 Vue 구성 요소)에 대한 질문에 답하기 위해 서로 많은 대화를 나눌 필요가 없으며, 또한 하지 말아야 한다.그들이 (제3자 부품과 반복된 부품) 필요할 때, 당신은 소품과 이벤트, ref와 메소드 콜(매장 바깥의 상태), 그리고 $parent와 $root 속성(사용료!)을 갖게 된다.이벤트 버스도 만들 수 있다.이 페이지는 옵션을 아주 잘 요약한 것이다.
당신의 가게는 플럭스/리멕스여야 하는가?Vuex는 Vue에 대한 플럭스/저감 패턴의 공식 구현이다.일반적인 농담은, 당신이 그것을 필요로 한다는 것을 깨달았을 때, 너무 늦었다는 것이다.일단 Vuex를 떠나기로 결정했다면 Vue 구성 요소에 상태만 표시하지 마십시오.윈도우 스코프에서 플레인 javascript 객체를 사용한다.올바른 방법은 잘못된 방법보다 쉬우며, 당신이 Vuex로 전환하면 당신의 일은 훨씬 더 간단할 것이다.너의 다운스트림 레퍼런스는 그대로 괜찮다.
행운을 빈다.즐거운 탑승 되세요.
보통 본체 내부의 첫 번째 태그에 기본 Vue 인스턴스를 입력한 다음 나머지 사이트를 그 안에 구축하십시오.해당 인스턴스(내포된 구성요소가 아닌) 내부의 모든 항목이 동일한 항목에 액세스할 수 있음data.
그런 다음 HTML에서 다음 작업을 수행하십시오.
<body>
<div id="#app">
<p v-if="showMessage">{{message}}</p>
<button v-on:click="showMessage = !showMessage"></button>
</div>
</body>
그리고 데이터를 다음과 같은 것으로 설정하십시오.
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
showMessage: true
}
})
나중에 구성 요소 간에 데이터를 전달하려면 Vue를 Vue-CLI로 실행하는 경우(권장 사항) Vue를 사용할 경우 이벤트 내보내는 방법을 찾아보거나 소품을 사용하거나 Vuex를 사용할 수 있는 방법을 찾아보십시오.
기본 Vue 인스턴스 외부에 있는 태그(예: 헤드 태그)에 연결하려면 이를 위한 도구가 있어야 한다.예를 들어 다음과 같이 해보십시오. https://github.com/ktquez/vue-head
생각해본 적 없는데
'programing' 카테고리의 다른 글
| Vuex의 nuxt 구성을 내부 작업으로 가져오는 방법 (0) | 2022.05.03 |
|---|---|
| 분리 vs.결합형 POSIX 스레드 (0) | 2022.05.03 |
| 조건에 따른 VueJS HTML 요소 유형 (0) | 2022.05.03 |
| 죄와 코스를 함께 계산하는 가장 빠른 방법은 무엇일까? (0) | 2022.05.03 |
| C-String을 비우는 적절한 방법 (0) | 2022.05.03 |