Vue: 2.0 변겜 사항

에 만든 2016년 05월 14음  Â·  210윔멘튞  Â·  출처: vuejs/vue

읎것은 띌읎람 묞서입니닀. 마지막 업데읎튞: 2.0.0-rc.2 Ʞ쀀 2016년 8월 17음

음반 ì°žê³  사항

  • 첎크된 항목은 2.0 개발 람랜치에서 구현되었음을 의믞합니닀.
  • Ʞ능은 개발 쀑에 변겜될 수 있습니닀.
  • 죌요 변겜 목록은 개발 쀑에 완전하지 않을 수 있습니닀.

  • 마지막에 몇 가지 업귞레읎드 팁 읎 있습니닀.

    높은 수쀀의 변겜 사항

  • 템플늿 파서는 더 읎상 DOM에 의졎하지 않습니닀(싀제 DOM을 템플늿윌로 사용하지 않는 한). 묞자엎 템플늿( <script type="text/x-template"> , 읞띌읞 JavaScript 묞자엎 또는 닚음 파음 구성 요소륌 통핎 컎파음되는 한) ), 더 읎상 1.x 의 el 옵션을 사용하여 êž°ì¡Ž 윘텐잠륌 템플늿윌로 사용하여 요소에 탑재하는 겜우에도 읎러한 제한 사항읎 적용됩니닀.

  • 컎파음러(템플늿 묞자엎을 렌더 핚수로 변환하는 부분)와 런타임을 읎제 분늬할 수 있습니닀. 두 가지 닀륞 빌드가 있습니닀.

    • 독늜 싀행형 빌드: 컎파음러 와 런타임을 몚두 포핚합니닀. 읎것은 Ʞ볞적윌로 Vue 1.x가 하는 것곌 정확히 동음한 Ʞ능을 합니닀.
    • 런타임 전용 빌드: 컎파음러가 포핚되얎 있지 않윌므로 컎파음 닚계에서 믞늬 컎파음된 템플늿읎나 수동윌로 작성된 렌더 핚수가 필요합니닀. npm 팚킀지는 Ʞ볞적윌로 읎 빌드륌 낎볎냅니닀. npm에서 Vue륌 사용할 때 vueify 또는 vue-loader 가 싀행되는 동안 컎파음 닚계(Browserify 또는 Webpack 포핚)륌 사용할 가능성읎 높Ʞ 때묞입니닀. 템플늿 사전 컎파음.

      전역 구성

  • [x] Vue.config.silent

  • [x] Vue.config.optionMergeStrategies
  • [x] Vue.config.devtools
  • [x] Vue.config.errorHandler new - 구성 요소 렌더링 및 감시자 동안 포착되지 않은 였류륌 처늬하Ʞ 위한 전역 후크(Ʞ볞 동작은 제자늬에 던지는 였류 슀택을 Ʞ록하는 것입니닀)
  • [x] Vue.config.keyCodes new - v-on 대한 사용자 지정 í‚€ 별칭을 구성합니닀.
  • Vue.config.debug는 더 읎상 사용되지 않윌며 Ʞ볞적윌로 슀택 추적곌 핚께 겜고가 제공되므로 더 읎상 유용하지 않습니닀.
  • Vue.config.async는 더 읎상 사용되지 않윌며 렌더링 성능에는 비동Ʞ가 필요합니닀.
  • Vue.config.delimiters 가 구성 요소 수쀀 옵션윌로 재작업됚

  • Vue.config.unsafeDelimiters 더 읎상 사용되지 않음, v-html 사용

    Ꞁ로벌 API

  • [x] Vue.extend

  • [x] Vue.nextTick
  • [x] 뷰셋
  • [x] Vue.delete
  • [x] Vue.directive
  • [x] Vue.component
  • [x] ë·° 사용
  • [x] Vue.mixin
  • [x] Vue.compile new(독늜 싀행형 빌드에서만)
  • [x] Vue.transition

    • stagger는 더 읎상 사용되지 않윌며 대신 el 에서 데읎터 읞덱슀륌 섀정하고 액섞슀합니닀.

  • [x] ë·° 필터
  • Vue.elementDirective는 더 읎상 사용되지 않윌며 구성 요소만 사용하십시였.
  • Vue.partial은 더 읎상 사용되지 않윌며 Ʞ능 구성 요소륌 사용합니닀.

    옵션

데읎터
  • [x] 데읎터
  • [x] 소품

    • [x] 소품 유횚성 검사

    • [x] Ʞ볞값

    • 강제 사용되지 않습니닀.

    • prop 바읞딩 몚드가 더 읎상 사용되지 않음(v-model은 구성 요소에서 작동할 수 있음)

  • [x] propsData 새 항목, 읞슀턎슀화 전용
  • [x] 계산됚
  • [x] 방법

  • [x] 시계

    DOM

  • [x] 엘

  • [x] 템플늿
  • [x] 새로 렌더링

  • 더 읎상 사용되지 않는 교첎 , 읎제 구성 요소에는 정확히 하나의 룚튞 요소가 있얎알 합니닀 .

    수명 죌Ʞ 후크

  • [x] 생성 전에 쎈Ʞ화

  • [x] 생성됚
  • [x] 전파ꎎ
  • [x] 파ꎎ
  • [x] 읎전에 새로욎 마욎튞
  • [x] 새로 장착됚
  • [x] 새로욎 업데읎튞 전
  • [x] 새로 업데읎튞됚
  • [x] 새로 활성화됚
  • [x] 비활성화된 신규(연결 유지용)
  • [X] 쀀비되지, 사용 (에-묞서 될 수있는 볎장읎 더 읎상 거Ʞ에) 장착 없습니닀
  • 더 읎상 사용되지 않는 활성화 , vue-router로 읎동
  • beforeCompile 더 읎상 사용되지 않음, 생성된 사용
  • 더 읎상 사용되지 않는 컎파음 , 마욎튞 된 사용
  • 더 읎상 사용되지 않는 첚부 , 닀륞 후크에서 사용자 정의 낎부 검사 사용

  • detached 더 읎상 사용되지 않음, 위와 동음

    자산

  • [x] 지시묞

  • [x] 구성 요소
  • [x] 전환
  • [x] 필터
  • 부분 사용 쀑닚

  • 더 읎상 사용되지 않는 elementDirectives

    Ʞ타

  • [x] 부몚

  • [x] 믹슀읞
  • [x] 읎늄
  • [x] 확장
  • [x] 구분 Ʞ혞가 새로 추가되얎 원래 전역 구성 옵션을 대첎합니닀.
  • [x] 새로욎 Ʞ능

  • 읎벀튞는 더 읎상 읎벀튞 전파하Ʞ 때묞에, 사용되지 않는

    읞슀턎슀 속성

  • [x] vm.$data

  • [x] vm.$el
  • [x] VM.$옵션
  • [x] vm.$parent
  • [x] vm.$root
  • [x] vm.$children
  • [x] vm.$refs
  • vm.$els 더 읎상 사용되지 않음, $refs와 병합됚

    읞슀턎슀 메소드

데읎터
  • [x] vm.$watch
  • vm.$get 더 읎상 사용되지 않음, 값을 직접 검색하Ʞ만 하멎 됩니닀.
  • vm.$set 더 읎상 사용되지 않음, Vue.set 사용
  • vm.$delete 더 읎상 사용되지 않음, Vue.delete 사용
  • vm.$eval은 더 읎상 사용되지 않윌며 싀제 사용되지 않습니닀 .
  • vm.$interpolate 더 읎상 사용되지 않음

  • vm.$log 더 읎상 사용되지 않음, devtools 사용

    읎벀튞

  • [x] vm.$on

  • [x] vm.$once
  • [x] vm.$off
  • [x] vm.$emit
  • vm.$dispatch는 더 읎상 사용되지 않윌며 전역 읎벀튞 버슀 또는 Vuex륌 사용합니닀.

  • vm.$broadcast 더 읎상 사용되지 않음, 위와 동음

    DOM

  • [x] vm.$nextTick

  • vm.$appendTo는 더 읎상 사용되지 않윌며 vm.$el에서 Ʞ볞 DOM API만 사용하섞요.
  • vm.$before 사용되지 않음
  • vm.$읎후 더 읎상 사용되지 않음

  • vm.$remove 더 읎상 사용되지 않음

    수명 죌Ʞ

  • [x] VM.$마욎튞

  • [x] vm.$destroy

    지시묞

  • [x] v-텍슀튞

  • [x] v-html 읎지만 {{{ }}} 속Ʞ는 더 읎상 사용되지 않습니닀.
  • [x] v-if
  • [x] v-쇌
  • [x] v-else
  • [x] v-for

    • [x] í‚€(튞랙바읎 대첎)

    • [x] 객첎 v-for

    • [x] 범위 v-for

    • [x] 읞수 순서 업데읎튞: (value, index) in arr , (value, key, index) in obj

    • $index 및 $key 지원 쀑닚됚

  • [x] 람읎옚

    • [x] 수정자

    • [x] 자식 구성 요소

    • [x] 사용자 정의 í‚€ 윔드(읎제 Vue.config.keyCodes 대신 Vue.directive('on').keyCodes )

  • [x] v-바읞드

    • [x] 소품윌로

    • [x] xlink

    • [x] 바읞드 객첎

  • [x] v- 바읞드:슀타음

    • [x] 접두사 슀니핑

  • [x] v- 바읞드:큎래슀
  • [x] v-몚덞

    • [x] 게윌늄(수정자로)

    • [x] 숫자(수정자)

    • [x] 합성 읎벀튞 묎시

    • 더 읎상 사용되지 않는 디바욎슀 , v-on:input + 타사 디바욎슀 Ʞ능 사용

  • [x] v-망토
  • [x] v-pre
  • [x] v-한 번 새로욎
  • v-ref는 읎제 ref 와 같은 특수 속성음 뿐입니닀.

  • v-el 더 읎상 사용되지 않음(ref와 병합됚)

    특수 구성품

  • [x] <component>

    • [x]:읎닀
    • [x] 비동Ʞ 구성 요소
    • [x] 읞띌읞 템플늿
  • [x] <transition>
  • [x] <transition-group>
  • [x] <keep-alive>
  • [x] <slot>

  • 부분적윌로 사용되지 않음

    특수 속성

  • [x] í‚€

  • [x] ì°žì¡°

  • [x] 슬롯

    서버 ìž¡ 렌더링

  • [x] 렌더링할 묞자엎

  • [x] 렌더투슀튞늌
  • [x] 큎띌읎얞튞 ìž¡ 수화

    Ʞ타 죌요 변겜 사항

v-for 반복 구묞 변겜

  • $index 및 $key 쀑닚

    읎 두 가지 몚두 더 명시적읞 명명된 읞덱슀와 킀륌 위핎 더 읎상 사용되지 않습니닀. 읎 구묞은 앜간 마술적읎며 쀑첩 룚프에 제한읎 있습니닀. 볎너슀로, 새로 옚 사람듀읎 ë°°ìšž 수 있는 구묞의 포읞튞가 두 개 더 적습니닀.

  • 새로욎 ë°°ì—Ž 구묞

    • value in arr

    • (value, index) in arr (자바슀크늜튞의 forEach 및 map 와 더 음ꎀ성을 갖도록 읞수 순서 전환)

  • 새 개첎 구묞

    • value in obj

    • (value, key) in obj (읞수 순서 전환, 부분적윌로 lodash와 같은 많은 공통 객첎 반복자와 더 음ꎀ성읎 있음)

    • (value, key, index) in obj (읎제 테읎랔 슀튞띌읎핑곌 같은 시각적 목적을 위핎 객첎 반복에서 읞덱슀륌 사용할 수 있음)

      지시묞 읞터페읎슀 변겜


음반적윌로 2.0에서 지시묞은 책임 범위가 크게 축소되었습니닀. 읎제 저수쀀 직접 DOM 조작을 적용하는 데만 사용됩니닀. 대부분의 겜우 컎포넌튞륌 Ʞ볞 윔드 재사용 추상화로 사용하는 것을 선혞핎알 합니닀.

지시묞에는 더 읎상 읞슀턎슀가 없습니닀. 슉, 지시묞 후크 낎부에 더 읎상 this 가 없고 bind , update 및 unbind 읎제 몚든 것을 읞수로 받습니닀.

binding 개첎는 변겜할 수 없윌며 binding.value 섀정핎도 횚곌가 없윌며 추가된 속성읎 유지되지 않습니닀. 닀음읎 절대적윌로 필요한 겜우 el 에 대한 지시묞 상태륌 유지할 수 있습니닀.

<div v-example:arg.modifier="a.b"></div>

// example directive
export default {
  bind (el, binding, vnode) {
    // the binding object exposes value, oldValue, expression, arg and modifiers.
    binding.expression // "a.b"
    binding.arg // "arg"
    binding.modifiers // { modifier: true }
    // the context Vue instance can be accessed as vnode.context.
  },

  // update has a few changes, see below
  update (el, binding, vnode, oldVnode) { ... },

  // componentUpdated is a new hook that is called AFTER the entire component
  // has completed the current update cycle. This means all the DOM would
  // be in updated state when this hook is called. Also, this hook is always
  // called regardless of whether this directive's value has changed or not.
  componentUpdated (el, binding, vnode, oldVNode) { ... },

  unbind (el, binding, vnode) { ... }
}

값에만 ꎀ심읎 있는 겜우 구조 제거륌 사용할 수 있습니닀.

export default {
  bind (el, { value }) {
    // ...
  }
}

또한 update 후크에는 몇 가지 변겜 사항읎 있습니닀.

  1. bind 읎후에는 더 읎상 자동윌로 혞출되지 않습니닀.
  2. 읎제 바읞딩된 값읎 변겜되었는지 여부에 ꎀ계없읎 구성 요소가 닀시 렌더링될 때 항상 혞출을 받습니닀. binding.value === binding.oldValue 륌 비교하여 불필요한 업데읎튞륌 걎너뛞 수 있지만 항상 업데읎튞륌 적용하렀는 겜우도 있습니닀.

elementDirective , 지시묞 맀개변수 및 acceptStatement , deep 등곌 같은 지시묞 옵션은 몚두 더 읎상 사용되지 않습니닀.

필터 사용 및 구묞 변겜

Vue 2.0에서는 필터 시슀템에 몇 가지 변겜 사항읎 있습니닀.

  1. 필터는 읎제 텍슀튞 볎간( {{}} 태귞) 낎에서만 사용할 수 있습니닀. 곌거에는 v-model , v-on 등곌 같은 지시묞곌 핚께 필터륌 사용하는 것읎 펞늬핚볎닀 더 복잡하닀는 것을 발견했윌며 v-for 에 대한 목록 필터링의 겜우 더 적절합니닀. 핎당 녌늬륌 계산된 속성윌로 JavaScript로 읎동합니닀.
  2. Vue 2.0은 낎장 필터와 핚께 제공되지 않습니닀. 귞것은, 예륌 듀얎, 특정 영역에서 묞제륌 핎결하Ʞ 위핎 최선을 닀하고 사용 독늜형 띌읎람러늬에 추천 moment.js 날짜와 서식에 대한 accounting.js을 ꞈ융 통화 칎드륌 포맷합니닀. 자신만의 필터 팩을 만듀얎 컀뮀니티와 공유할 수도 있습니닀!
  3. 필터 구묞은 공백윌로 구분된 읞수륌 사용하는 대신 JavaScript 핚수 혞출곌 핚께 읞띌읞윌로 변겜되었습니닀.

{{ date | formatDate('YY-MM-DD') }}

전환 시슀템

전환 CSS 큎래슀 변겜 사항:

Always-on v-transition 큎래슀는 더 읎상 추가되지 않윌며 Vue는 읎제 Angular 및 React CSSTransitionGroup곌 동음한 큎래슀륌 사용합니닀.

  • v-enter : 요소가 삜입되Ʞ 전에 적용되고 1틱 후에 제거됩니닀. (입력을 위한 시작 상태)
  • v-enter-active : 요소가 삜입되Ʞ 전에 적용되고 전환/애니메읎션읎 완료되멎 제거됩니닀. (활성화 + 엔터륌 위한 종료 상태)
  • v-leave : 퇎사 전환 발생시 바로 적용, 1틱 후 삭제(퇎사 시작 상태)
  • v-leave-active : 나가Ʞ 전환읎 튞늬거되멎 바로 적용되고 전환/애니메읎션읎 완료되멎 제거됩니닀. (활성 + 휎가 종료 상태)

v-enter-active 및 v-leave-active 는 진입/퇎장 전환에 대핮 닀륞 읎징 곡선을 지정할 수 있는 Ʞ능을 제공합니닀. 대부분의 겜우 업귞레읎드는 닚순히 현재 v-leave 륌 v-leave-active 바꟞는 것을 의믞합니닀. (CSS 애니메읎션의 겜우 v-enter-active + v-leave-active )

전환 API 변겜

  • <transition> 구성 요소

    읎제 몚든 닚음 요소 전환 횚곌는 대상 요소/구성 요소륌 <transition> 낎장 구성 요소로 래핑하여 적용됩니닀. 읎것은 추상 구성 요소입니닀. 슉, 추가 DOM 요소륌 렌더링하지 않윌며 검사된 구성 요소 계잵 구조에 표시되지 않습니닀. 닚순히 낎부의 래핑된 윘텐잠에 전환 동작을 적용합니닀.

    가장 ê°„ë‹ší•œ 사용 예:

    <transition>
<div v-if="ok">toggled content</div>
</transition>

    구성 요소는 읎전 전환 정의 옵션에 직접 맀핑되는 여러 소품 및 읎벀튞륌 정의합니닀.

    소품

    • 읎늄: 묞자엎

    전환 CSS 큎래슀 읎늄을 자동윌로 생성하는 데 사용됩니닀. 예륌 듀얎 name: 'fade' 는 .fade-enter , .fade-enter-active 등윌로 자동 확장됩니닀. Ʞ볞값은 "v" 입니닀.

    • 표시: 부욞

    쎈Ʞ 렌더링에 전환을 적용할지 여부입니닀. Ʞ볞값은 false 입니닀.

    • CSS: 부욞

    CSS 전환 큎래슀륌 적용할지 여부입니닀. Ʞ볞값은 true 입니닀. false 로 섀정하멎 구성 요소 읎벀튞륌 통핎 등록된 JavaScript 후크만 튞늬거합니닀.

    • 유형: 묞자엎

    전환 종료 타읎밍을 결정하Ʞ 위핎 대Ʞ할 전환 읎벀튞의 유형을 지정합니닀. 사용 가능한 값은 "transition" 및 "animation" 입니닀. Ʞ볞적윌로 지속 시간읎 더 ꞎ 유형을 자동윌로 감지합니닀.

    • 몚드: 묞자엎

    퇎장/진입 전환의 타읎밍 순서륌 제얎합니닀. 사용 가능한 몚드는 "out-in" 및 "in-out" . Ʞ볞값은 동시입니닀.

    • enterClass, leaveClass, enterActiveClass, leaveActiveClass, 출현큎래슀, 출현액티람큎래슀: 묞자엎

    전환 CSS 큎래슀륌 개별적윌로 구성합니닀.

    동적 구성요소에 전환을 적용하는 예:

    <transition name="fade" mode="out-in" appear>
<component :is="view"></component>
</transition>

    읎벀튞

    1.x API에서 사용할 수 있는 JavaScript 후크에 핎당합니닀.

    • 듀얎가Ʞ 전에
    • 시작하닀
    • 입력 후
    • 출발 전
    • 떠나닀
    • 퇎귌 후
    • 등장하Ʞ 전에
    • 나타나닀
    • 등장 후

    예시:

    <transition @after-enter="transitionComplete">
<div v-show="ok">toggled content</div>
</transition>

    진입 전환읎 완료되멎 전환된 DOM 요소륌 읞수로 사용하여 구성 요소의 transitionComplete 메서드가 혞출됩니닀.

    몇 가지 ì°žê³  사항:

    • leave-cancelled 은(는) 더 읎상 삜입/제거에 사용할 수 없습니닀. 휎가 전환읎 시작되멎 췚소할 수 없습니닀. 귞러나 v-show 전환에는 여전히 사용할 수 있습니닀.
    • enter 및 leave 후크의 겜우 1.0곌 유사하게 두 번짞 읞수로 cb 가 있윌멎 사용자가 전환 종료 타읎밍을 명시적윌로 제얎하Ʞ륌 원한닀는 것을 나타냅니닀.

  • <transition-group> 구성 요소

    읎제 몚든 닀쀑 요소 전환 횚곌는 <transition-group> 낎장 구성 요소로 요소륌 래핑하여 적용됩니닀. <transition> 와 동음한 소품곌 읎벀튞륌 녞출합니닀. 찚읎점은 닀음곌 같습니닀.

    1. <transition> 와 달늬 <transition-group> 는 싀제 DOM 요소륌 렌더링합니닀. Ʞ볞적윌로 <span> 륌 렌더링하며 tag 소품을 통핎 ì–Žë–€ 요소가 렌더링되얎알 하는지 구성할 수 있습니닀. is 속성곌 핚께 사용할 수도 있습니닀(예: <ul is="transition-group"> .
    2. <transition-group> 는 mode 소품을 지원하지 않습니닀.
    3. <transition-group> 몚든 자식은 고유한 킀가 있얎알 합니닀.

    예시:

    <transition-group tag="ul" name="slide">
<li v-for="item in items" :key="item.id">
  {{ item.text }}
</li>
</transition-group>

    읎동 전환

    <transition-group> 는 CSS 변환을 통한 읎동 전환 을 지원합니닀. 업데읎튞 후 화멎에서 자녀의 위치가 변겜되멎 움직읎는 CSS 큎래슀가 적용됩니닀( name 소품에서 자동 생성되거나 moveClass 소품윌로 구성됚). 움직읎는 큎래슀가 적용될 때 CSS transform 속성읎 "전환 가능"읎멎 요소는 FLIP Ʞ술을 사용하여 대상윌로 부드럜게 애니메읎션됩니닀.

    여Ʞ에서 띌읎람 데몚륌 확읞 하섞요.

  • 재사용 가능한 전환 생성

    읎제 전환읎 구성 요소륌 통핎 적용되므로 더 읎상 자산 유형윌로 간죌되지 않윌므로 전역 Vue.transition() 메서드와 transition 옵션은 몚두 더 읎상 사용되지 않습니닀. 구성 요소 소품 및 읎벀튞륌 사용하여 전환 읞띌읞을 구성할 수 있습니닀. 귞러나 읎제 재사용 가능한 전환 횚곌, 특히 사용자 지정 JavaScript 후크가 있는 전환 횚곌륌 만드는 방법은 묎엇입니까? 답은 고유한 전환 구성 요소륌 만드는 것입니닀(특히 Ʞ능 구성 요소로 적합핚).

    Vue.component('fade', {
functional: true,
render (createElement, { children }) {
  const data = {
    props: {
      name: 'fade'
    },
    on: {
      beforeEnter () { /* ... */ }, // <-- Note hooks use camelCase in JavaScript (same as 1.x)
      afterEnter () { /* ... */ }
    }
  }
  return createElement('transition', data, children)
}
})

    귞런 닀음 닀음곌 같읎 사용할 수 있습니닀.

    <fade>
<div v-if="ok">toggled content</div>
</fade>

    v-몚덞 변겜 사항

  • lazy 및 number 맀개변수는 읎제 수정자입니닀.

    <input v-model.lazy="text">
  • 새 수정자: .trim - 읎늄에서 알 수 있듯읎 입력을 자늅니닀.
  • debounce 맀개변수는 더 읎상 사용되지 않습니닀. (하닚의 업귞레읎드 팁 ì°žì¡°)

  • v-model 는 더 읎상 쎈Ʞ 읞띌읞 value 신겜 쓰지 않습니닀. 항상 Vue 읞슀턎슀 데읎터륌 진싀의 소슀로 췚꞉합니닀. 읎는 닀음읎 2 대신 1 값윌로 렌더링됚을 의믞합니닀.

    data: {
val: 1
}

    <input v-model="val" value="2">

    êž°ì¡Ž 윘텐잠가 있는 <textarea> 마찬가지입니닀. 따띌서 대신:

    <textarea v-model="val">hello world</textarea>

    하닀:

    data () {
return {
  val: 'hello world'
}
}

    <textarea v-model="val"></textarea>

    죌요 아읎디얎는 JS 잡읎 템플늿읎 아니띌 진싀의 소슀로 간죌되얎알 한닀는 것입니닀.

  • v-model v-for 반복되는 Ʞ볞 값에 사용할 때 v-model 가 더 읎상 작동하지 않습니닀.

    <input v-for="str in strings" v-model="str">

    읎것은 JavaScript에서 닀음곌 동음하Ʞ 때묞에 작동하지 않습니닀.

    strings.map(function (str) {
return createElement('input', ...)
})

    볎시닀시플 str 륌 iterator 핚수의 닀륞 값윌로 섀정하멎 핚수 범위의 지역 변수음 뿐읎므로 아묎 작업도 수행하지 않습니닀. 대신 v-model 가 개첎의 필드륌 업데읎튞할 수 있도록 개첎 배엎을 사용핎알 합니닀.

    <input v-for="obj in objects" v-model="obj.str">

    소품 행동

  • .once 및 .sync 는 더 읎상 사용되지 않습니닀. 읎제 소품은 항상 닚방향입니닀. 상위 범위에서 부작용을 생성하렀멎 구성 요소가 암시적 바읞딩에 의졎하는 대신 명시적윌로 읎벀튞륌 낎볎낎알 합니닀.

  • 로컬에서 prop을 변겜하는 것은 읎제 안티 팚턎윌로 간죌됩니닀. 예륌 듀얎 prop a ì„ ì–ží•œ 닀음 구성 요소에서 this.a = someOtherValue 륌 섀정합니닀. 새로욎 렌더링 메컀니슘윌로 읞핎 상위 구성 요소가 닀시 렌더링될 때마닀 하위 구성 요소의 로컬 변겜 사항을 덮얎씁니닀. 음반적윌로 2.0 에서는 props륌 immutable로 처늬 í•Žì•Œ 합니닀. prop을 변겜하는 대부분의 사용 사례는 데읎터 속성읎나 계산된 속성윌로 대첎될 수 있습니닀.

    ì‚Žì•„ 유지

keep-alive 는 더 읎상 특수 속성읎 아닙니닀. 읎제 <transition> 와 유사한 래퍌 구성 요소입니닀.

  <keep-alive>
    <component :is="view"></component>
  </keep-alive>

읎렇게 하멎 여러 조걎부 자식에 keep-alive 륌 사용할 수 있습니닀(자식은 ê²°êµ­ 닚음 자식윌로 평가되얎알 합니닀. 첫 번짞 자식 읎왞의 자식은 묎시됚).

  <keep-alive>
    <comp-a v-if="a > 1"></comp-a>
    <comp-b v-else></comp-b>
  </keep-alive>

<transition> 와 핚께 사용하는 겜우 낎부에 쀑첩핎알 합니닀.

  <transition>
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>
  </transition>

슬롯

  • 동음한 템플늿에 동음한 읎늄을 가진 쀑복 <slot> 가 더 읎상 지원되지 않습니닀. 슬롯읎 렌더링되멎 "소진"되얎 동음한 렌더링 튞늬의 닀륞 위치에서 렌더링할 수 없습니닀.

  • <slot> 띌는 읎늄을 통핎 삜입된 윘텐잠는 더 읎상 slot 속성을 유지하지 않습니닀. 래퍌 요소륌 사용하여 슀타음을 지정하거나 고꞉ 사용 사례의 겜우 렌더링 Ʞ능을 사용하여 프로귞래밍 방식윌로 삜입된 윘텐잠륌 수정합니닀.

    ì°žì¡°

  • v-ref 는 읎제 더 읎상 지시묞읎 아닙니닀. 읎제 key 및 transition 와 유사한 특수 속성입니닀.

    <!-- before -->
<comp v-ref:foo></comp>

<!-- after -->
<comp ref="foo"></comp>

    읎제 동적 ì°žì¡° 바읞딩도 지원됩니닀.

    <comp :ref="dynamicRef"></comp>
  • vm.$els 및 vm.$refs 읎 병합됩니닀. 음반 요소에서 사용될 때 ref는 DOM 요소가 될 것읎고 컎포넌튞에서 사용될 때 찞조는 컎포넌튞 읞슀턎슀가 될 것입니닀.

  • vm.$refs 는 렌더링 프로섞슀 자첎 쀑에 등록/업데읎튞되Ʞ 때묞에 더 읎상 반응하지 않습니닀. 반응형윌로 만듀렀멎 몚든 변겜에 대핮 쀑복 렌더링읎 필요합니닀.

    반멎에 $refs 은 죌로 JavaScript의 프로귞래밍 방식 액섞슀륌 위핎 섀계되었습니닀. 읞슀턎슀 자첎에 속하지 않는 상태륌 ì°žì¡°í•Žì•Œ 하Ʞ 때묞에 템플늿에서 $refs 에 의졎하는 것은 권장되지 않습니닀.

    Ʞ타

  • track-by 가 key 로 대첎되었습니닀. 읎제 속성 바읞딩에 대핮 동음한 규칙을 따늅니닀. v-bind: 또는 : 접두사가 없윌멎 늬터럎 묞자엎 로 처늬됩니닀. 대부분의 겜우 묞자엎 í‚€ 대신 전첎 표현식읎 필요한 동적 바읞딩을 사용하렀고 합니닀. 예륌 듀얎:

    <!-- 1.x -->
<div v-for="item in items" track-by="id">

<!-- 2.0 -->
<div v-for="item in items" :key="item.id">

  • 속성 낎부 볎간은 더 읎상 사용되지 않습니닀.

    <!-- 1.x -->
<div id="{{ id }}">

<!-- 2.0 -->
<div :id="id">

  • 속성 바읞딩 동작 변겜: 속성을 바읞딩할 때 null , undefined 및 false 만 거짓윌로 간죌됩니닀. 읎것은 0 및 빈 묞자엎읎 있는 귞대로 렌더링됚을 의믞합니닀. 엎거된 속성의 겜우. 읎것은 :draggable="''" 가 draggable="true" 로 렌더링된닀는 것을 의믞합니닀.

    또한 엎거된 속성의 겜우 위의 거짓 값 왞에도 "false"의 묞자엎 값도 attr="false"로 렌더링됩니닀.

  • v-on 사용자 지정 구성 요소에서 사용하멎 읎제 핎당 구성 요소에서 $emitted 사용자 지정 읎벀튞륌 수신 대Ʞ합니닀. (더 읎상 DOM 읎벀튞륌 수신하지 않음)
  • v-else 는 더 읎상 v-show 와 핚께 작동하지 않습니닀. 귞냥 부정 표현을 사용하섞요.
  • 음회성 바읞딩( {{* foo }} )은 더 읎상 사용되지 않습니닀. 대신 v-once 사용하섞요.
  • Array.prototype.$set/$remove 사용되지 않음(대신 Vue.set 또는 Array.prototype.splice 사용)
  • :style 는 더 읎상 읞띌읞을 지원하지 않습니닀. !important
  • 룚튞 읞슀턎슀는 더 읎상 템플늿 소품을 사용할 수 없습니닀(대신 propsData 사용).
  • el 옵션은 더 읎상 Vue.extend 에서 사용할 수 없습니닀. 읎제 읞슀턎슀 생성 옵션윌로만 사용할 수 있습니닀.
  • Vue.set 및 Vue.delete 는 Vue 읞슀턎슀에서 작동할 수 없습니닀. 읎제 data 옵션에서 몚든 최상위 반응 속성을 올바륎게 ì„ ì–ží•Žì•Œ 합니닀.
  • 읎제 구성 요소 읞슀턎슀의 룚튞 $data 륌 바꟞는 것도 ꞈ지됩니닀. 읎것은 반응성 시슀템의 음부 엣지 쌀읎슀륌 방지하고 구성 요소 상태륌 볎닀 예잡 가능하게 만듭니닀(특히 유형 검사 시슀템의 겜우).

  • vm.$watch 륌 통핎 생성된 사용자 감시자는 읎제 연결된 구성 요소가 닀시 렌더링되Ʞ 전에 싀행됩니닀. 읎륌 통핎 사용자는 구성 요소륌 닀시 렌더링하Ʞ 전에 닀륞 상태륌 추가로 업데읎튞할 수 있윌므로 불필요한 업데읎튞륌 플할 수 있습니닀. 예륌 듀얎 구성 요소 소품을 볎고 소품읎 변겜되멎 구성 요소 자첎 데읎터륌 업데읎튞할 수 있습니닀.

    구성 요소 업데읎튞 후 DOM윌로 작업을 수행하렀멎 업데읎튞된 수명 죌Ʞ 후크륌 사용하Ʞ만 하멎 됩니닀.

    업귞레읎드 팁

$dispatch 및 $broadcast 사용 쀑닚을 처늬하는 방법

$dispatch 및 $broadcast 사용하지 않는 읎유는 구성 요소 튞늬 구조에 의졎하는 읎벀튞 흐늄읎 구성 요소 튞늬가 컀질 때 추론하Ʞ 얎렀욞 수 있Ʞ 때묞입니닀(간닚히 말핎서: 큰 앱에서 잘 확장되며 나쀑에 고통을 겪을 수 있도록 섀정하고 싶지 않습니닀.) $dispatch 및 $broadcast 도 형제 구성 요소 간의 통신을 핎결하지 않습니닀. 대신 Node.js 의 

var bus = new Vue()

// in component A's method
bus.$emit('id-selected', 1)

// in component B's created hook
bus.$on('id-selected', this.someMethod)

귞늬고 $off륌 사용하여 읎벀튞 바읞딩을 핎제하는 것을 잊지 마십시였.

// in component B's destroyed hook
bus.$off('id-selected', this.someMethod)

읎 팚턎은 ê°„ë‹ší•œ 시나늬였에서 $dispatch 및 $broadcast 륌 대첎할 수 있습니닀. 귞러나 더 복잡한 겜우에는 Vuex륌 사용하여 전용 상태 ꎀ늬 계잵을 도입하는 것읎 좋습니닀.

ë°°ì—Ž 필터의 사용 쀑닚을 처늬하는 방법은 묎엇입니까?

필터의 볎닀 음반적읞 사용 쀑 하나읞 v-for 륌 사용한 목록 필터링의 겜우 읎제 원볞 배엎의 처늬된 복사볞을 반환하는 계산된 속성을 사용하는 것읎 좋습니닀( 업데읎튞된 데읎터 귞늬드 예제 ì°žì¡°). 읎점은 더 읎상 임의의 필터 구묞/API에 의핎 제한되지 않는닀는 것입니닀. 읎제 닚순한 JavaScript읎며 계산된 속성읎Ʞ 때묞에 필터링된 결곌에 자연슀럜게 액섞슀할 수 있습니닀.

또한 읎 토론 슀레드륌 찞조하십시였.

debounce 대한 v-model debounce 의 사용 쀑닚을 처늬하는 방법 v-model 묎엇입니까?

디바욎싱은 Ajax 요청 및 Ʞ타 비용읎 많읎 드는 작업을 싀행하는 빈도륌 제한하는 데 사용됩니닀. v-model 대한 Vue의 debounce 속성 맀개변수륌 사용하멎 읎륌 쉜게 수행할 수 있지만 제한읎 따륎는 값비싌 작업 자첎볎닀는 _상태 업데읎튞_륌 디바욎슀합니닀.

읎러한 제한 사항은 검색 표시Ʞ륌 디자읞할 때 분명핎집니닀. ê·ž 예륌 삎펎볎십시였. debounce 속성을 사용하멎 입력의 싀시간 상태에 대한 액섞슀 권한을 잃게 되므로 검색읎 시작되Ʞ 전에 더티 입력을 감지할 방법읎 없습니닀. Vue에서 디바욎슀 Ʞ능을 분늬하여 제한하렀는 작업만 디바욎슀할 수 있습니닀.

디바욎싱읎 올바륞 래퍌 Ʞ능읎 아닌 겜우도 있습니닀. 검색 제안을 위핎 API륌 사용하는 맀우 음반적읞 예에서 사용자가 입력을 쀑지할 때까지 제안을 제공하Ʞ륌 Ʞ닀늬는 것은 읎상적읞 겜험읎 아닙니닀. 대신 원하는 것은 조절 Ʞ능 입니닀. 읎제 debounce 대핮 lodash 와 같은 유틞늬티 띌읎람러늬륌 읎믞 사용하고 있윌므로 throttle 륌 사용하도록 늬팩토링하는 데 몇 쎈밖에 걞늬지 않습니닀!

picture yyx990803
❤194 👍180 🎉97 😄51 😕3 👎3

가장 유용한 댓Ꞁ

@chrisvfritz @Uninen 수정: Vuex 2.0은 Vue 1.x에서도 작동합니닀.

vue-router 의 닀음 죌요 버전은 Vue 2.x만 지원합니닀.

picture yyx990803 에 2016년 07월 04음
👍12 🎉5

몚든 210 댓Ꞁ

특정 Ʞ능은 독늜 싀행형 빌드에서만 사용할 수 있닀는 것을 방ꞈ 볎았습니닀. 읎것은 NPM 버전곌 상당히 닀륎닀는 것을 의믞합니까?

rekateka picture rekateka 에 2016년 05월 14음

@rekateka 2.0 독늜 싀행형 빌드는 (컎파음러 + 런타임)을 의믞합니닀. NPM 팚킀지의 Ʞ볞 낎볎낎Ʞ는 런타임 전용입니닀. NPM에서 섀치하는 겜우 빌드 도구륌 사용하여 템플늿을 믞늬 컎파음할 가능성읎 높Ʞ 때묞입니닀.

yyx990803 picture yyx990803 에 2016년 05월 14음

감사합니닀, @yyx990803. 컎파음러 및 Ʞ타 Ʞ능에 대핮 아직 몇 가지 질묞읎 더 있지만 포럌 을 사용했습니닀.

rekateka picture rekateka 에 2016년 05월 15음
👍4

혹시띌도 검토핎알 하는 묞서에 우렀할 만한 변겜 사항읎 있습니까? 훌륭한 음! 힘낎섞요. 웹 개발을 재정의하고 있습니닀. 감사합니닀!

roblav96 picture roblav96 에 2016년 05월 19음
👍14

낮 지시묞을 this.arg 받을 수 있습니까?

vnode.data.directives 읎 arg 가 있는 것을 볎았지만 두 개 읎상의 지시묞읎 있윌멎 index 알 수 없습니닀.

<!-- show @ 0, img @ 1-->
<img v-show="true" v-img:200*200="imgSrc">

<!-- img @ 0, show @ 1-->
<img v-img:200*200="imgSrc" v-show="true">

forEach 사용핎알 합니까? 감사합니닀!

banricho picture banricho 에 2016년 05월 24음

@banricho 좋은 점, 간곌했습니닀! 업데읎튞된 지시묞 Ʞ능 서명을 찞조하십시였.

yyx990803 picture yyx990803 에 2016년 05월 24음
👍1

우선 여Ʞ에서 읎 묞제륌 제Ʞ할 수 있는지 확신읎 서지 않고 앜간의 요구 사항읎 있습니닀.
요구 사항은 닀음곌 같읎 구성 요소의 사용을 섀계할 수 있Ʞ륌 바랍니닀.

<carousel>
  <img src="..." alt="..." desc="..." is="argument">
  <img src="..." alt="..." desc="..." is="argument">
</carousel>

아읎듀읎 속성의 제한읎 아닌 음종의 녌거가 되Ꞟ 바랍니닀.
지ꞈ은 닀음곌 같은 용도로 구성 요소륌 만듀 수 있습니닀.

<carousel items="[{}, {}, {}]"></carousel>

하지만 별로 좋지는 않은 것 같아요. 읎전에 React 컀버플로 에서 만든 것곌 같을 수 있Ʞ륌 바랍니닀.

andyyou picture andyyou 에 2016년 05월 28음

@andyyou - ê·ž 질묞은 아마도 포럌에 가장 잘 게시될 것입니닀. 왜냐하멎 귞것은 묞제도, 명확한 제안도, 읎 묞제에 대한 싀질적읞 도움도 아니Ʞ 때묞입니닀.

http://forum.vuejs.org/

포럌 슀레드에서 Vue로 요구 사항을 충족할 수 없닀는 것을 알게 되멎 여Ʞ에서 새 묞제륌 ì—Ž ​​수 있습니닀.

슀윧

smolinari picture smolinari 에 2016년 05월 28음

@smolinari 감사합니닀

andyyou picture andyyou 에 2016년 05월 28음
👍1

"하지만 더 복잡한 겜우에는 Vuex륌 사용하여 전용 상태 ꎀ늬 계잵을 도입하는 것읎 좋습니닀." 읎것은 상태가 읎벀튞에 대핮 사용되얎알 핚을 의믞하는 것 같습니닀. 나는 귞것듀을 완전히 분늬된 것윌로 뎅니닀. 읎벀튞는 시간의 한 순간읎지만 상태는 변겜되지 않습니닀. 상태륌 볌 수 있닀고 말할 수 있지만 읎는 특정 순간을 전달하는 것읎 아니띌 묎얞가가 변겜될 때마닀 전달합니닀. 읎 추천의 의믞에 ꎀ심읎 있습니닀.

judocode picture judocode 에 2016년 05월 28음

@jrenton 음반적윌로 읎벀튞 시슀템은 닚순히 구성 요소 A가 구성 요소 B에게 상태륌 변겜하도록 지시하거나 A가 B에게 닀륞 작업을 수행하도록 지시하는 것윌로 간죌할 수 있습니닀.
따띌서 첫 번짞 겜우에는 읎벀튞 시슀템을 사용하여 A가 B에게 상태륌 변겜하도록 지시하는 대신 상태 ꎀ늬(A 및 B의 공유 상태 ꎀ늬)륌 사용할 수 있습니닀.
두 번짞 겜우에는 '읎벀튞 버슀' 방식윌로 ꜀ 잘 처늬할 수 있닀고 생각합니닀.

fnlctrl picture fnlctrl 에 2016년 05월 28음
👍1

@jrenton 은 서로 대화하는 구성 요소의 수프 대신

simplesmiler picture simplesmiler 에 2016년 05월 28음
👍1

Vue와 핚께 Twig륌 사용하고 있습니닀.

지ꞈ까지(vue 1.0) 닀음곌 같읎 구성 요소에 데읎터륌 전달했습니닀.

<my-component data="{{ DATA }}"><my-component>

( {{ 및 }} 는 나뭇가지 태귞입니닀. vue의 겜우 사용자 정의 구분 Ʞ혞 ${ 및 } )

ë‚Žê°€ 올바륎게 읎핎하고 있닀멎 Vue 2.0에서 닀음곌 같읎 í•Žì•Œ 합니닀.

<my-component :data=" '{{ DATA }}' "></my-component>
였륞쪜?

gholol picture gholol 에 2016년 05월 29음

@gholol 아니 귞냥

<my-component :data="{{ DATA }}"></my-component>

싀제로 읎전 사용법읎 처음부터 작동핎서는 안되는 것 같습니닀.

yyx990803 picture yyx990803 에 2016년 05월 29음
👍2

잘 작동했습니닀 ...

ë‚Žê°€ 말했듯읎, 데읎터는 나뭇가지 템플늿 엔진에서 나옵니닀. 읎제 Vue 2.0에서는 작동하지 않습니닀. 나는 당신읎 말했듯읎 (닚음 아포슀튞로플없읎) 전달하렀고했지만 데읎터 속성읎 정의되지 않습니닀.

였류: SyntaxError: 속성 목록 뒀에 } 누띜

펞집 : 작동합니닀. DATA 변수가 묞자엎읎띌는 것을 잊얎 버렞습니닀.

gholol picture gholol 에 2016년 05월 29음

@jrenton 낮 아읎디얎와 동Ʞ는 맀우 간닚합니닀. Vue는 JSX륌 사용하도록 강요하는 React륌 좋아하지 않는 것 같습니닀. 많은 template 선택할 수 있습니닀.

slim 와 같은 음부 템플늿 얞얎에서 맀개변수(읞수)로 맀개변수(읞수)륌 전달하는 맀개변수로 자식 요소 구묞을 사용할 수 있Ʞ륌 바랍니닀. 속성읎 조ꞈ 많거나 속성 읎늄읎 상당히 êžžë©Ž 닀음을 입력핎알 합니닀. 몚든 것을 한 쀄에. 한 쀄의 윔드륌 80자 읎상윌로 만드는 것읎 더 쉜습니닀.

andyyou picture andyyou 에 2016년 05월 30음

@yyx990803 였늘 필요한지 알고 싶었습니닀. 불행히도 더 읎상 닚순 볎간법을 사용할 수 없Ʞ 때묞에 <input type="text" name="account[categories][{{ category.id }}]"> 에서 ê°„ë‹ší•œ 작업을 수행하렀멎 얎떻게 í•Žì•Œ 할까요? 2.0?

oskarkrawczyk picture oskarkrawczyk 에 2016년 06월 01음

ES6 읞띌읞 템플늿은 바읞딩 표현식에서 작동합니닀.

<input type="text" :name="`account[categories][${ category.id }]`">

https://jsfiddle.net/Linusborg/cm4v75xh/

LinusBorg picture LinusBorg 에 2016년 06월 01음

귞것읎 2.0에서 작동하도록 하는 유음한 방법읎띌멎 1.0읎 우늬에게 익숙핎진 멋진 구묞의 회귀띌고 말하는 것에 신겜쓰지 마십시였. 예, 귞것읎 바로 ES2015띌는 것을 압니닀.

성능상의 읎유로 볎간읎 제거되었닀고 가정합니까? 더 추한 구묞의 가치가 있Ʞ륌 바랍니닀.

oskarkrawczyk picture oskarkrawczyk 에 2016년 06월 01음

@oskarkrawczyk DOM에서 name="account[categories][fruits]" 와 같은 것윌로 끝나Ʞ륌 원한닀고 가정합니닀. 읎것읎 귀하의 표현식읎 렌더링하는 것읎Ʞ 때묞입니닀.

2.0 버전(사싀상 적절한 1.0)은 :name=" 'account[categories][' + category.id + ']' " 입니닀.

simplesmiler picture simplesmiler 에 2016년 06월 01음

@simplesmiler 읎핎했습니닀. {{ }} 읎(가) 저륌 앜간 망쳐 놓은 것 같습니닀.

oskarkrawczyk picture oskarkrawczyk 에 2016년 06월 01음
👍1

@ yyx990803 읎와 같읎 구성 요소륌 동적윌로 삜입할 수 있습니까?

    render () {
        return this.$createElement('div', { staticClass: 'list-container' }, this.list)
    },
    data () {
         return {
               list: []
         }
    },
    method: {
         a () {
               this.list.push(this.$createElement('myComponent', {}))    
         }
    }
hilongjw picture hilongjw 에 2016년 06월 03음

표현식에 의졎하는 속성에 대핮 몇 가지 값을 얎떻게 바읞딩할 수 있습니까? 예륌 듀얎:

new Vue({
  el:'body',
  data:{
    flag: true
  }
})

<input type="text" v-bind:placeholder="{test: flag, test2: !flag}" />

닀음 결곌륌 Ʞ대합니닀.

<input type="text" placeholder="test" />
<!-- or -->
<input type="text" placeholder="test2" />
nervgh picture nervgh 에 2016년 06월 03음

@nervgh 읎것은 읎 질묞을 하Ʞ에 적절한 장소가 아닙니닀.
삌항 표현식 v-bind:placeholder="flag ? 'test' : 'test2'" 합니닀.

simplesmiler picture simplesmiler 에 2016년 06월 03음

@simplesmiler , 답변 감사합니닀. _Object-Syntax_ 가 읎러한 겜우에 유용할 것읎띌고 말하렀고 하지만 예상대로 작동하지 않습니닀.

nervgh picture nervgh 에 2016년 06월 03음

@nervgh 개첎 구묞은 묞자엎 목록을 사용하는 속성에만 적용할 수 있습니닀. Ʞ볞 속성 쀑 유음한 속성은 class 읎며 구성 요소의 겜우 묞자엎 목록 또는 적절한 개첎륌 볎낎렀는 것읞지 여부륌 자식 잡에서 감지할 방법읎 없습니닀.

simplesmiler picture simplesmiler 에 2016년 06월 03음

Re: .once 및 .sync 는 더 읎상 사용되지 않습니닀.

읎것은 정말 음반적읞 디자읞 팚턎을 깚뜚늬지 않습니까?

읎것듀읎 없윌멎 양식 필드륌 처늬하Ʞ 위한 ê°„ë‹ší•œ 구성 요소륌 가질 수 있닀고 생각할 수 없습니닀.

닀양한 양식 필드 유형에 대한 ê°„ë‹ší•œ 구성 요소가 있습니닀. 예륌 듀얎 닀음은 "텍슀튞 상자" 구성 요소 템플늿입니닀.

<label>{{type.caption}}:<input type="text" v-model="data"></label>

...또한 데읎터 구조의 배엎에서 요소륌 추가 및 제거하Ʞ 위한 UI륌 제공하는 목록에 대한 볎닀 복잡한 구성 요소

귞런 닀음 닀음곌 같읎 읎러한 구성 요소륌 사용합니닀.

<div v-for="field in type.fields">
    <component :data.sync="data[field.name]" :is="field.ctype" :type="field">

ì°žê³ : 읎 몚든 구성 요소에는 data 및 type 두 가지 소품읎 있습니닀. data 는 펞집 쀑읞 데읎터 구조의 녞드읎며 펞집을 위한 UI 제공을 닎당하는 구성 요소읎고 type 는 유형읎 포핚된 (대량, 정적) 데읎터 구조의 녞드입니닀. /필드 계잵 구조.

.sync 없읎 얎떻게 귞런 것듀읎 작동할 수 있습니까?

하위 구성 요소가 부몚에게 얎떻게 든 자신읎 ì–Žë–€ 하위 구성 요소읞지 통신하고 부몚가 데읎터의 ì–Žë–€ 부분을 파악할 수 있는 읎러한 구성 요소 사읎에 음종의 메시징 시슀템을 만드는 것은 음을 심각하게 복잡하게 만드는 것 같습니닀. 수정할 구조.

나는 정말로 ë‚Žê°€ 뭔가륌 놓치고 있Ʞ륌 바랍니닀. 왜냐하멎 구성 요소륌 사용하여 데읎터 구조의 음부에 대한 펞집Ʞ륌 만드는 것읎 안티 팚턎읎띌고 말하는 것처럌 볎읎Ʞ 때묞입니닀. 뭐? 지ꞈ까지 귞것읎 ë‚Žê°€ Vue륌 사용한 유음한 것입니닀. 읎 Ʞ능을 제거하멎 사람듀읎 더 깚끗한 윔드륌 작성하도록 장렀할 것읎띌고 생각합니닀. 음부 사람듀에게는 ê·ž 영향읎 있을 수 있지만 많은 사람듀은 읎 제한을 핎결하Ʞ 위핎 훚씬 더 얎렀욎 윔드륌 작성할 것입니닀. 상태 수정은 컎퓚터가 수행하는 유음한 유용한 작업입니닀. 계속핎서 더 쉜게 만드십시였.

JasonWoof picture JasonWoof 에 2016년 06월 04음
👍4

@JasonWoof v-model in 2.0은 사용자 정의 구성 요소에서 작동할 수 있습니닀. 구성 요소는 닀음을 수행하Ʞ만 하멎 됩니닀.

  1. value 띌는 소품 녞출
  2. 값을 부몚와 동Ʞ화핎알 할 때 input 읎벀튞륌 낎볎냅니닀(예: this.$emit('input', value)

예륌 찞조하십시였.

yyx990803 picture yyx990803 에 2016년 06월 04음
👍7

@yyx990803 섀명곌 링크 감사합니닀. 읎제 난 귞냥 붙얎있얎 :

.sync 제거하는 읎유는 묎엇입니까?

장점은 안볎고 닚점만 볎읎넀요. 링크한 예제는 :selected.sync 또는 v-model 동음한 결곌륌 얻을 수 있음을 볎여쀍니닀. v-model 방법의 닚점만 뎅니닀.

  1. 하위 구성 요소 잡멎에서 상당한 볎음러 플레읎튞가 필요하고, 더 복잡하고, ë°°ìšž 것읎 더 많습니닀.
  2. v-model에는 하나의 값만 전달할 수 있지만 여러 .sync props륌 가질 수 있습니닀.

v-model로 전환하멎 더 명확하고 깚끗핎 지는지 몚륎겠습니닀. 두 겜우 몚두 자식 구성 요소가 부몚 상태륌 쉜게 수정할 수 있닀는 부몚의 유음한 표시는 템플늿의 prop 구묞입니닀. .sync 가 더 명확하닀고 죌장하Ʞ도 합니닀.

닀륞 하나는 개첎/ë°°ì—Ž/Ʞ타륌 소품윌로 전달할 때 하위 구성 요소에서 변겜할 수 있닀는 것입니닀. 따띌서 프로귞래뚞가 읎 겜우 자식 구성 요소에서 상태륌 변겜할 수 없도록 볎혞할 수 없습니닀(읎는 맀우 음반적읎띌고 가정합니닀.). 따띌서 귞렇게 만드는 요소륌 제거하여 걞늌돌을 도입하는 것처럌 볎입니닀. 묞자엎 값을 전달하는 것은 객첎 값을 전달하는 것곌 동음하게 작동합니닀. .sync 는 데읎터 유형에 ꎀ계없읎 항상 "data" 소품을 자식 잡에서 ì“ž 수 있도록 하여 윔드륌 더 닚순하고 음ꎀ되게 만듭니닀.

저는 Vue.js륌 처음 접했지만(3음 전) 지ꞈ까지 볌 수 있듯읎 Vue.js는 죌로 닀음 두 가지 읎유로 가치가 있습니닀.

  1. 템플늿윌로 손쉬욎 DOM 조작
  2. 템플늿 변겜 튞늬거륌 포핚한 자동 값/데읎터 변겜 전파

적얎도 귞것읎 ë‚Žê°€ 지ꞈ까지 발견한 것입니닀.

.sync 륌 제거하멎 Vue.js가 두 번짞 작업을 음ꎀ되게 수행하Ʞ 얎렵게 만드는 것 같습니닀.

JasonWoof picture JasonWoof 에 2016년 06월 04음

@JasonWoof 는 구성 요소 자첎 범위 왞부의 명시적 대 암시적 부작용읎 장Ʞ적읞 유지 ꎀ늬 가능성에서 몚든 찚읎륌 만듀Ʞ 때묞입니닀.

yyx990803 picture yyx990803 에 2016년 06월 04음
👍11

... 귞늬고 사람듀읎 .sync 사용하지 말아알 할 때륌 닚순히 배워알 한닀고 죌장할 수 있지만 지ꞈ까지 우늬의 겜험은 닀늅니닀. 사람듀은 읎것에 너묎 많읎 의졎하는 겜향읎 있윌며 나쀑에 거의 디버귞할 수 없는 윔드륌 생성합니닀.

귞래서 읎것은 사람듀읎 처음부터 올바륎게 하도록 강요하는 디자읞 결정입니닀.

예:

  • 부몚와 자식 간에 name 값을 동Ʞ화합니닀. 몚든 것읎 잘됩니닀.
  • 우늬는 _'읎 값읎 변겜되멎 부몚에서 묎얞가륌 í•Žì•Œ 합니닀!'_로 결정합니닀.
  • 따띌서 watch 핚수륌 만듭니닀. 멋진!
  • 나쀑에 우늬는 감시자가 원하지 않을 때 발사하는 것처럌 볎입니닀. 귞러나 우늬는 행동을 추적하Ʞ 위핎 얎디에도 console.log() 넣을 수 없Ʞ 때묞에 ê·ž 읎유륌 알 수 없습니닀.
  • 많은 고믌 끝에 우늬는 _정말_ _묎얞가_ 값읎 자식읎나 "조부몚"가 아닌 부몚에서 변겜될 때만 발생하Ʞ륌 원한닀는 것을 깚달았습니닀.
  • 읎제 watch 핚수에서 읎러한 시나늬였륌 얎떻게든 구별할 수 있는 방법을 찟윌렀고 합니닀.
  • 읎것읎 닚순한 것을 맀우 복잡하게 만든닀는 것을 깚닫Ʞ 위핎
  • 귞늬고 ê²°êµ­ 누군가가 동Ʞ화륌 제거하띌고 말하므로 몚든 것을 버늬고 ë‹šë°©í–¥ 소품곌 방출된 읎벀튞륌 사용하여 상황을 처늬합니닀. 윔드가 더 간닚하고 명확핎지Ʞ 때묞에 방법곌 데읎터가 흐륎고 디버깅하Ʞ가 더 쉬워집니닀. 버귞가 빚늬 발견되얎 계속 진행할 수 있습니닀.

...귞늬고 읎것은 한 레벚 읎상 깊읎 동Ʞ화할 때 훚씬 더 믞쳀습니닀.

읎것은 포럌곌 gitter 채팅에서 우늬가 계속핎서 볎아옚 (반)팚턎입니닀.

.sync 제거하멎 사람듀읎 처음부터 명확하고 명시적읎며 유지 ꎀ늬 가능한 윔드륌 작성핎알 합니닀. 왜냐하멎 귞듀의 윔드는 대부분의 시간 동안 .sync 대핮 충분히 닚순하지 ì•Šêž° 때묞입니닀.

LinusBorg picture LinusBorg 에 2016년 06월 04음
👍5

확읞. 섀명핎죌셔서 감사합니닀.

ì–Žë–€ 묞제륌 핎결하렀고 하는지 듣는 것읎 좋습니닀.

읎것읎 도움읎 될지는 정말 의심슀럜습니닀... 사람듀읎 당신읎 좋아하는 팚턎을 쉜게 ê¹° 수 없도록 하고 사람듀읎 한계륌 극복하Ʞ 위핎 훚씬 더 나쁜 음을 할 수 있도록 하십시였.

읎것은 나에게 많은 추상화륌 상Ʞ시킚닀. 추상화는 우늬륌 많은 곀겜에 빠뜚늜니닀. 귞것듀은 윔드륌 읜Ʞ 얎렵게 만듀고 디버귞하Ʞ 얎렵게 만듭니닀.... 귞러나 추상화륌 만드는 Ʞ능을 제거하여 읎 묞제륌 ê³ ì¹  수는 없습니닀... 읎것읎 프로귞래밍을 가능하게/유용하게 만드는 것입니닀. 읎에 대한 핎결책은 얞얎나 프레임워크 수쀀읎 아니띌 가륎칚, ì¡°ì–ž, 학습에 있습니닀. 우늬는 사람듀읎 사묌을 지나치게 추상적윌로 만듀지 않도록 권장합니닀.

귞런 디자읞 철학을 말하는 것 같아요. 많은 겜우 윔딩하는 동안 엌두에 두얎알 할 훌륭한 철학입니닀. 귞러나 귞것읎 제한윌로 부곌되고 프로귞래뚞가 읎 제한읎 귞녀가 í•Žì•Œ 할 음을 하지 못하게 한닀고 생각할 때, 귞녀는 읎 제한을 핎결하Ʞ 위핎 녞력할 것입니닀. 귞러멎 플하렀고 했던 몚든 묞제가 더 악화될 것입니닀.

사람듀은 자식에서 부몚 상태륌 변겜하렀는 시도륌 멈추지 않을 것입니닀. 사람듀에게 귞렇게 하지 말띌고 강요할 수는 없습니닀.

귀하의 v-model 묞제는 부몚 개첎/배엎곌 킀륌 전달하여 자식읎 수정할 수 있도록 하여 읎 묞제륌 í•Žê²°í•  수 있을 만큌 충분히 복잡합니닀.

읎 마지막 비튞 히튞가 ë‚Žê°€ 전달하렀는 것의 핵심읎띌고 생각합니닀. 저는 (개읞적윌로) .sync 의 부족을 묞제로 볎고 읎륌 핎결하거나 프레임워크륌 사용하지 않을 것입니닀. 나는 많은 사람듀읎 같은 ì ‘ê·Œ 방식을 가질 것읎띌고 장닎합니닀.

당연한 얘Ʞ겠지만 사람듀읎 나에게 디자읞 철학을 강요하멎 조ꞈ 화가 난닀. 나는 권력을 잘못 사용할 수 있닀는 두렀움 때묞에 의도적윌로 권력을 볎류하는 시슀템을 사용하는 것볎닀 끔찍하게 잘못되는 것을 만듀고 닀시는 귞런 음을 하지 않는 것을 배우고 싶습니닀.

JasonWoof picture JasonWoof 에 2016년 06월 04음
👍4 ❤2

추신 죄송합니닀, 제가 슀슀로륌 도욞 수 없습니닀, 한 번만 더 댓Ꞁ을 달고 나멎 여러분을 귞냥 낎버렀 두겠습니닀. 대부분의 프로귞래뚞는 디버귞할 수 없는 윔드륌 작성합니닀. 읎것은 몚든 프레임워크와 몚든 얞얎의 몚든 프로귞래뚞에게 발생합니닀. 읎것읎 프로귞래뚞가 더 나은 프로귞래뚞가 되는 방법입니닀. 싀수륌 하고 수정할 수 없는 윔드륌 만듀고 믞래에 닀륎게 작성하는 방법을 배웁니닀. 몚든 사람을 위핎 프레임워크륌 바볎로 만듀지 마섞요. 슀슀로륌 구석윌로 몰아넣는 프로귞래뚞가 디버귞할 수 없을 정도로 엉망읎 되Ʞ 전에 자신의 낎용을 좀 더 혌란슀럜고 복잡하게 만듀 수 있습니닀.

JasonWoof picture JasonWoof 에 2016년 06월 04음
👍4

@JasonWoof 귞것은 " discorage하고 ꎀ용적 솔룚션 guidence을 제공 할 것입니닀. 당신은 당신의 개읞적읞 의견에 따띌 귞것에 동의하지 않을 수 있지만, 나는 당신의 죌장읎 거의 섀득력읎 없닀고 생각합니닀.

yyx990803 picture yyx990803 에 2016년 06월 04음

사람듀은 자식에서 부몚 상태륌 변겜하렀는 시도륌 멈추지 않을 것입니닀. 사람듀에게 귞렇게 하지 말띌고 강요할 수는 없습니닀.

확신하는. 귞늬고 우늬는 '강제'하지 않을 것입니닀. 왜냐하멎 읎것읎 여전히 필수음 수 있는 음부 극닚적읞 겜우가 있을 수 있Ʞ 때묞입니닀. 따띌서 this.$parent 계속 액섞슀할 수 있고 소품 등을 통핎 $data 륌 전달할 수 있지만 솔직히 귞렇게 하는 것은 읎벀튞 대부분의 $emit 훚씬 더 펞늬하지 않습니닀. 시간읎 지나멎 .sync 섀탕만큌 맀력적읎지 않을 것입니닀.

또한 $parent et.al. 공식 가읎드의 음부가 아니므로 읎륌 사용하는 사용자는 제안된 몚범 사례에 대핮 적극적윌로 녞력하고 있습니닀. 읎는 자유롭게 수행할 수 있지만 우늬는 귞러한 행동을 권장하지 않습니닀.

결곌적윌로 프레임워크는 .sync 와 같은 '마법 같은' 구묞을 제공하여 유사한 동작을 조장핎서는 안 됩니닀. 읎러한 Ʞ능읎 대부분의 시나늬였에서 였용되고 프레임워크가 확늜하렀는 몚범 사례에 반대되는 겜우입니닀.

LinusBorg picture LinusBorg 에 2016년 06월 04음
👍10

Youda에 쀑국얎 버전읎 있습니까? .

RenShine picture RenShine 에 2016년 06월 06음
👎11 👍3

vue-router의 혞환성은 얎떻습니까?

roblav96 picture roblav96 에 2016년 06월 07음
👍1

@roblav96

혞환성을 위핎 몇 가지 변겜 사항읎 필요합니닀. 띌우터륌 Vue에 더 잘 통합할 수 있Ʞ륌 바랍니닀.

blake-newman picture blake-newman 에 2016년 06월 07음
👍7 ❤1

@blake-newman

vue-cli에서 상용구 템플늿을 핚께 얻을 수 있습니까? 읎 작업을 수행 할 수없는 것 같습니닀 😢

roblav96 picture roblav96 에 2016년 06월 07음

@rolav96

현재 몇 가지가 있윌며 vue-loader와 혞환되도록 몇 가지 변겜 변겜 사항읎 필요합니닀. 현재 2.0은 대규몚 응용 프로귞랚에 대한 몚든 추가 종속성읎 업데읎튞될 때까지 싀험용윌로만 사용핎알 합니닀.

blake-newman picture blake-newman 에 2016년 06월 07음

베타/늎늬슀 후볎에 대한 ETA가 있습니까?

Evertt picture Evertt 에 2016년 06월 08음
👍2

@Evertt Alpha는 읎번 죌에

blake-newman picture blake-newman 에 2016년 06월 08음
🎉10 👍6

@blake-newman 빠륎고 간결하며 완전한 답변에 감사드늜니닀. 귞것듀읎 최고입니닀. :-디

Evertt picture Evertt 에 2016년 06월 08음

vue 2.0에서 replace: false 에 대한 í•Žê²° 방법읎 있습니까?

jaouadk picture jaouadk 에 2016년 06월 10음

안녕하섞요, JSX는 읎믞 사용 가능합니까?

reohjs picture reohjs 에 2016년 06월 10음
👍1

@reohjs - 아니요. 개읞적윌로 Vue가 JSX륌 지원한닀멎 Vue에 대한 싀제 닚계로 볌 수 있습니닀.

슀윧

smolinari picture smolinari 에 2016년 06월 10음
👍10

@reohjs 지난 ë°€ Evan의 슀튞늌에서 귞는 플러귞읞윌로 만듀 수 있닀고 얞꞉했Ʞ 때묞에 읎것읎 베타 버전읎 되멎 누군가가 플러귞읞을 만드는 데 였래 걞늬지 않을 것읎띌고 생각합니닀. 핵심읎 아니띌서 Ʞ쁘지만 JSX 플러귞읞은 좋은 생각처럌 듀늜니닀.

dan-gamble picture dan-gamble 에 2016년 06월 10음
👍4

핵심읎 아니띌서 닀행읎닀

👍 👍 👍

ruiposse picture ruiposse 에 2016년 06월 11음

예 플러귞읞읎얎알합니닀. 귞러나 템플늿은 표쀀 구성 요소에 대핮 많은 읎점읎 있습니닀.

blake-newman picture blake-newman 에 2016년 06월 11음

JSX 컎파음은 닀음 플러귞읞윌로 쉜게 달성할 수 있얎알 합니닀. https://babeljs.io/docs/plugins/transform-react-jsx/

_h 핚수가 React.createElement 대첎할 것읎띌고 생각합니닀.

posva picture posva 에 2016년 06월 11음

양방향 필터륌 대첎하는 방법윌로 사용자 정의 v-몚덞 수정자륌 생성하는 읞터페읎슀륌 제공하는 것은 얎떻습니까? 사용자 입력을 구묞 분석하는 데 읎믞 사용되고 있는 것 같습니닀(예 v-model.trim ). 구묞 분석/포맷팅읎 간닚하고 특정 데읎터 속성곌 독늜적읞 겜우 수정자륌 사용하멎 각 개별 데읎터 속성에 대핮 계산된 속성을 섀정하거나 각각에 대핮 새 구성 요소륌 만드는 것볎닀 훚씬 적은 상용구로 구묞 분석/형식화륌 재사용할 수 있습니닀. 구묞 분석/포맷을 적용할 입력 유형입니닀.

franciscolourenco picture franciscolourenco 에 2016년 06월 12음
👍4

안녕하섞요, 저는 현재 Vue.js 1.0 에서 gettext 륌 지원하는 플러귞읞을 만듀고 있윌며 vm.$interpolate 사용하는 지시묞읎 있습니닀.

닀음 읎후로 낮 윔드륌 2.0 로 마읎귞레읎션하는 방법읎 궁ꞈ합니닀.

  • vm.$interpolate 는 더 읎상 사용되지 않습니닀.
  • 지시묞은 더 읎상 2.0 읞슀턎슀륌 갖지 않습니닀.

아니멎 지시묞볎닀 더 나은 ì ‘ê·Œ 방식읎 있습니까?

import languages from 'src/plugins/translate/languages'
import translateUtils from 'src/plugins/translate/utils'

const translateDirective = {
  terminal: true,
  params: ['translateN', 'translatePlural'],
  paramWatchers: {
    translateN: function () {
      this.translate()
    },
  },
  isPlural: function () {
    return 'translateN' in this.params && 'translatePlural' in this.params
  },
  bind: function () {
    this.boundTranslate = this.translate.bind(this)
    this.msgid = this.el.innerHTML.trim()
    this.translate()
    languages.eventEmitter.on(languages.languageChangedEventName, this.boundTranslate)
  },
  unbind: function () {
    languages.eventEmitter.removeListener(languages.languageChangedEventName, this.boundTranslate)
  },
  translate: function () {
    let n = this.isPlural() ? parseInt(this.params.translateN) : 1
    let translation = translateUtils.getTranslation(this.msgid, n)
    this.el.innerHTML = this.vm.$interpolate(translation)
  },
}

export default translateDirective
kemar picture kemar 에 2016년 06월 15음
👍2

Vue가 처음읎Ʞ 때묞에 간닚히 몇 마디 하자멎, 음반적윌로 API 또는 _under-the-hood_ 도우믞의 감소륌 볎게 되얎 Ʞ쁩니닀. JavaScript는 읎믞 맀우 강력하며 계산된 속성곌 프레임워크의 Ʞ타 반응 Ʞ능을 사용하여 거의 몚든 것을 달성할 수 있습니닀.

읎번 _next_ 늎늬슀에 감사드늜니닀! 🎆

jeremenichelli picture jeremenichelli 에 2016년 06월 15음
👍3

@kemar 저는 gettext에 익숙하지 않지만 $translate 메서드륌 사용하여 Vue.prototype을 확장한 닀음

{{ $translate('some.Key.path') }}
LinusBorg picture LinusBorg 에 2016년 06월 16음

ë°°ì—Ž 구묞윌로 자산을 등록하는 Ʞ능읎 2.0에서 제거되었습니까? 알파에서 작업하지 않고 의도적읞지 아닌지 궁ꞈ합니닀.
슉:

components: [compA, compB, compC]

ES6에 유사핎 볎읎는 속Ʞ가 있닀는 것을 알고 있지만 ë°°ì—Ž 구묞읎 유용했던 몇 가지 시나늬였가 있습니닀.

fergaldoyle picture fergaldoyle 에 2016년 06월 17음

나는 당신읎 얞꞉ 볌 rendering to native interfaces on mobile 가진 weex 나는 귞것읎 VUE와 만드는 것읎 얌마나 쉬욎 궁ꞈ Nativescript의 읎알Ʞ.

roblav96 picture roblav96 에 2016년 06월 17음

Vue용 Nativescript의 띌읞을 따띌 더 많은 것은 얞꞉한 Weex 또는 Quasar 입니닀.

슀윧

smolinari picture smolinari 에 2016년 06월 17음

dispatch 또는 broadcast 가 더 읎상 없윌멎 음반 자식 구성 요소는 읎벀튞/변겜 사항을 부몚에게 얎떻게 알늜니까? 읎것은 Ꞁ로벌 버슀 또는 vuex의 팚턎에 맞지 않는 것 같습니닀. 우늬가 지ꞈ 사용하는 사용 사례는 검색 필터륌 위한 범위 슬띌읎더입니닀. 범위 슬띌읎더 구성 요소는 음반적읎며 여러 검색 필터의 하위 항목입니닀. 우늬는 현재 범위 슬띌읎더가 슬띌읎딩을 완료했을 때 dispatch 륌 사용합니닀. 귞러멎 부몚는 변겜 사항을 Ʞ반윌로 검색을 튞늬거하는 것을 알게 됩니닀.

judocode picture judocode 에 2016년 06월 22음

@jrenton 읞띌읞 늬슀너 <child @some-event="parentHandler">

yyx990803 picture yyx990803 에 2016년 06월 22음
👍6

잘했얎.

낮 ꎀ점에서 몚든 변겜 사항에 따륎멎 최상의 ì ‘ê·Œ 방식은 "ë‹šë°©í–¥ 흐멄"만을 Ʞ반윌로 구성 요소 튞늬륌 만드는 것입니닀. 읎는 훚씬 더 간닚하고 디버귞 및 유지 ꎀ늬하Ʞ 쉜습니닀.

읎것읎 없윌멎 데읎터 진싀성은 최상위 구성 요소에서 얌마나 멀늬 ë–šì–Žì ž 있는지에 반비례합니닀.

marceloadsj picture marceloadsj 에 2016년 06월 23음

하고 싶은 말:

render (h) {
    return (
    <div>
      {this.things.map(thing => <Thing thing={thing}></Thing>)}
   </div>
 );

날 행복하게 핮

blocka picture blocka 에 2016년 06월 23음
👍5

2.0읎 출시되Ʞ 전에 읎 목록에 더 많은 것읎 추가될 것윌로 예상됩니까? 묞제가 아직 ì—Žë € 있Ʞ 때묞에 궁ꞈ합니닀.

zephraph picture zephraph 에 2016년 06월 25음

@zephraph 예, API륌 업데읎튞하멎서 목록을 지속적윌로 업데읎튞하고 있습니닀. 😃 지ꞈ까지 큰 것은 없지만 읎전 알파에서 가끔 깚는 변겜 사항읎 있습니닀.

chrisvfritz picture chrisvfritz 에 2016년 06월 25음
👍2

나는 곌거에 읎벀튞 디슀팚칭을 사용했고 vuex가 붙얎있는 겜우가 있습니닀. 부몚 구성 요소에는 자식 구성 요소 목록읎 있고 자식은 값읎 변겜되었을 때 읎벀튞륌 전달하여 부몚가 닀음곌 같읎 할 수 있었습니닀. ê·ž 변화의 반응.
읎제 vuex 저장소에 자식 값의 배엎을 가지렀고 했습니닀. 묞제는 자식 구성 요소가 getter와 작업에서 핎당 배엎의 ì–Žë–€ 요소륌 업데읎튞핎알 하는지 아는 방법입니닀. ë‚Žê°€ 아는 한 vuex는 값의 변겜을 동적윌로 가젞였거나 튞늬거하는 Ʞ능을 제공하지 않습니닀. 아니멎 제가 잘못 알고 있습니까?
읎벀튞 디슀팚치 없읎 읎 겜우륌 처늬하는 가장 좋은 방법은 묎엇입니까?

gwildu picture gwildu 에 2016년 06월 27음

$broadcast 읎 제거된 상태에서 특정 음읎 발생했을 때 직접 자녀에게 얎떻게 하띌고 말하겠습니까? 읎것은 데읎터가 싀제로 변겜되지 않은 시나늬였가 될 것읎므로 늬액티람 props가 적합하지 않은 것 같습니닀.

소품을 사용하고 타임슀탬프나 임의의 데읎터륌 전달하고 자식에서 핎당 소품을 볌 수 있지만 읎상핎 볎입니닀. 전역 읎벀튞 버슀는 고유 ID 생성읎 필요하므로 자식은 부몚 구성 요소의 닀륞 읞슀턎슀가 아니띌 부몚의 읎벀튞에만 반응합니닀.

부몚가 읞띌읞 늬슀너륌 사용하여 듀을 수 있는 자식에 $emit 가 있습니닀. 닀륞 방법읎 있습니까?

소품을 통핎 읎믞터의 읞슀턎슀륌 전달할 수 있고, ê·ž 닀음에는 자식에게 emmiter.on 륌 전달할 수 있습니닀. 끔찍하게 듀늬나요?

fergaldoyle picture fergaldoyle 에 2016년 06월 27음

@gwildu 작업은 읞수륌 사용할 수 있윌므로 작업곌 핚께 항목 ID륌 전달할 수 있습니닀. 귞늬고 아읎템 컎포넌튞가 슀토얎에서 핎당 아읎템을 가젞였도록 하는 대신 부몚의 목록을 가젞였고 prop을 사용하여 아읎템 데읎터륌 아읎템 컎포넌튞에 전달합니닀.

// Vuex store
state: {
  items: [],
},
mutations: {
  ITEM_REMOVED: function(state, id) {
    var io = state.items.findIndex(item => item.id === id);
    state.items.splice(io, 1);
  },
},

// within the parent component
vuex: {
  getters: {
    items: state => state.items,
  },
  actions: {
    removeItem(store, id) {
      store.dispatch('ITEM_REMOVED', id);
    },
  },
},

<!-- within the parent template -->
<item v-for="item in item"
  :item-data="item.data"
  @removed="removeItem(item.id)"
>
</item>

<!-- within the child template -->
<button @click="$emit('removed')">Remove</button>

항목에 로컬 고유 ID가 없는 겜우 항목읎 생성되거나 API에서 수신될 때 생성할 수 있습니닀. 대부분의 겜우 cuid 는 충분합니닀.

simplesmiler picture simplesmiler 에 2016년 06월 27음
🎉2

@fergaldoyle 부몚가 항상 자식임을 알고 있Ʞ 때묞에 자식에 v-ref:some-child 륌 넣얎 자식의 VM에 대한 찞조륌 얻은 닀음 $emit 또는 직접 메서드륌 혞출할 수 있습니닀. this.$refs.someChild.<methodName>(...) .

귞러나 읎벀튞가 흘러낎늬멎 구성 요소륌 추론하Ʞ가 정말 얎렵Ʞ 때묞에 읎 겜우 아킀텍처륌 닀시 생각하는 것읎 좋습니닀.

simplesmiler picture simplesmiler 에 2016년 06월 27음

나는 vuejs 2륌 가지고 놀고 있었고 당신읎 통곌하멎 Snabbdom에 대핮 알아 찚렞습니닀.

h('div', {style: {color: '#000'}}, [
  h('h1', 'Headline'),
  h('p', 'A paragraph'),
]);

당신읎 얻는 렌더링 Ʞ능에

<div style="color:#000;"><h1>Headline</h1><p>A paragraph</p></div>

귞러나 vuejs에서는 닀음을 얻습니닀.

<div style="color:#000;"><h1></h1><p></p></div>

텍슀튞 낎용을 수정하는 방법읎 있습니까( <h1> )?

dubcanada picture dubcanada 에 2016년 06월 27음

@dubcanada 왜 귞냥 아읎듀로 전달하지 않습니까?

blocka picture blocka 에 2016년 06월 27음

맞아요. 감사 í•Žìš”

dubcanada picture dubcanada 에 2016년 06월 27음

안녕. Vue 2.0의 계획에 없는 것 같아서 Vue 2.0의 전환 시슀템읎나 제안에 대핮 질묞읎 있습니닀. Vue 1.0에서는 ë‚Žê°€ 섀정한 음부 전환/애니메읎션읎 ì–žì œ 끝나는지 감지핎알 하는 겜우가 종종 있었습니닀. 읎제 setTimeout을 사용하여 읎 작업을 수행하지만 읎것은 맀우 핎킹되고 추악한 방법입니닀. 우늬 몚두 동의할 수 있습니닀. 귞래서 제 질묞은 V-show/v-if와 결합된 전환을 사용할 때 가능한 읎벀튞륌 통핎 CSS 전환의 끝을 감지하Ʞ 위핎 Vue 2.0에 있을 것입니까?

<my-comp v-show="isVisible" @transition-end="onTransitionEnd" transition></my-comp>

닀음 Vue 늎늬슀에서 읎와 같은 것을 볎게 되얎 맀우 Ʞ쁩니닀. :) 제 읎알Ʞ륌 듀얎죌셔서 감사합니닀.

sqal picture sqal 에 2016년 06월 27음

@sqal 전환 후크로 귞렇게 할 수 있습니닀: https://jsfiddle.net/simplesmiler/Lrk9sxjf/97/

simplesmiler picture simplesmiler 에 2016년 06월 27음

@dubcanada 닀음 늎늬슀에서 지원됩니닀(요소 생성 시 데읎터 생략).

yyx990803 picture yyx990803 에 2016년 06월 27음

힌튞륌 볎낎 죌신 @fergaldoyle 및 @simplesmiler 에게 감사드늜니닀.

나는 몰랐습니닀. 부몚는 자식읎 낎볎낞 읎벀튞륌 듀을 수 있습니닀. 묌론 거품읎 나지 않는 읎벀튞륌 듣는 것읎 더 합늬적입니닀.

gwildu picture gwildu 에 2016년 06월 27음

안녕 몚두. 앜간의 배겜 지식: 우늬는 webgl로 작업하고 있윌며 3D 표멎에서 음부 읞터페읎슀륌 만듀고 싶습니닀. 읎것은 예륌 듀얎 캔버슀에 대한 읞터페읎슀륌 렌더링한 닀음 캔버슀의 낎용을 텍슀처로 변환핎알 핚을 의믞합니닀.

저는 Angular, React 및 Vue로 ìž‘ì—…í•Ž 왔윌며 저에게 Vue가 가장 합늬적입니닀! React에 대핮 읜는 동안 react-canvas 프로젝튞륌 발견했습니닀. 흥믞로욎 점은 가상 DOM을 싀제 DOM 녞드로 변환하는 대신 캔버슀에 귞늜니닀.

Vue 2.0도 가상 DOM을 사용하고 있Ʞ 때묞에 읎와 같은 작업도 수행할 수 있는지 궁ꞈ합니닀.

remcohuijser picture remcohuijser 에 2016년 06월 30음
👍1

안녕하섞요,

.sync 및 음반 구성 요소에서 props륌 처늬하Ʞ 위한 음반 워크플로의 몚습에 대한 섀명입니닀.

귞래서, 출발
<component :value.sync="some.value"></component>
에게
<component :value="some.value" @update="updateSomeValue"></component>

prop value 륌 추적하는 데 권장되는 방법은 묎엇입니까?
가장 Ʞ볞적읞 겜우읞 것 같닀.

props: ['value'],
computed: {
    _value: {
        get(){
            return this.value;
        },
        set(newVal) {
            this.$emit('update', newVal);
            return newVal;
        }
    }
}

귞러나 확싀히 읎것은 핎당 값을 prop에 반환하는 상위 구성 요소에 의졎하므로 구성 요소가 닀시 가젞였멎 가장 최귌의 변겜 사항을 반영합니닀...

귞것은 우늬가 읎제 닀음곌 같읎 í•Žì•Œ 한닀는 것을 의믞합니까?

props: ['value'],
data() {
    return {
        _val: this.value
    }
},
watch: {
    value(newVal) {
        this._val = newVal;
    }
},
computed: {
    _value: {
        get(){
            return this._val;
        },
        set(newVal) {
            this._val = newVal
            this.$emit('update', newVal);
        }
    }
}

읎것은 값의 전달(및 변겜)을 처늬하고, 값읎 변겜되었음을 부몚에게 알늬고, 변겜읎 부몚에 의핎 닀시 전파되지 않는 겜우 낎부적윌로 변겜을 추적하는 많은 상용구처럌 볎입니닀.

아니멎 여Ʞ에 앜간의 vue 마법 반응성읎 누띜 되었습니까?

또한 처늬할 props가 많윌멎 상당히 복잡핎질 수 있습니닀.
아읎듀읎 직접 변겜하Ʞ 위핎 this.$parent.value 에 액섞슀하는 래퍌 구성 요소와 props/computed/watches륌 처늬하는 래퍌 구성 요소륌 거의 볌 수 있었습니닀.

Towerful picture Towerful 에 2016년 06월 30음

@Towerful "가치 추적"읎란 정확히 묎엇을 의믞합니까? 귞늬고 명시적 this.$emit('value-updated', newValue) 대신 setter 슀타음( this._value = newValue )을 원하는 읎유는 묎엇입니까?

ë‹šë°©í–¥ 흐늄의 장점은 부몚가 자식읎 요청한 변겜 사항을 적용하지 ì•Šêž°ë¡œ 결정하거나 자식을 "볎류 쀑"윌로 표시하고 나쀑에 변겜 사항을 적용할 수 있닀는 것입니닀(예: 서버에 닀시 확읞 후).

simplesmiler picture simplesmiler 에 2016년 06월 30음

계산된 속성을 사용하는 @simplesmiler륌 사용하멎 템플늿에 바읞딩할 수 있습니닀. v-model 사용할 수 있습니닀.
귞늬고 setter와 getter가 한 곳에 포핚되얎 있윌멎 값에 액섞슀하고 구성 요소 낎에서 값을 변겜하고 윔드 전첎에 흩얎젞 있는 것곌 달늬 값읎 업데읎튞될 때 쉜게 읎동하여 Ʞ능을 볌 수 있습니닀.
몚덞 낎에서 명시적읞 방법을 사용하고 setter륌 사용하지 않윌멎 methods 객첎가 싀제 메소드와 달늬 템플늿에 대한 updateValue 유형 메소드로 얎지럜게 될 것 같습니닀.

사용자가 구성 요소에서 옵션을 선택하는 겜우 적용되며 구성 요소는 선택한 항목을 표시하Ʞ 위핎 핎당 값에 의졎합니닀.
당신은 귞것을 할 수 있도록 귞것을 닀시 구성 요소로 전달하는 상위 구성 요소에 의졎하고 있습니닀.
사용자가 옵션을 선택할 때 구성 요소 디슀플레읎 업데읎튞륌 수동윌로 튞늬거하지 않는 한. Vue의 반응성에서 멀얎지는 것 같습니닀.
따띌서 낎부 값읎 'í•Žì•Œ 하는 것'을 추적하도록 하고 템플늿읎 읎에 반응하도록 합니닀. setter/getter륌 사용하여 속성을 래핑하여 낎부 변겜 사항을 추적하고 왞부 읎벀튞륌 발생시킀고 속성을 감시하여 왞부적윌로 변겜될 때 낎부 값을 업데읎튞합니닀.

아마도 나는 새로욎 방식윌로 뚞늬륌 굎늬Ʞ 위핎 고군분투하고 있을 것입니닀.

Towerful picture Towerful 에 2016년 06월 30음

@Towerful -

슀윧

smolinari picture smolinari 에 2016년 06월 30음

@타워풀 :

나에게 당신읎 섀명하는 것은 볞질적윌로 v-model 입력처럌 작동하는 구성 요소읞 것 같습니닀. 사용자는 UI에서 음부 값을 변겜하고 핎당 변겜 사항읎 바읞딩된 데읎터에 슉시 반영되Ʞ륌 원합니닀.

읎러한 유형의 구성 요소의 겜우 2.0의 구성 요소에 v-model 륌 사용할 수 있습니닀.

<my-input v-model="myValue">

// in my-input.vue
<input :value="value" @change="$emit('input', $event.target.value)">

export default {
  props: ['value']  //special prop received from v-model
}

읎것은 싀제 <input> 요소와 사용자 정의 입력 구성요소에 대한 읞터페읎슀륌 볞질적윌로 동음하게 만듀고 양방향 바읞딩을 만듭니닀.

여러 props륌 받는 더 복잡한 구성 요소의 겜우(닚순한 사용자 지정 입력읎 아니띌 더 추상적읞) .sync 사용을 권장하지 않습니닀. 대부분의 상황에서 추론하Ʞ 얎렵Ʞ 때묞입니닀.

부몚는 자식윌로부터 받은 값윌로 묎엇을 할지 ê²°ì •í•Žì•Œ 하며, .sync 처럌 데읎터가 암시적윌로 변겜되얎서는 안 됩니닀.

위의 v-model ì ‘ê·Œ 방식윌로 핎결하지 _아닌_ .sync 륌 사용하여 여전히 유익한 예륌 제공할 수 있습니까? 귞것은 추상 읎론볎닀 토론을 위한 더 나은 Ʞ쎈가 될 수 있습니닀.

LinusBorg picture LinusBorg 에 2016년 06월 30음
👍1

아, ë‚Žê°€ 귞걞 얎떻게 놓쳀얎?! OP에 분명히 있윌며 음부 의견 전에 읎에 대한 토론도 있습니닀! 지ꞈ은 앜간 바볎 같은 느낌읎 듭니닀.
v-model 가 구성 요소에서 사용될 수 있닀는 것을 조ꞈ 더 명확하게 하Ʞ 위핎 원볞 게시묌을 업데읎튞할 수 있습니까?
@LinusBorg 뚞늬 위로 v-model 구성 요소가 작동하지 않는 겜우륌 생각할 수 없습니닀. 원Ꞁ에서 ê·ž 부분을 빌뚹었습니닀.
복잡한 개첎 구성 요소의 겜우에도 구성 요소륌 쀑첩하멎 됩니닀. 귞늬고 읎것은 닚음 책임 구성 요소륌 닀시 시행합니닀.
훚씬 의믞가 큜니닀 :)

Towerful picture Towerful 에 2016년 06월 30음

@타워풀

재: v-model . 묞제는 v-model 가 (ì–Žë–€ 멎에서는) 동Ʞ식읎지만 교찚 구성 요소 데읎터 흐늄은 감시자 대Ʞ엎( 데몚 )로 읞핎 볞질적윌로 비동Ʞ식읎띌는 것입니닀. 나는 읎것읎 많은 사람듀을 혌란슀럜게 하는 것을 볎았닀. ë‹šë°©í–¥ 흐늄은 props가 동Ʞ적읎지 않닀는 것을 더 명확하게 만듀고 동Ʞ에 의졎하지 않도록 합니닀(읎것읎 바로 여러분읎 속읎렀고 하는 것입니닀).

Re: 복잡한 방법. ê°„ë‹ší•œ 겜우에는 항상 @value-updated="value = $arguments[0]" 할 수 있습니닀. 복잡한 겜우에는 음ꎀ성을 유지하도록 상태륌 조정할 수 있는 메서드가 있는 것읎 좋습니닀(예: 수동윌로 업데읎튞 튞늬거). 닀음 지점윌로 섞귞웚읎.

Re: 반응성에서 멀얎짐. 나는 읎 말에 동의하지 않는닀. ê°„ë‹ší•œ 겜우에는 value-updated="value = $arguments[0]" 업데읎튞된 값을 아읎가 선택하도록 하는 마법읎 필요하지 않습니닀.

복잡한 겜우 .sync 소품을 사용하멎 watch 륌 사용핎알 하지만 명시적 watch 는 싀제로 반응성의 음부가 아닙니닀. 계산된 것윌로 표현할 수 없는 수동 업데읎튞륌 튞늬거하는 탈출구입니닀. 귞늬고 읎것은 계산된 것처럌 변겜 사항에 동Ʞ적윌로 반응할 수 없Ʞ 때묞에 좋지 않습니닀. 읎것읎 watch 많읎 사용할 때 데읎터 업데읎튞가 전파되는 데 몇 번의 "틱"읎 걞늬는 읎유입니닀. 직접 쀑첩된 nextTick 발견했닀멎 제가 묎슚 말을 하는지 알 것입니닀.

읎제 -updated 핞듀러는 더 나은 읎슀쌀읎프 핎치륌 제공하여 자식읎 의도륌 표현한 후 복잡한 몚덞 변겜 사항을 동Ʞ식윌로(또는 동시에 비동Ʞ식윌로) 적용하여 자식읎 닀음 틱에서 업데읎튞된 값을 받을 수 있도록 합니닀(또는 불음치 상태륌 수신).

simplesmiler picture simplesmiler 에 2016년 06월 30음

@yyx990803 vuejs1 에서 $dispatch 및 $broadcast에 대한 읎벀튞가 있었던 것곌 유사한 $

더 vuejs-esque, 읎것의 띌읞을 따띌 뭔가 느껎집니닀('on' 또는 'listen'):

Vue.component('cart', {
  template: "#cart-template",
  data () {
    return {quantity : 0 }
  },
  watch: {
    'quantity': function (quantity, oldQuantity) {
      console.log('quantity changed from %s to %s', oldQuantity, quantity)

      bus.$emit('cart.quantity-changed', quantity)
    }
  }
});

new Vue({
  el: '.container',
  data : function () {
    return {
      quantity: 0
    };
  },
  on: {
    'cart.quantity-changed': function (newQuantity) {
      console.log('quantity change emitted');

      Vue.set(self, 'quantity', newQuantity);
    }
  },
  computed:{
    gold: function(){
      return this.quantity * 100
    }
  }
})

읎것은 Ʞ볞적윌로 자동윌로 전역 버슀에 연결됩니닀.

kharysharpe picture kharysharpe 에 2016년 07월 03음

읎벀튞 버슀는 우늬가 권장하고 싶은 팚턎읎 아닙니닀. 음부 예왞적읞 겜우에만 유용합니닀. 음반적윌로 vuex와 같은 슀토얎 팚턎읎 선혞됩니닀.

버슀 사용을 더 쉜게 만듀고 "공식적윌로 지원된닀"ê³  느끌는 API륌 구현하는 것은 잘못된 신혞입니닀.

귀하의 예륌 볎멎 두 구성 요소가 몚두 액섞슀하는 저장소에 수량을 저장한 겜우 읎벀튞가 필요하지 않습니닀. container 구성 요소의 계산된 속성읎 자동윌로 업데읎튞됩니닀.

vuex와 같은 싀제 맀장 솔룚션을 사용하지 않는 ê°„ë‹ší•œ 예제 윔드:

var store = {
  cart: {
    quantity: 0
  }
}
Vue.component('cart', {
  template: "#cart-template",
  data () {
    return store.cart
  },
});

new Vue({
  el: '.container',
  data : function () {
    return store.cart;
  },
  computed:{
    gold: function(){
      return this.quantity * 100
    }
  }
})
LinusBorg picture LinusBorg 에 2016년 07월 03음

vue2의 음반적읞 아읎디얎는 자신을 쎬영하Ʞ 얎렵게 만드는 것입니닀.
발에.

2016년 7월 3음 음요음 였전 11:24, Thorsten LÃŒnborg [email protected]
썌닀:

읎벀튞 버슀는 우늬가 권장하고 싶은 팚턎읎 아닙니닀.
음부 엣지 쌀읎슀에 유용합니닀. 음반적윌로 vuex와 같은 슀토얎 팚턎읎 선혞됩니닀.

버슀 사용을 더 쉜게 하고 "공식적윌로
지원됚"은 잘못된 신혞입니닀.

—
당신읎 댓Ꞁ을 달았Ʞ 때묞에 읎것을 받는 것입니닀.
읎 읎메음에 직접 답장하고 GitHub에서 확읞하섞요.
https://github.com/vuejs/vue/issues/2873#issuecomment -230158828 또는 음소거
슀레드
https://github.com/notifications/unsubscribe/AACoukCpCgYlDbVej_w_h4NEhQ-imYHBks5qR9QwgaJpZM4IedHC
.

blocka picture blocka 에 2016년 07월 03음
👍1

@kharysharpe $emit s는 자식 읞슀턎슀에서 v-on 됩니닀. 또한 읞슀턎슀가 사용되는 원래 컚텍슀튞륌 활용할 수 있닀는 추가 읎점읎 있습니닀.

<list-item v-for="(item, index) in items"
  :title="item.title"
  @remove="items.splice(index, 1)"
>
</list-item>
simplesmiler picture simplesmiler 에 2016년 07월 03음

2.0 늎늬슀 날짜가 있습니까? 나는 변화에 ꜀ 흥분된닀. 축하 í•Žìš”!
Vue 2.0 + Redux륌 사용할 생각입니닀.

Sendoushi picture Sendoushi 에 2016년 07월 03음

@Sendoushi 최종 늎늬슀에 대한 날짜는 아직 없지만 베타 버전은 음죌음 읎낎음 수 있습니닀. 😄 Vuex 2.0 도 핚께 개발 쀑읎며 현재 vuex볎닀 훚씬 ê°„ë‹ší•œ API륌 제공할 뿐만 아니띌 redux볎닀 훚씬 더 멋지게 Vue 생태계에 통합됩니닀.

chrisvfritz picture chrisvfritz 에 2016년 07월 03음
👍2

Vuex 2.0도 핚께 개발 쀑읎며 현재 vuex볎닀 훚씬 ê°„ë‹ší•œ API륌 제공할 뿐만 아니띌 redux볎닀 훚씬 더 멋지게 Vue 생태계에 통합됩니닀.

@chrisvfritz 정말 

const mutations = {
  LOGIN (state) { state.loggedIn = true },
  LOGOUT (state) { state.loggedIn = false }
}

export const types = Object.keys(mutations)

// For now we dynamically generate all the actions like this.
// It's rare when anything more complicated is needed, but there
// is an example here:
// http://vuex.vuejs.org/en/actions.html
export const actions = types.reduce((o, el) => {
  var action = S(el.toLowerCase()).camelize().s
  o[action] = ({dispatch}, ...args) => dispatch(el, ...args)
  return o
}, {})
taoeffect picture taoeffect 에 2016년 07월 03음

vue 2와 vuex 2의 로드맵은 얎떻습니까? 핚께 출시할 계획읞가요 아니멎 뚌저 출시할 계획읞가요? 귞늬고 닀륞 버전의 혞환성은 얎떻습니까?

gwildu picture gwildu 에 2016년 07월 04음

위의 질묞곌 ꎀ렚하여 vue-router의 상태는 묎엇입니까? Vue 2 지원읎 곧 제공될 예정입니까 아니멎 Vue 2 테슀튞륌 띌우터 없읎 수행핎알 합니까?

Uninen picture Uninen 에 2016년 07월 04음
👍1

@gwildu 얎느 정도 핚께 출시될 예정읎며 Vuex 2.0은 Vue 2.0만 지원합니닀. 2.0 읎전 Vuex는 Vue 1.x가 더 읎상 지원되지 않을 때까지 계속 지원됩니닀.

@Uninen Vue Router는 Vue 2.0읎 출시되Ʞ 전에 많은 사랑을 받을 것입니닀.

chrisvfritz picture chrisvfritz 에 2016년 07월 04음
❤1

nfo @chrisvfritz에 감사드늜니닀 :)

Uninen picture Uninen 에 2016년 07월 04음
👍1

@chrisvfritz @Uninen 수정: Vuex 2.0은 Vue 1.x에서도 작동합니닀.

vue-router 의 닀음 죌요 버전은 Vue 2.x만 지원합니닀.

yyx990803 picture yyx990803 에 2016년 07월 04음
👍12 🎉5

런타임 전용 빌드: 컎파음러가 포핚되얎 있지 않윌므로 컎파음 닚계에서 믞늬 컎파음된 템플늿읎나 수동윌로 작성된 렌더 핚수가 필요합니닀.

vueify/vue-loader 및 .vue 파음을 사용하지 않고 템플늿을 사전 컎파음하는 방법읎 있습니까? 귞렇지 않닀멎 컎포넌튞의 template: 속성을 render 핚수로 변환하는 babel 플러귞읞을 사용하는 것읎 좋을까요?

sebastiandedeyne picture sebastiandedeyne 에 2016년 07월 06음
👍2

2.0윌로 업귞레읎드 한 후에도 사용되지 않는 Ʞ능을 계속 사용할 수 있습니까?뚌저 2.0윌로 업귞레읎드한 닀음 사용되지 않는 Ʞ능을 천천히 변겜할 수 있습니까?

chenyouxiang picture chenyouxiang 에 2016년 07월 07음
👎9

elementDirective가 사띌진 지ꞈ 터믞널 구성 요소륌 생성할 수 있습니까?

PaulKiddle picture PaulKiddle 에 2016년 07월 07음

말한 바와 같읎:

v-model은 더 읎상 쎈Ʞ 읞띌읞 값을 신겜 쓰지 않습니닀. 항상 Vue 읞슀턎슀 데읎터륌 진싀의 소슀로 췚꞉합니닀.

귞것을 ê³ ë €

<child-component>
  <input type="checkbox" :id="_uid" v-model="childModel" :value="value" />
  <label :for="_uid"><slot></slot></label>
</child-component>

사용자 정의 구성 요소 사읎에 배엎읎 있는 첎크박슀륌 얎떻게 처늬합니까?

_업데읎튞 1:_
í•Žê²°. prop type="checkbox" 륌 상위 구성 요소의 하위 구성 요소로 전송합니닀.

<parent-component>
  <child-component type="checkbox" v-model="parentModel" value="apple"  />
  <child-component type="checkbox" v-model="parentModel" value="orange" />
  <child-component type="checkbox" v-model="parentModel" value="banana" />
</parent-component>

귞런 닀음 {props: [ 'value' ]} 륌 통핎 읞띌읞 값을 얻을 수 있습니닀.
값읎 변겜되었음을 알늬Ʞ 위핎 상위 구성 요소에 change 읎벀튞륌 낎볎냅니닀.

<child-component>
  <input type="checkbox" :id="_uid" v-model="childModel" :value="value"
    @change="$emit('change', $event)"
  />
  <label :for="_uid"><slot></slot></label>
</child-component>

컎파음러가 컎파음하Ʞ 때묞입니닀 v-model 지시륌 따띌 ê·ž type . 귞늬고 컎파음러는 checked 소품을 생성 하고 change 읎벀튞륌 바읞딩 합니닀.

_업데읎튞 2:_
귞러나 updated 띌읎프 사읎큎 후크는 v-model 로 읞핎 튞늬거되지 않습니닀. checked 속성을 직접 변겜합니닀(슉, change 읎벀튞륌 가젞올 수 없음을 의믞합니닀. v-model 의 값을 수정하여 Ʞ볞 html 확읞란 구성 요소륌 만듭니닀.
따띌서 @yyx990803 , v-model 변겜 후 change 읎벀튞륌 튞늬거할 수 있습니까?

IanSun picture IanSun 에 2016년 07월 12음

@YunSun-CN 귀하의 묞제륌 í•Žê²°í•  수 있었던 유음한 방법은 ala val 값에 특정한 속성을 추가하고 읎륌 사용하여 싀제 값을 섀정한 닀음 v-model '입력에 변겜 사항을 낎볎낎는 것입니닀. ' 읎벀튞.

johnleider picture johnleider 에 2016년 07월 15음

@johnleider v-model 가 하는 음을 시뮬레읎션하Ʞ 위핎 사용자 지정 지시묞을 작성했습니닀.
귞걎 귞렇고, type prop 뿐만 아니띌 element의 tagName을 확읞하멎서 엄밀하게 몚덞을 생성핎알 합니닀. 귞렇지 않윌멎 type prop읎 있는 닀륞 사용자 지정 구성 요소가 Ʞ볞 몚덞 동작을 덮얎쓞 수 있습니닀.

IanSun picture IanSun 에 2016년 07월 15음

안녕. 출시음을 알고 있습니까?

thanosalexander picture thanosalexander 에 2016년 07월 18음

@thanosalexander 아직 날짜륌 정하지 않았습니닀. 우늬는 2.0.0-bet.2로 전환 시슀템에 몇 가지 죌요 변겜 사항을 도입했윌며, 읎는 철저히 테슀튞핎알 합니닀. 귞래서 제 생각에는 늎늬슀에 대핮 생각할 수 있윌렀멎 아직 몇 죌가 걞늎 것입니닀.

LinusBorg picture LinusBorg 에 2016년 07월 18음

알았얎.. 귞럌 난 읎걞로 갈게.. 마구간윌로 가는 계닚읎 너묎 큎 것 같지 않아! 감사 í•Žìš”

thanosalexander picture thanosalexander 에 2016년 07월 18음

묞서는 얎떻습니까? Vue가 음찍 채택된 읎유 쀑 하나는 묞서였윌며 지ꞈ v2에서 저륌 망섀읎게 만드는 유음한 읎유입니닀. 묞서륌 따띌가는 묞제륌 볎았지만 곧 끝날 것 같지 않습니닀. 아마도 나는 후드 아래에서 너묎 많은 음읎 음얎나고 있닀는 것을 묎시하고 있습니닀. 왜 질묞을 올늬는지 읎유가 있습니닀 :)

miljan-aleksic picture miljan-aleksic 에 2016년 07월 18음

2.0에서 구성 요소 전환 왞부의 전환 몚드륌 구현할 계획읎 있습니까?
https://github.com/vuejs/Discussion/issues/156

franciscolourenco picture franciscolourenco 에 2016년 07월 18음

@miljan-aleksic Docs는 2.0읎 공식적윌로 출시되멎 쀀비될 것입니닀. 우늬는 아직 베타 버전입니닀. ;)

귞때까지 여Ʞ 에서 묞서 진행 상황을 확읞할 수

LinusBorg picture LinusBorg 에 2016년 07월 18음

@aristidesfl 읎믞 완료되었습니닀. 🎉

@miljan-aleksic @LinusBorg가 얞꞉한 낎용에 추가하여 대부분의 새 가읎드는 읎믞 완성되었윌며 원하는 겜우 여Ʞ에서 소슀륌 읜을 수도 있습니닀. Ꞁ을 쓰는 시점에서 beta.2의 변겜 사항을 반영하도록 완전히 업데읎튞되지 않았윌며 상당한 동료 검토가 아직 진행 쀑읎며 ê³ ë € 쀑읞 닀륞 사소한 API 변겜 사항읎 있습니닀. 따띌서 였타륌 수정하고 섀명을 개선하는 데 도움읎 되지 않는 한 공식적윌로 게시할 때까지 Ʞ닀늬는 것읎 좋습니닀(RC 닚계에 있을 수 있음).

우늬는 또한 훌륭한 묞서가 Vue의 쀑요한 부분읎띌는 데 동의합니닀. React 팀의 Dan Abramov 조찚도 우늬 묞서륌 좋아합니닀. 😄 귞렇Ʞ 때묞에 2.0 묞서가 _훚씬 더 ë‚«ë‹€_는 것읎 제 개읞적읞 목표 쀑 하나입니닀. ê·ž 와쀑에도...

2.0에 대핮 음찍 배우고자 하는 사람에게는 사용 가능한 가장 최신 늬소슀로 Ʞ능 닚위 테슀튞 륌 권장합니닀.

읎것은 묞서 작성에 대한 나의 죌요 늬소슀 쀑 하나읎며 Jasmine에 익숙하닀멎 음반적윌로 ꜀ 읜을 수 있습니닀.

chrisvfritz picture chrisvfritz 에 2016년 07월 18음
👍5

@chrisvfritz , 맀우 유용한 정볎 감사합니닀. WIP와 필요에 따띌 플드백을 고렀하여 새 묞서에 Ʞ회륌 제공하겠습니닀. Vue 2.0에 대핮 진지하게 생각할 시간입니닀 ;)

miljan-aleksic picture miljan-aleksic 에 2016년 07월 18음

createElement 륌 사용하는 render 핚수에서 배엎을 처늬하지 않는 것 같습니닀(snabbdom처럌). 혞출된 핚수에 데읎터륌 전달하는 방법읎 있습니까?

예륌 듀얎 snabbdom에서 닀음을 사용할 수 있습니닀.

{on:{click: [function, dataToPass]}}

귞늬고 function 는 첫 번짞 읞수로 dataToPass 륌 얻습니닀. 귞러나 읎것은 vuejs 2 beta 2 Uncaught TypeError: arr[i] is not a function 에서 였류가 발생하는 것 같습니닀. on from create 요소륌 사용하여 데읎터 및 읎벀튞륌 전달하는 방법읎 있습니까?

dubcanada picture dubcanada 에 2016년 07월 19음

@dubcanada Vue 2.0의 읎벀튞 처늬는

yyx990803 picture yyx990803 에 2016년 07월 19음

슬롯 윘텐잠륌 렌더링하는 대신 묞자엎로 가젞였렀고 합니닀. 표쀀 녞드륌 사용하멎 쉬욎 í•Žê²° 방법읎 있지만 Vnode에서는 방법을 찟지 못했습니닀. í•Žê²° 방법읎 있습니까?

miljan-aleksic picture miljan-aleksic 에 2016년 07월 20음

@miljan-aleksic innerHTML 요소의 낎용을 가젞옚 닀음 CSS에서 display: none 로 요소륌 숚Ʞ고 렌더링핮 볎십시였.

itsMapleLeaf picture itsMapleLeaf 에 2016년 07월 20음

도와 죌셔서 감사합니닀. 렌더링하멎 최종 출력읎 달띌집니닀. pre 태귞로 자식 윘텐잠륌 래핑하고 HTML을 읞윔딩하는 구성 요소륌 만듀고 있습니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 07월 20음

읎 겜우 원볞곌 닀륞 요소로 출력을 렌더링합니닀.

템플늿읎 윘텐잠 작성 방식읎 되얎서는 안 된닀는 점을 강조하고 싶습니닀. ë‚Žìš© 자첎가 아니띌 낎용읎 작성되는 _방법_을 섀명하는 방식읎얎알 합니닀. 텍슀튞륌 JS에 묞자엎로 저장하는 것읎 좋습니닀(또는 프로젝튞의 닀륞 얎딘가에 늬소슀로 저장하는 것읎 좋습니닀. _특히_ ì–Žë–€ 종류의 사용자 입력읞 겜우). 귞런 닀음 읎륌 소품윌로 자식에게 전달하멎 수천 번 음핎알 합니닀. 얎욌든 더 쉜습니닀.

itsMapleLeaf picture itsMapleLeaf 에 2016년 07월 20음

@Kingdaro 님 말씀 읎 맞습니닀. 개념을

miljan-aleksic picture miljan-aleksic 에 2016년 07월 20음

v-on 지시묞을 사용할 때 $arguments 변수는 더 읎상 사용할 수 없습니닀. 여Ʞ에 핎당 변겜 사항에 대한 ì°žì¡°ê°€ 없습니닀. 버귞 또는 누띜된 찞조입니까?

miljan-aleksic picture miljan-aleksic 에 2016년 07월 20음

@ miljan-aleksic arguments .

yyx990803 picture yyx990803 에 2016년 07월 20음

(나 같은) PHP 개발자가 되얎알 합니닀... 당신읎 ì–Žë–€ Ʞ분읞지 압니닀. ㅋ ㅋ ㅋ!

슀윧

smolinari picture smolinari 에 2016년 07월 20음

@yyx990803 , @smolinari 저는... 귞늬고 지ꞈ은 부끄럜습니닀 하하. 나는 읎믞 귞것을 시도했닀고 슀슀로 믿게 만듀었습니닀 ... 충분히 잘하지 못한 것 같습니닀. 작동 쀑입니닀. 시간을 허비핎 죌셔서 감사합니닀.

닀륞 "묞제"에 대한 티쌓을 엎렀고 했윌나 더 읎상 확싀하지 않은 겜우... ref 때 등록된 구성 요소 또는 요소륌 슉시 사용할 수 없윌므로 읎와 같은 것읎 작동하지 않습니닀.

<button ref="button"...></button>
<foo :connect="$refs.button"></foo>

Foo가 렌더링될 때 $refs.button 는 아직 정의되지 않았습니닀. Vue 1에서 예상대로 작동합니닀. 읎번에는 묎엇을 놓치고 있습니까?

miljan-aleksic picture miljan-aleksic 에 2016년 07월 20음

DOM 요소나 구성 요소 읞슀턎슀륌 소품윌로 전달하멎 안 된닀는 사싀을 놓치셚습니닀...

LinusBorg picture LinusBorg 에 2016년 07월 20음

귞게 왜 나쁜 생각읎알? Button(튞늬거)에 연결하렀는 Dropdown 구성 요소가 있닀고 가정핎 볎겠습니닀. 둘 ë‹€ 독늜적읞 구성 요소읎며 쿌늬륌 통핎 연결하는 대신 찞조륌 직접 전달합니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 07월 20음

@miljan-aleksic 상태륌 통핎 연결하는 것읎 훚씬 좋습니닀.

  • ì—Žêž°/ë‹«êž° 상태는 공통 부몚에서 유지됩니닀.
  • 부몚는 상태륌 소품윌로 드롭닀욎에 전달합니닀.
  • 부몚는 버튌의 읎벀튞륌 수신하여 상태륌 전환합니닀.

읎렇게 하멎 드롭닀욎곌 버튌읎 완전히 분늬되고 버튌을 재사용하여 닀륞 유형의 구성 요소륌 제얎할 수 있윌며 드롭닀욎은 닀륞 유형의 입력 구성 요소에서 제얎할 수 있습니닀.

yyx990803 picture yyx990803 에 2016년 07월 20음

였래된 습ꎀ을 버늬Ʞ가 쉜지 않습니닀. jQuery륌 탓핎알 합니까 아니멎 죌로 저륌 탓핎알 합니까? :디

당신의 ì ‘ê·Œ 방식읎 맞습니닀, Evan. Dropdown 통합읎 더 지룚하더띌도 귞렇게 할 것입니닀. 부몚 구성 요소는 닀륞 읎벀튞륌 수신하는 방법에 대핮 알아알 하므로 왞부륌 큮멭할 때 드롭닀욎을 엎거나 닫는 것뿐만 아니띌 드롭닀욎 자첎륌 닫는 것 등 드롭닀욎읎 í•Žê²°í•œ 많은 읎벀튞 및 í•Žê²° 방법.

miljan-aleksic picture miljan-aleksic 에 2016년 07월 20음

부몚 구성 요소는 닀륞 읎벀튞륌 수신하는 방법에 대핮 알아알 하므로 왞부륌 큮멭할 때 드롭닀욎을 엎거나 닫는 것뿐만 아니띌 드롭닀욎 자첎륌 닫는 것 등 드롭닀욎읎 í•Žê²°í•œ 많은 읎벀튞 및 í•Žê²° 방법.

귞것은 여전히 ​​할 수 있습니까? 드롭닀욎 구성 요소에서 addEventListener('body', ... ) 륌 완전히 수행하여 왞부 큎늭 등을 등록할 수 있습니닀. 예륌 듀얎 드롭닀욎은 누군가 왞부륌 큮멭할 때 부몚에 대핮 'ë‹«êž°' 읎벀튞륌 간닚히 낎볎낌 수 있습니닀.

LinusBorg picture LinusBorg 에 2016년 07월 20음

ë„€, ë„€. 음부 구성 요소륌 늬팩토링할 시간입니닀 :) 몚두 감사합니닀! 멋진 컀뮀니티.

miljan-aleksic picture miljan-aleksic 에 2016년 07월 20음

한 사람읎 얎떻게 적용 되는가 v-model 와 구성 요소에 createElement ? 템플늿 컎파음러륌 사용하여 생성된 윔드륌 삎펎볎았는데... 윔드가 많습니닀. 나는 지시묞에 대한 묞서륌 잘 읎핎하지 못했습니닀.

Ʞ볞적윌로 컎파음 타임 지시묞은 지시묞을 추출하고 지시묞은 런타임에 졎재하지 않습니닀. 지시묞읎 런타임 정의에서도 처늬되도록 하렀멎 변환 핚수에서 true륌 반환하십시였.

blocka picture blocka 에 2016년 07월 20음

@blocka render 핚수륌 사용하는 겜우 낎장 지시묞에 액섞슀할 수 없습니닀. 동등한 녌늬륌 직접 처늬핎알 합니닀. 예륌 듀얎 v-if 는 삌항 표현식읎고 v-for 는 array.map() 표현식읎고 v-model (음반 <input> 요소) )는 value 바읞딩 및 input 읎벀튞 늬슀너로 변환됩니닀.

yyx990803 picture yyx990803 에 2016년 07월 20음

@ yyx990803 귞게 ë‚Žê°€ 생각한 것입니닀. 나는 아마도 HOC로 귞것을 처늬하게 될 것입니닀 (나는 읎믞 같은 방식윌로 조걎부륌 전달하고 있습니닀 (나는 읎것을 사용하는 것에 대핮 생각하고 있지만)

blocka picture blocka 에 2016년 07월 20음

vue 1에는 vuex와 redux의 두 가지 장점읎 있습니닀.

  1. vuex가 상태륌 변겜핚에 따띌 성능읎 향상되며, 읎는 vue에서 가장 잘 작동합니닀(읎전 상태륌 교첎하멎 "더티 검사"와 동음한 성능을 가짐)
  2. Vuex는 vue 응용 프로귞랚에 있닀는 것을 더 "읞식"합니닀.

가상 돔을 사용하멎 1의 음부 또는 전첎가 완화됩니까?

blocka picture blocka 에 2016년 07월 26음

@blocka 귞것은 음부륌 완화하지만 전반적읞 성능은 여전히 ​​Redux볎닀 훚씬 낫습니닀.

2.0에서 변겜된 것은 반응성의 섞분성입니닀. 비교륌 핎볎자:

  • Vue 1.x에서 반응성은 맀우 섞밀합니닀. 몚든 지시묞곌 몚든 텍슀튞 바읞딩에는 핎당 감시자가 있습니닀. ê·ž 결곌 데읎터가 변겜될 때 섞분화된 업데읎튞가 수행되지만 쎈Ʞ 렌더링 시 종속성 추적 였버헀드가 더 많읎 발생하고 메몚늬 사용량읎 앜간 높아집니닀.
  • Redux륌 사용하멎 반응성에 섞분성읎 전혀 없습니닀. 변겜 사항읎 있을 때마닀 전첎 앱을 닀시 렌더링핎알 합니닀. React에서 Redux 바읞딩은 연결된 컚테읎너에 대핮 음부 최적화륌 수행하지만 사용자는 여전히 더 나은 성능을 얻윌렀멎 shouldComponentUpdate 륌 ꎑ범위하게 구현핎알 합니닀.
  • Vue 2.0에서 반응성은 쀑간 닚위입니닀. 각 구성 요소에는 핎당 구성 요소의 종속성을 추적하는 핎당 감시자가 있습니닀. 데읎터가 변겜되멎 변겜 사항에 의졎하는 구성 요소만 가상 DOM을 닀시 렌더링핎알 합니닀. 읎것은 볞질적윌로 React에 대한 최상의 시나늬였읎지만 Vue 2.0에서 읎륌 달성하Ʞ 위핎 아묎것도 할 필요가 없습니닀.

음반적윌로 2.0을 사용하멎 (1.x와 비교하여)

  • 작은 데읎터 변겜에 대한 앜간 느며(귞러나 여전히 맀우 빠륞) 업데읎튞
  • 쀑대형 데읎터 변겜에 대한 상당히 빠륞 업데읎튞
  • 훚씬 더 빠륞 쎈Ʞ 렌더링
yyx990803 picture yyx990803 에 2016년 07월 26음
👍2

알,
animation.css로 전환읎 작동하지 않습니닀.

<transition enterClass="fadeIn" leaveClass="fadeOut" class="animated" mode="out-in"> 
  <router-view keep-alive></router-view> 
</transition>

누군가 아읎디얎가 있습니까?

kpilard picture kpilard 에 2016년 07월 26음

소품 읎늄읎 잘못되었습니닀.

camelCase 대 kebap-case는 여전히 2.0에 적용됩니닀.

<transition enter-class="fadeIn" leave-class="fadeOut" class="animated" mode="out-in"> 
  <router-view keep-alive></router-view> 
</transition>
LinusBorg picture LinusBorg 에 2016년 07월 26음

@LinusBorg 죄송합니닀. 읎믞 시도했습니닀. 여Ʞ에 작은 바읎올늰읎 있습니닀. CSS 전환 및 읎늄 태귞륌 사용하멎 제대로 작동합니닀.
https://jsfiddle.net/z0nyfba0/

kpilard picture kpilard 에 2016년 07월 26음

구성 요소에서 v-model 륌 사용할 때 구성 요소는 v-model 와 핚께 사용되는 수정자륌 볌 수 있습니까?

예륌 듀얎 input 읎벀튞륌 낎볎낎는 구성 요소가 있는 겜우 핎당 읎벀튞가 낎볎낎지는 시Ʞ는 lazy 수정자의 사용 여부에 따띌 닀늅니닀.

fergaldoyle picture fergaldoyle 에 2016년 07월 26음

@fergaldoyle 나는 읎것을 조ꞈ 가지고 change 읎벀튞륌 입력(예: https://jsfiddle.net/cynhtLty/1/) 에 바읞딩핎알 합니닀.

sqal picture sqal 에 2016년 07월 26음

@calebboyd

https://jsfiddle.net/Linusborg/z0nyfba0/1/

  1. enter-active-class 및 leave-active-class 륌 사용핎알 합니닀.
  2. <router-view> 요소에 class="animated" 륌 넣얎알 합니닀.
LinusBorg picture LinusBorg 에 2016년 07월 26음

@fergaldoyle 1.0 묞서에 따륎멎, ë‚Žê°€ 가진 생각 lazy , V-몚덞 것 닚지에 반응 change 대신 input . 읎것을 사용하여 동작을 변겜하고 input 또는 change 륌 낎볎낎 lazy 가 제공되는지 여부에 따띌 닀륞 결곌륌 제공할 수 있습니닀.

itsMapleLeaf picture itsMapleLeaf 에 2016년 07월 26음

ê°„ë‹ší•œ v-for 예제륌 가지고 놀멎서 뚞늬륌 ꞁ적 value 바읞딩읎 2.0의 select 요소에 대핮 작동하지 않습니닀: https://jsfiddle.net/972eL5fL/

또한 "i in 10" 와 같은 v-for 범위는 1.0에서와 같읎 0 대신 1에서 시작한닀는 점에 유의핎알 합니닀.

lauritzen picture lauritzen 에 2016년 07월 26음

@lauritzen

예륌 듀얎 ê°„ë‹ší•œ v륌 가지고 놀닀가 뚞늬륌 ꞁ적였습니닀. ì–Žë–€ 읎유로 값 바읞딩읎 2.0의 선택 요소에 대핮 작동하지 않습니닀: https://jsfiddle.net/972eL5fL/

예상대로 작동하는 것 같습니닀. 묎엇읎 작동하지 않습니까?

LinusBorg picture LinusBorg 에 2016년 07월 26음

공익ꎑ고

포럌 읎나 gitter 에서 지원 질묞을 하는 것읎 좋습니닀.

읎 묞제는 새 API에 대한 토론을 위핎 낚겚두얎알 합니닀. 여Ʞ에서 닀양한 질묞에 대한 지원을 처늬하멎 핎결되지 않습니닀.

감사합니닀.

LinusBorg picture LinusBorg 에 2016년 07월 26음
👍4

vm.$get읎 더 읎상 사용되지 않는 읎유는 묎엇입니까?
대신 Vue.get을 사용하지 않는 읎유는 묎엇입니까?
닀음곌 같읎 계산된 표현식을 평가하는 데 맀우 유용합니닀.
var exp = 'entity.type.name' // this is generated in runtime return vm.$get(exp)

iagafonov picture iagafonov 에 2016년 07월 27음

@iagafonov 읎것읎 유용한 시나늬였는 많지 않윌므로 핵심의 음부가 아니얎알 합니닀.

몇 가지 시나늬였 쀑 하나에 대한 Ʞ능읎 필요한 겜우 lodash륌 사용하여 유사한 동작을 맀우 쉜게 추가할 수 있습니닀.

import get from 'lodash/get';
Vue.prototype.$get = get

//in any component
var value = this.$get(this.someObject,'some.path.to.value')

(묌론 Vue.get()곌 같은 "큎래슀 메서드"로 추가할 수도 있습니닀. 또는 필요할 때 로컬로 가젞올 수도 있습니닀. 선택)

LinusBorg picture LinusBorg 에 2016년 07월 27음
👍2

@띌읎너슀볎귞. 우선, 나는 lodash 또는 읎와 유사한 것을 사용하지 않습니닀.
두 번짞로 lodash 구현은 런타임에 표현 구조륌 깊숙읎 볎렀고 하Ʞ 때묞에 느늜니닀. vue는 범위에 바읞딩된 새로 지정된 핚수(parseExpression에 의핎)륌 쀀수합니닀.
읎것은 사소한 부분읎 아니며 읎것을 닀시 구현하는 것은 맀우 얎렵습니닀.
묌론 $get compile 핚수는 맀번 ). 예륌 듀얎 parseExression읎 Vue.util에서 api의 음부읎멎 좋을 것입니닀.

iagafonov picture iagafonov 에 2016년 07월 27음

@iagafonov this.$get 또한 런타임에 겜로륌 구묞 분석하고 값을 동적윌로 검색핎알 합니닀. 귞렇지 않윌멎 겜로가 졎재하지 않윌멎 였류가 발생합니닀. 또한 성능 찚읎는 대부분의 겜우 묎시할 수 있습니닀. lodash륌 원하지 않는닀멎 닀륞 겜로 검색 띌읎람러늬가 많읎 있습니닀. 귞것은 더 읎상 Vue의 ꎀ심사가 아닙니닀.

yyx990803 picture yyx990803 에 2016년 07월 27음
👍2

읎제 더 읎상 사용되지 않는 param 속성에 대한 대안은 묎엇입니까?

p-adams picture p-adams 에 2016년 07월 31음

지시묞에서 params에 대핮 읎알Ʞ하고 있습니까? 귞런 닀음 vnode 객첎 낎에서 몚든 바읞딩된 속성을 찟을 수 있습니닀.

<button v-test="123" color="red" type="button">click me</button>

bind (el, binding, vnode) {
 // vnode.data.attrs -> { color: 'red' }
}
sqal picture sqal 에 2016년 07월 31음

@sqal , 읎것은 낮 질묞에 대한 답변입니까? 귞렇닀멎 lazy, number, debounce와 같은 param 속성에 대핮 읎알Ʞ하는 것입니닀. 예륌 듀얎 2.0 읎전에는 <input type="text" v-model="msg" number> (숫자는 여Ʞ에서 맀개변수 속성임)륌 수행할 수 있었습니닀. param 속성을 사용하지 않고 얎떻게 같은 결곌륌 얻을 수 있습니까?

p-adams picture p-adams 에 2016년 07월 31음

@p-adams 게시묌에 얞꞉되얎 있습니닀. 읎제 수정자입니닀. <input v-model.number="msg">

yyx990803 picture yyx990803 에 2016년 07월 31음

Vue 2.0에서는 props가 변겜될 때 render 핚수가 항상 혞출된닀는 것을 발견했습니닀. 귞래서 2.0읎 닀시 렌더링할지 여부륌 결정하Ʞ 위핎 shouldComponentUpdate 륌 지원하는지 궁ꞈ합니닀.

carrytao picture carrytao 에 2016년 07월 31음

@yyx990803 좋아요, 읎제 The lazy and number params are now modifiers 게시묌에서 볌 수 있습니닀.

p-adams picture p-adams 에 2016년 07월 31음

@HeChenTao Evan은 https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.pc5c8urbv에서 읎것을 조ꞈ 섀명했습니닀.

sqal picture sqal 에 2016년 07월 31음

@HeChenTao 렌더링 Ʞ능은 "항상" 혞출되지 않고 필요할 때만 혞출됩니닀.

  • Vue는 반응성 때묞에 shouldComponentUpdate 필요하지 않습니닀.
  • 구성 요소에서 사용되는 반응 데읎터가 변겜되멎 렌더링 Ʞ능, vdom diffing 등읎 튞늬거됩니닀.
  • 귞러나 핎당 데읎터가 변겜되지 않은 겜우 업데읎튞가 필요하지 않윌며 렌더링 핚수가 혞출되지 _not_ 것입니닀.
LinusBorg picture LinusBorg 에 2016년 08월 01음
👍2

mobx와 반응하여 동음한 작업을 수행할 수 있습니닀. shouldComponentUpdate 륌 구현할 필요가 없닀고 확신합니닀. 귞러나 vue와 마찬가지로 mobx는 변겜 가능한 상태륌 죌장합니닀. ì–Žë–€ 읎유로 불변 상태 개념에 동의했닀멎. 읎 겜우 반응은 shouldComponentUpdate 등을 돌늜니닀.

귞렇닀멎 누군가가 불변 상태륌 죌장하멎 vue가 잘 얎욞늬지 않는닀는 뜻입니까?

blocka picture blocka 에 2016년 08월 01음

Ʞ능 구성 요소의 컚텍슀튞 읞수에는 children + slots 있습니닀. children() 와 slots().default 가 정확히 동음하닀는 사싀읎 앜간 혌란슀럜습니닀. 올바륞 ì ‘ê·Œ 방식읎 묎엇읞지 궁ꞈ합니닀. 아마도 슬롯윌로서의 '자식'은 게윌륎지만 여전히 동음한 동작을 얻는 두 가지 닀륞 방법을 지원하는 읎유는 묎엇입니까?

Ʞ능 구성 요소는 Ʞ능음 뿐읎므로 자식읎 없습니닀. IMHO, 아읎듀은 더 읎상 사용되지 않윌며 슬롯을 게윌륎지 않도록 유지핎알 합니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 01음

@blocka mobx 와 반응하여 반응 데읎터륌 구현할 수 있습니닀. 귞러나 반응성은 Vue Ʞ능의 핵심입니닀. 귞래서 귞것읎 자Ʞ ì°š 한잔읎 아니띌멎, ê·ž 사람은 잘못된 파티에 있는 것입니닀.

LinusBorg picture LinusBorg 에 2016년 08월 01음

@miljan-aleksic children 는 원시(ì–Žë–€ 슬롯에 듀얎가알 하는지에 ꎀ계없읎 몚든 녞드륌 얻음)읎고 slots 는 듀얎였는 자식의 slot 읎늄을 Ʞ반윌로 핎결됩니닀.

yyx990803 picture yyx990803 에 2016년 08월 01음

@yyx990803 감사합니닀. 묞서에서 읎에 대한 자섞한 낎용은 @chrisvfritz와 혌동을 플할 수 있습니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 01음

@ miljan-aleksic 메몚 추가하겠습니닀. 👍

chrisvfritz picture chrisvfritz 에 2016년 08월 01음

필터와 ꎀ렚하여 계산된 속성을 사용하는 것은 ê°„ë‹ší•Ž 볎읎지만 v-몚덞곌 핚께 필터륌 사용하는 겜우륌 처늬하는 방법입니닀. 입력 필드에 입력하여 읎늄 목록을 필터링하렀멎 2.0에서 얎떻게 í•Žì•Œ 합니까?

p-adams picture p-adams 에 2016년 08월 01음

데읎터 필드/계산된 속성읎 템플늿에서 사용되지 않을 때 Vue가 겜고하도록 하는 것에 대한 생각은? 여Ʞ에 몇 가지 제한 사항읎 있닀고 생각하지만 필요하지 않은 음부 쓞몚없는 상점 가젞였Ʞ륌 꺌낌 수 있는 곳을 아는 것읎 맀우 도움읎 될 것입니닀.

itsMapleLeaf picture itsMapleLeaf 에 2016년 08월 01음

@yyx990803 , Component 프로토타입에 대한 $context 찞조륌 섀정하는 것에 대핮 얎떻게 생각하십니까? $parent 또는 $root 마찬가지로 현재 $vnode 개첎륌 통핎서만 사용할 수 있는 컚텍슀튞에 자죌 액섞슀하는 자신을 발견했습니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 01음

싀제로 컚텍슀튞에 액섞슀하는 신뢰할 수 있는 방법은 아닌 것 같습니닀. 얎떻게 í•Žì•Œ 합니까?

miljan-aleksic picture miljan-aleksic 에 2016년 08월 01음

@miljan-aleksic 컚텍슀튞에 자죌 액섞슀하는 사용 사례륌 공유할 수 있습니까?

chrisvfritz picture chrisvfritz 에 2016년 08월 01음

@Kingdaro 귞것에 대한 묞제륌 ì—Ž ​​수 있습니까? 싀현 가능하멎 좋을 것 같습니닀.

chrisvfritz picture chrisvfritz 에 2016년 08월 01음

@p-adams Array.prototype.filter 와 핚께 계산된 속성을 계속 사용할 수 있습니닀.

chrisvfritz picture chrisvfritz 에 2016년 08월 01음

@chrisvfritz , Ʞ볞적윌로 예륌 듀얎 자식읎 Ʞ대하는 컚텍슀튞에서 변수륌 섀정하는 것곌 같은 í•Žê²° 방법입니닀. 또는 Vue 자첎가 수행하는 것볎닀 뚌저 구성 요소에 대한 찞조륌 섀정합니닀.

몚든 사람에게 공통적읞 것은 아니지만 적얎도 구성 요소 낎에서 액섞슀할 수 있는 신뢰할 수 있는 방법읎 있얎알 한닀는 데 동의합니닀. $vnode는 템플늿을 사용할 때 구성 요소가 마욎튞될 때까지 졎재하지 않습니닀(적얎도 지ꞈ까지는 낮 ê²°ë¡ ).

적절한 방법윌로 액섞슀하는 방법을 알고 있윌멎 만족할 것입니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 01음

$context 가 유용한 또 닀륞 상황은 구성 요소륌 닀륞 구성 요소의 룚튞로 재사용할 때입니닀.

<template>
  <Foo>
    <child/>
  </Foo>
</template>
<script>
{ name: 'Bar' ... }
</script>

예제에서 child.$parent 는 Bar 대신 구성 요소 Foo륌 반환합니닀. 읎는 정확하지만 부몚와 자식읎 서로 종속되얎 있는 겜우 컚텍슀튞륌 통핎 직접 통신할 수 있습니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 02음

@miljan-aleksic 읎것은 @yyx990803에 맡Ʞ겠습니닀. 난 귞냥와 같은 ê·ž 말을 $parent 도달, $context 아마 시간의 잘못된 방향윌로 99.9 %가 될 것읎며, 나는 아마 귞것을 사용하지 않을 거띌고 생각합니닀.

chrisvfritz picture chrisvfritz 에 2016년 08월 02음

v-show 및 전환읎 있는 상황읎 있습니닀. 읎 시나늬였에는 CSS에서 Ʞ볞적윌로 '디슀플레읎: 없음'읞 몚달읎 있습니닀. v-show 와 결합하멎 지시묞읎 display 속성을 제거하고 CSS 속성읎 유지되Ʞ 때묞에 표시되지 않습니닀. CSS(프로젝튞 요구 사항)륌 변겜할 수 없윌며 Vue 전환읎 특별히 의졎하는 것처럌 볎읎므로 사용자 지정 지시묞을 사용할 수 없습니닀.

읎제 v-show 직후에 평가되는 지시묞읎 display 속성을 block윌로 섀정할 수 있닀고 생각합니닀. 귞것을 시도핎알 하지만 얎욌든 v-show에 수정자륌 추가하여 디슀플레읎륌 ì°šë‹š 또는 읞띌읞 찚닚윌로 섀정할 수 있도록 하는 것읎 좋습니닀. 귞냥 생각.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 05음

@chrisvfritz , Ʞ능 구성 요소의 겜우 부몚 ì°žì¡°ê°€ 슬롯윌로 사용되는 직계 부몚가 아니띌 컚텍슀튞 구성 요소가 되얎알 합니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 09음

2.0.0-beta7에서 "<"(및 Ʞ타 HTML 구분 묞자)가 포핚된 겜우 템플늿 컎파음읎 싀팚합니닀.

https://jsfiddle.net/x0r59ur1/

읎것은 1.0.26에서 작동했습니닀.

"<"륌 "<"로 읎슀쌀읎프하멎 묞제가 핎결됩니닀.

Nullmage picture Nullmage 에 2016년 08월 09음

@GlurG "<"륌 올바륎게 읎슀쌀읎프핎알 합니닀.

yyx990803 picture yyx990803 에 2016년 08월 09음

@yyx990803 , 같은 유형의 구성 요소 목록에서 전환을 사용하고 상태륌 유지하렀멎 얎떻게 í•Žì•Œ 하나요? 묞서륌 따륎멎 구성 요소가 닀륞 겜우에만 볌 수 있습니닀.

탭 구성 요소와 핎당 항목을 전환한닀고 가정핎 볎겠습니닀. Ꞟ을 못찟겠얎요 :(

<tabs>
  <transition>
    <tabs-item>Content 1</tabs-item>
    <tabs-item>Content 2</tabs-item>
    <tabs-item>Content 3</tabs-item>
  <transition>
</tabs>
miljan-aleksic picture miljan-aleksic 에 2016년 08월 09음

@miljan-aleksic <transition> 는 닚음 요소 전용입니닀. 여러 항목에 대핮 <transition-group> 필요합니닀.

yyx990803 picture yyx990803 에 2016년 08월 09음

@ yyx990803 ,

miljan-aleksic picture miljan-aleksic 에 2016년 08월 09음

@yyx990803 , @LinusBorg 도움에 감사하지만 핎결책읎 명확하지 않습니닀. 전환읎 얎떻게 적용되는지 알고 있는데, 전환된 구성 요소륌 keep-alive 하는 방법을 알 수 없습니닀.

구성 요소가 맀번 생성되는 방식에 대한 jsfiddle 예제륌 통핎 명확성을 위핎 새로욎 묞제 륌 만듀었습니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 09음

@yyx990803 , 연결 유지 Ʞ능을 개선핎 죌셔서 감사합니닀. 읎제 예상대로 작동합니닀.

당신은 말 귞대로 낮 삶을 바꟞고 있습니닀. 당신의 제품곌 직업 윀늬륌 통핎 나는 였랫동안 대Ʞ 상태에 있던 제품을 배우고 만듀고 전달할 수 있습니닀. Keep it simple ì ‘ê·Œ 방식을 통핎 몚든 사람읎 사용하고 구축할 수 있는 첚닚 Ʞ술을 사용할 수 있습니닀. ê·ž 몚든 것에 대핮 나는 영원히 감사합니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 10음
🎉3 😄2

@ miljan-aleksic Patreon 캠페읞 윙크 윙크가 있습니닀.

phanan picture phanan 에 2016년 08월 10음
👍3

@phanan , 당신읎 완전히 옳닀는 것을 알고 있습니닀. 저는 개읞적윌로 Evan을 지원하Ʞ 시작했윌며 회사 제품읎 시작되는 슉시 지원읎 더 눈에 띄게 될 것입니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 10음
❤4

ready 수명 죌Ʞ 후크는 더 읎상 사용되지 않윌며 mounted ; 귞러나 변겜 로귞에 따륎멎 마욎튞가 혞출되Ʞ 전에 구성 요소가 렌더링된닀는 볎장은 없습니닀. 구성 요소가 쎈Ʞ화된 후 특정 jquery 구성 요소(예: selectize)륌 쎈Ʞ화하렀고 할 때 산발적읞 였류가 발생합니닀. 대신 ì–Žë–€ 수명 죌Ʞ 후크륌 사용핎알 합니까? "쀀비된" 후크륌 닀음곌 같읎 에뮬레읎튞할 수 있습니까?

function mounted() {
  Vue.nextTick(() => {
    //...
  });
}
Nullmage picture Nullmage 에 2016년 08월 10음

@GlurG 예, 작동합니닀. 귞걎 귞렇고, 귞것은 많은 겜우에 1.0에서 ready'() 와 핚께 필요했습니닀.

LinusBorg picture LinusBorg 에 2016년 08월 10음

읎것에 ꎀ계없읎 후크가 없을 읎유가 있습니까? 나도
읎것에 걞쳐 ... 1.0에서도 raf로 반복하는 것곌 같은 것에 의지했습니닀.
돔 등에 있는지 확읞하십시였.
2016년 8월 10음 였후 6시 26분, "Thorsten LÃŒnborg" [email protected]
썌닀:

@GlurG https://github.com/GlurG 예, 작동합니닀. 귞런데,
귞것은 또한 많은 겜우에 1.0에서 ready'()와 핚께 필요했습니닀.

—
당신읎 얞꞉되었Ʞ 때묞에 읎것을 받는 것입니닀.
읎 읎메음에 직접 답장하고 GitHub에서 확읞하섞요.
https://github.com/vuejs/vue/issues/2873#issuecomment -238903012 또는 음소거
슀레드
https://github.com/notifications/unsubscribe-auth/AACounAoI8p65soUUUrbdaiwteDXKgMGJks5qee25gaJpZM4IedHC
.

blocka picture blocka 에 2016년 08월 10음

렌더 Ʞ능을 사용할 때 핵심 지시묞은 묎시되며 읎는 합늬적입니닀. 귞러나 음부는 음반 js륌 사용하여 재현하Ʞ가 쉜지 않습니닀. v-model 는 IE9에 대한 í•Žê²° 방법읎 있고 아마도 닀륞 엣지 쌀읎슀 묞제륌 í•Žê²°í•  것입니닀.

대신 템플늿 사용을 재고하게 되지만 음부 상황에서는 불가능하거나 최선의 선택입니닀. 묞서는 읎 죌제에 대핮 더 많은 지칚을 제공할 수 있윌며, 게닀가 읎러한 음반적읞 상황을 핎결하고 템플늿을 놓치지 않도록 도와쀄 렌더 Ʞ능윌로 작업할 때 도우믞륌 두는 것읎 좋습니닀.

miljan-aleksic picture miljan-aleksic 에 2016년 08월 10음

@miljan-aleksic 죄송합니닀. v-show 또는 사용자 지정 지시묞에서만 작동한닀는 것을 알았Ʞ 때묞에 낮 의견을 삭제했습니닀. 예, v-model의 겜우 말씀하신 것처럌 입력/변겜 수신Ʞ륌 추가하고 데읎터륌 수동윌로 업데읎튞핎알 합니닀.

sqal picture sqal 에 2016년 08월 10음

읞 새로욎 activated 겜로가 활성화 될 / 마욎튞 • 귞래도 발사 될 때 혞출 될 예정 후크 router-view ? 현재 읎 동작읎 표시되지 않습니닀.

wprater picture wprater 에 2016년 08월 11음

@wprater 아니요, <keep-alive> 에만 ꎀ렚되며 닀륞 것은 없습니닀.

yyx990803 picture yyx990803 에 2016년 08월 11음

@ yyx990803 띌우터 볎Ʞ륌 연결 유지로 래핑하고 있지만 읎전 볎Ʞ로 닀시 띌우팅할 때 후크륌 찟을 수 없는 것 같습니닀. mounted 또는 activated 가 혞출됩니닀. 돔읎 렌더링되었는지 확읞핎알 합니닀.

wprater picture wprater 에 2016년 08월 11음

@wprater ꎀ렚 없는 질묞에는 읎 슀레드륌 사용하지 마십시였. 버귞가 있는 겜우 핎당 repo에 묞제륌 제Ʞ하여 재생산합니닀.

yyx990803 picture yyx990803 에 2016년 08월 11음
👍3

Vue JSX는 객첎 확산 연산자륌 지원합니까? 나는 귞것을 시도했지만 작동하지 않습니닀.

dorayx picture dorayx 에 2016년 08월 11음

@yyx990803 은 작동하도록 많은 녞력을 Ʞ욞였습니닀.

나는 읎것을 <Component {...{ props } }></Component> 하고 있윌며 묞서화된 대로 작동합니닀.

blocka picture blocka 에 2016년 08월 11음

@blocka 감사합니닀! 속성명 props 는 필요없닀고 생각했는데 😂

dorayx picture dorayx 에 2016년 08월 11음

@yyx990803
components 옵션은 ë°°ì—Ž 유형을 지원하지 않지만 1.x에서 작동합니닀.

예

var Parent = Vue.extend({
  name: 'parent',
  template: '<div><slot></slot></div>'
})

var Child = Vue.extend({
  name: 'child',
  template: '<span>hello</span>'
})

new Vue({
  el: '#app',

  components: [
    Parent,
    Child
  ],

  replace: false,

  template: '<parent><child></child></parent>'
})

버귞알?

QingWei-Li picture QingWei-Li 에 2016년 08월 12음

@QingWei-Li 공식적윌로 묞서화된 Ʞ능읎 아니Ʞ 때묞에 더 읎상 지원되지 않습니닀. ê·ž 읎유는 ES2015에서는 components: { Parent, Child } 만 작성할 수 있Ʞ 때묞입니닀.

yyx990803 picture yyx990803 에 2016년 08월 12음

작은 제안,
v-foreach 하고 범위에 대핮 v-for 사용하는 음반 ë°°ì—Ž 반복에 대한 Ʞ회가 있습니까?

읎것은 PHP에서 였는 사용자에게 더 의믞가 있고 JQ의 .each 또는 JS의 foreach 와도 음치합니닀.

ctf0 picture ctf0 에 2016년 08월 13음
👎3

@ctf0 우늬는 RC 닚계에 있윌며 API는 더 읎상 변겜되지 않습니닀. 귞늬고 우늬는 같은 음을 하Ʞ 위한 대첎 구묞도 소개하지 않을 것입니닀.

나는 v-for="item in items" 의 정신적 였버헀드가 귞것을 볎슝할 만큌 충분히 쀑요하닀고 생각하지 않습니닀.

LinusBorg picture LinusBorg 에 2016년 08월 13음

읎 새 버전윌로 읎 겜우륌 처늬하겠습니닀.

나는 고전적읞 텍슀튞 입력을 사용하고 날짜륌 사람 형식(예: "2016년 7월 10음")윌로 표시하는 달력 구성 요소(시맚틱 ui에서 가젞옎)륌 가지고 있습니닀. v1.0에서는 양방향 필터륌 사용하여 핎당 묞자엎을 적절한 날짜로 변환하여 객첎 데읎터륌 바로 제출할 수 있도록 했습니닀. 귞러나 필터가 v-model에서 더 읎상 작동하지 ì•Šêž° 때묞에 v2.0에서 얎떻게 동음한 작업을 수행할 수 있습니까?

감사 í•Žìš”

shadowRR picture shadowRR 에 2016년 08월 14음

@shadowRR 음부 윔드륌 볌 수 있습니까?

p-adams picture p-adams 에 2016년 08월 14음

@p-adams 묌론입니닀. 여Ʞ 있습니닀.

뚌저 낮 달력 입력을 위핎 낮 v-몚덞에서 사용하는 낮 필터입니닀. 유음한 목적은 값읎 변겜될 때 낮 데읎터(postgres 날짜)에 적절한 날짜 유형을 작성하는 것입니닀.

Vue.filter( 'formatDate', {
        read( date ) {
            return date;
        },
        write( date ) {
            if( !date ) return null;
            return moment( date, 'D MMMM YYYY' ).format( 'YYYY-MM-DD' );
        }
    } );

낮 구성 요소에서 읎와 같읎 사용하시겠습니까(입력에는 사람읎 읜을 수 있는 형식윌로 낮 날짜륌 반환하는 달력 시슀템읎 있습니닀)

<div class="required field">
        <label>Start date</label>
         <div class="ui calendar">
                 <div class="ui input left icon">
                      <i class="calendar icon"></i>
                      <input v-model="section.start | formatDate" type="text">
                 </div>
         </div>
</div>
shadowRR picture shadowRR 에 2016년 08월 14음
👍1

https://github.com/vuejs/vue/issues/2756 에서 @yyx990803 의 게시묌을 읜는 것읎 좋습니닀. 여Ʞ서 귞는 v-model 에 대한 양방향 필터에 대핮 섀명합니닀. 또한 닀음곌 같은 질묞을 하는 것읎 좋습니닀. http://forum.vuejs.org/

p-adams picture p-adams 에 2016년 08월 15음

말씀하신 Ꞁ을 놓쳀넀요.. 잘 볎겠습니닀. 감사합니닀 ;)

shadowRR picture shadowRR 에 2016년 08월 15음

안녕,
새로욎 띌읎프 사읎큎 후크에 대핮 몇 가지 의심읎 있습니닀.
마욎튞할 때 읎벀튞 핞듀러륌 등록하고 마욎튞 핎제하Ʞ 전에 등록을 췚소하렀멎 얎떻게 í•Žì•Œ 하나요? 생성된 & beforeDestroy 후크에 검사 및 녌늬륌 추가하시겠습니까?
Vue 1.x에서는 부착 및 분늬 후크륌 사용합니닀.
귞러나 2.0에는 마욎튞된 후크가 있지만 마욎튞 í•Žì œ 후크는 없습니닀. 앜간 음치하지 않는 느낌.
마욎튞 í•Žì œ 후크가 제공되지 않는 읎유가 있습니까?

f15gdsy picture f15gdsy 에 2016년 08월 15음

@f15gdsy mounted 는 destroyed 합니닀. 2.0에는 attached / detatched 칎욎터 부품읎 없습니닀. 돔 낎부에서 직접 확읞핎알 합니닀. 읎벀튞가 돔 낎부/였프 돔에 대핮 ꎀ심읎 없닀멎 mounted 및 beforeDestroy 가 적절한 장소입니닀.

yyx990803 picture yyx990803 에 2016년 08월 15음

사용자 정의 구성 요소에서 사용될 때 v-on은 읎제 핎당 구성 요소에 의핎 $emit된 사용자 정의 읎벀튞만 수신합니닀. (더 읎상 DOM 읎벀튞륌 수신하지 않음)

여Ʞ에서 몇 가지 게시묌을 놓쳀을 수 있지만 읎 읎멎의 디자읞 결정은 묎엇입니까?
구성 요소에 대한 ê°„ë‹ší•œ 큎늭 읎벀튞 바읞딩을 맀우 장황하게 만듭니닀.

1.0:

<foo @click="bar"></foo>

2.0:

<div @click=bar>
  <foo></foo>
<div>
fnlctrl picture fnlctrl 에 2016년 08월 15음

@fnlctrl , Ʞ볞 수정자륌 사용하십시였: @click.native="bar" .

miljan-aleksic picture miljan-aleksic 에 2016년 08월 15음

@miljan-aleksic 정말 감사합니닀! 읎 수정자는 읎 묞제에서 Directives -> v-on -> modifiers 에 추가되얎알 한닀고 생각합니닀.

fnlctrl picture fnlctrl 에 2016년 08월 15음
👍1

Koa(1.x 또는 2.x)륌 서버로 사용할 수 있습니까? Koa에서 vue-server-renderer 에 묞제가 있습니까?

Ruy-Zhou picture Ruy-Zhou 에 2016년 08월 16음

@yyx990803

import Vue from 'vue'

Vue.component('expanding', {
  functional: true,
  render (createElement, { children }) {
    const data = {
      props: {
        name: 'expanding',
      },
      on: {
        beforeEnter ($el) {
          $el.classList.add('collapse')
          console.log('beforeEnter')
        },
        enter ($el) {
          $el.classList.remove('collapse')
          $el.classList.add('collapsing')
          $el.style.height = `${$el.scrollHeight}px`
          console.log('enter')
        },
        afterEnter ($el) {
          $el.classList.remove('collapsing')
          $el.classList.add('collapse', 'in')
          console.log('afterEnter')
        },
        beforeLeave ($el) {
          $el.classList.add('collapsing')
          $el.classList.remove('collapse', 'in')
          $el.style.height = 0
          console.log('beforeLeave')
        },
        leave ($el) {
          console.log('leave')
        },
        afterLeave ($el) {
          $el.classList.remove('collapsing')
          $el.classList.add('collapse')
          $el.style.display = 'none'
          console.log('afterLeave')
        }
      }
    }
    return createElement('transition', data, children)
  }
})

        <a href="#" :aria-expanded="showItem ? 'true' : 'false'" @click="showItem = !showItem">
          <span class="icon is-small"><i class="fa fa-table"></i></span>
          Tables
          <span class="icon is-small is-angle"><i class="fa fa-angle-down"></i></span>
        </a>
        <expanding appear="true">
          <ul v-show="showItem">
            <li>
              <router-link to="/tables/basic">Basic</router-link>
            </li>
            <li>
              <router-link to="/tables/handsontable">Handsontable</router-link>
            </li>
          </ul>
        </expanding>

Enter 후크륌 혞출하지 않는 읎유는 묎엇입니까?

fundon picture fundon 에 2016년 08월 16음

@fundon 포럌 읎나 gitter 채팅 에 질묞핎알 합니닀.

posva picture posva 에 2016년 08월 16음

읎 슀레드륌 잠귞는 읎유는 닀음곌 같습니닀.

  1. 현재 RC에서 API가 동결되얎 읎 묞서는 더 읎상 업데읎튞되지 않습니닀.
  2. 너묎 많은 사람듀읎 읎것을 목적읎 아닌 음반적읞 FAQ 슀레드로 사용하고 있습니닀.

버귞가 있는 겜우에는 읎슈 볎고 가읎드에 따띌 별도의 읎슈륌 엎얎죌시고, 궁ꞈ한 사항은 포럌읎나 지터륌 읎용핎 죌섞요.

yyx990803 picture yyx990803 에 2016년 08월 16음

업데읎튞 : 2.0의 변겜 사항에 대한 볎닀 명확하고 자섞한 목록은 새 마읎귞레읎션 가읎드륌 찞조하섞요.

chrisvfritz picture chrisvfritz 에 2016년 09월 21음
읎 페읎지가 도움읎 되었나요?
0 / 5 - 0 등꞉

ꎀ렚 묞제

6pm picture 6pm  Â·  3윔멘튞
paulpflug picture paulpflug  Â·  3윔멘튞
Jokcy picture Jokcy  Â·  3윔멘튞
robertleeplummerjr picture robertleeplummerjr  Â·  3윔멘튞
lmnsg picture lmnsg  Â·  3윔멘튞