Vue: рдХрд╕реНрдЯрдо рдирд┐рд░реНрджреЗрд╢ рдмрд╛рдЗрдВрдбрд░реНрд╕ рдШрдЯрдХреЛрдВ рдмрдирд╛рдо рдШрдЯрдХреЛрдВ рдкрд░ рднрд┐рдиреНрди рд╣реЛрддрд╛ рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 15 рдЕрдкреНрд░реИрд▓ 2019  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vuejs/vue

рд╕рдВрд╕реНрдХрд░рдг

реи.рем.резреж .10

рдкреНрд░рдЬрдирди рд▓рд┐рдВрдХ

https://jsfiddle.net/bponomarenko/uom10qd2/

рдкреНрд░рдЬрдирди рдХрд░рдиреЗ рдХрд┐ рдкреНрд░рдХреНрд░рд┐рдпрд╛

  1. рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХрдВрд╕реЛрд▓ рдЦреЛрд▓реЗрдВред
  2. рджреЛ рдмрд╛рд░ рдЯреЙрдЧрд▓ рдмрдЯрди рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВред

рдХреНрдпрд╛ рдЙрдореНрдореАрдж рд╣реИ?

рдбреЛрдо рддрддреНрд╡реЛрдВ рдФрд░ рдШрдЯрдХреЛрдВ рдкрд░ (рдСрдирд┐рдЯ рдФрд░ рдмрдЯрди рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж) рд▓рд╛рдЧреВ рд╣реЛрдиреЗ рдкрд░ рдирд┐рд░реНрджреЗрд╢ рд╕рдорд╛рди рдХрдВрд╕реЛрд▓ рд╕рдВрджреЗрд╢реЛрдВ рдХрд╛ рдЙрддреНрд╕рд░реНрдЬрди рдХрд░реЗрдЧрд╛ред

рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЕрдкреЗрдХреНрд╖рд┐рдд рдЖрдЙрдЯрдкреБрдЯ рдХреНрдпрд╛ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рднреА

bind: first comp
bind: first elem
unbind: first comp
unbind: first elem
bind: first comp
bind: first elem

рдпрд╛

bind: first comp
bind: first elem
unbind: second comp
unbind: second elem
bind: first comp
bind: first elem

рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреНрдпрд╛ рд╣реЛ рд░рд╣рд╛ рд╣реИ?

рдирд┐рд░реНрджреЗрд╢ рд╕реЗ рд╕рдВрджреЗрд╢ init рдкрд░ рд╕рдорд╛рди рд╣реИрдВ, рд▓реЗрдХрд┐рди рдмрдЯрди рдХреЛ рдХреНрд▓рд┐рдХ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж рдЕрд▓рдЧ рд╣реИрдВред

рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдХрдВрд╕реЛрд▓ рдЖрдЙрдЯрдкреБрдЯ:

bind: first comp
bind: first elem
unbind: first comp
unbind: second elem
bind: second comp
bind: first elem

рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрджреЗрд╢ рдЬрд┐рд╕рдореЗрдВ DOM рддрддреНрд╡реЛрдВ рдФрд░ рдШрдЯрдХреЛрдВ рдкрд░ рдирд┐рд░реНрджреЗрд╢ рд▓рд╛рдЧреВ рд╣реЛрддреЗ рд╣реИрдВ, рд╡реЗ рднрд┐рдиреНрди рд╣реЛрддреЗ рд╣реИрдВред рдореЗрд░реЗ рд╕реЗрдЯрдЕрдк рдореЗрдВ рдореЗрд░реЗ рдкрд╛рд╕ рдХрд╕реНрдЯрдо рдирд┐рд░реНрджреЗрд╢ рд╣реИ рдЬреЛ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдбреЗрдЯрд╛ рдХреЗ рд╕рд╛рде рдХреБрдЫ DOM рд╡рд┐рд╢реЗрд╖рддрд╛ рдкрд░ рдирд┐рд░реНрднрд░ рдХрд░рддрд╛ рд╣реИред рдЬрдм рдпрд╣ рдХрд╕реНрдЯрдо рдирд┐рд░реНрджреЗрд╢ рдПрдХ "рдирд┐рдпрдорд┐рдд рдкреНрд░рд╡рд╛рд╣" рдореЗрдВ рдмрд╛рдзреНрдп / рдЕрдирдмрд╛рдЙрдВрдб рд╣реИ - рд╕рдм рдХреБрдЫ рдЕрдкреЗрдХреНрд╖рд┐рдд рд░реВрдк рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ (рддрддреНрд╡ рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рдХреЗ рдЕрджреНрдпрддрди рдХреЗ рдмрд╛рдж рдирд┐рд░реНрджреЗрд╢ рдмрд╛рдВрдзрддрд╛ рд╣реИ)ред рд╣рд╛рд▓рд╛рдБрдХрд┐ рдЬрдм Vue "рдЗрди-рдкреНрд▓реЗрд╕ рдкреИрдЪ рд╕реНрдЯреНрд░реИрдЯреАрдЬреА" рдХреЗ рдорд╛рдорд▓реЗ рдореЗрдВ рдирд┐рд░реНрджреЗрд╢ рдмрд╛рдзреНрдп / рдЕрдирдмрд╛рдЙрдВрдб рд╣реЛрддрд╛ рд╣реИ, рддреЛ рд╡реНрдпрд╡рд╣рд╛рд░ рднрд┐рдиреНрди рдкреНрд░рддреАрдд рд╣реЛрддрд╛ рд╣реИред

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдирд┐рд░реНрджреЗрд╢ рдХреА рддрд░рд╣ рд▓рдЧрддрд╛ рд╣реИ рдкреБрд░рд╛рдиреЗ рдШрдЯрдХ рдХреЗ рд╕рд╛рде рдХрд╣рд╛ рдЬрд╛рддрд╛ рд╣реИ (рдХреНрдпреЛрдВрдХрд┐ рдЗрд╕рдХрд╛ рдкреБрди: рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ) рд▓реЗрдХрд┐рди рдЗрд╕рдореЗрдВ рдЕрднреА рднреА рдкреБрд░рд╛рдиреЗ рдЖрдХрд░реНрд╖рдг рд╣реИрдВ

рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рдХреЗ рд░реВрдк рдореЗрдВ, рдШрдЯрдХреЛрдВ рдореЗрдВ рд╕реЗ рдПрдХ рдкрд░ рдПрдХ рдХреБрдВрдЬреА рд╕реЗрдЯ рдХрд░реЗрдВ

рд╕рднреА 6 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдирд┐рд░реНрджреЗрд╢ рдХреА рддрд░рд╣ рд▓рдЧрддрд╛ рд╣реИ рдкреБрд░рд╛рдиреЗ рдШрдЯрдХ рдХреЗ рд╕рд╛рде рдХрд╣рд╛ рдЬрд╛рддрд╛ рд╣реИ (рдХреНрдпреЛрдВрдХрд┐ рдЗрд╕рдХрд╛ рдкреБрди: рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ) рд▓реЗрдХрд┐рди рдЗрд╕рдореЗрдВ рдЕрднреА рднреА рдкреБрд░рд╛рдиреЗ рдЖрдХрд░реНрд╖рдг рд╣реИрдВ

рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рдХреЗ рд░реВрдк рдореЗрдВ, рдШрдЯрдХреЛрдВ рдореЗрдВ рд╕реЗ рдПрдХ рдкрд░ рдПрдХ рдХреБрдВрдЬреА рд╕реЗрдЯ рдХрд░реЗрдВ

@bponomarenko
@Posva рдиреЗ рдЬреЛ рдХрд╣рд╛ рд╡рд╣ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рджрд╕реНрддрд╛рд╡реЗрдЬ рдореЗрдВ рд╢рд╛рдорд┐рд▓ рд╣реИред
рдЖрдк рдЗрд╕рдХрд╛ рдЙрд▓реНрд▓реЗрдЦ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

https://vuejs.org/v2/guide/conditional.html#Controlling -Reusable-Elements-with-key

@posva @pistis рдЙрддреНрддрд░ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред рд╣рд╛рдБ, рдпрд╣ рд╡рд╣реА рд╣реИ рдЬреЛ рд╣рдордиреЗ рдЕрдВрддрддрдГ рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рдХреЗ рд░реВрдк рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдерд╛, рдореБрдЭреЗ рдЯрд┐рдХрдЯ рдореЗрдВ рдЗрд╕рдХрд╛ рдЙрд▓реНрд▓реЗрдЦ рдХрд░рдирд╛ рдерд╛ред рд╣рд╛рд▓рд╛рдВрдХрд┐ key рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреА рдЙрдкрд╕реНрдерд┐рддрд┐ Vue.js рдХреЗ рдЕрдиреБрдХреВрд▓рди рдЕрдиреБрдХреВрд▓рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рдирд╣реАрдВ рджреЗрдЧреАред рдЗрд╕реЗ рддрдп рдХрд░рдирд╛ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ред

рдЕрдиреБрдХреВрд▓рди рдЗрд╕ рдмрд╛рдд рдкрд░ рдЖрдзрд╛рд░рд┐рдд рд╣реИ рдХрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рд╕реНрдЯреЗрдЯрд▓реЗрд╕ рдПрд▓рд┐рдореЗрдВрдЯреНрд╕ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП Vue рдХрд┐рд╕реА рддрддреНрд╡ рдХрд╛ рдкреБрди: рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░рддреЗ рд╕рдордп рдЗрд╡реЗрдВрдЯ рд╣реИрдВрдбрд▓рд░ рдпрд╛ рд╕реНрдерд╛рдиреАрдп рд░рд╛рдЬреНрдпреЛрдВ рдХрд╛ рд╕рд╣реА рдкреНрд░рдмрдВрдзрди рдХрд░рдиреЗ рдХреА рдЬрд╣рдордд рдирд╣реАрдВ рдЙрдард╛рдПрдЧрд╛ред рдЗрд╕рд▓рд┐рдП рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдмрдЧ рдирд╣реАрдВ рд╣реИ рд▓реЗрдХрд┐рди рд╣рдорд╛рд░реЗ рдбреЙрдХреНрд╕ рдореЗрдВ рд╕рдВрднрд╛рд╡рд┐рдд рд░реВрдк рд╕реЗ рд╕реБрдзрд╛рд░ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рддрд╛рдХрд┐ рд╣рдорд╛рд░реЗ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдЗрд╕реЗ рдФрд░ рдЖрд╕рд╛рдиреА рд╕реЗ рд╕рдордЭ рд╕рдХреЗрдВред

@ рдЬрд╕реНрдЯреАрдиреЛ рдореИрдВ рд╕реНрд╡рдпрдВ рдПрдХ рдЕрдиреБрдХреВрд▓рди рдХреЗ рдкреАрдЫреЗ рдХреА рдЕрд╡рдзрд╛рд░рдгрд╛рдУрдВ рдХреЛ рд╕рдордЭрддрд╛ рд╣реВрдВред рдореЗрд░реА рд╕реНрдерд┐рддрд┐ рдореЗрдВ, рдХрд╕реНрдЯрдо рдирд┐рд░реНрджреЗрд╢ bind рдкрд░ рддрддреНрд╡ рдореЗрдВ рд░рд╛рдЬреНрдп рд╡рд┐рд╢реЗрд╖рддрд╛ рдЬреЛрдбрд╝рдиреЗ рдФрд░ unbind рдкрд░ рдЙрд╕ рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреЛ рд╣рдЯрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЬрд╝рд┐рдореНрдореЗрджрд╛рд░ рд╣реИред рдФрд░ рдирд┐рд░реНрджреЗрд╢ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдЬреЛрдбрд╝рд╛ / рд╣рдЯрд╛ рджрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдЬрдм рдШрдЯрдХ Vue.js. рджреНрд╡рд╛рд░рд╛ рдлрд┐рд░ рд╕реЗ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рд╣рд╛рд▓рд╛рдВрдХрд┐ рдШрдЯрдХ рдЧреБрдгреЛрдВ рдХреЗ рдЕрджреНрдпрддрди рдХрд╛ рдЖрджреЗрд╢ рдФрд░ рдирд┐рд░реНрджреЗрд╢рдХреАрдп рдкреНрд░рд╛рд░рдВрднрд┐рдХрдХрд░рдг рдШрдЯрдХ рдЬреАрд╡рдирдХрд╛рд▓ рдХреЗ рд╡рд┐рднрд┐рдиреНрди рдХреНрд╖рдгреЛрдВ рдореЗрдВ рднрд┐рдиреНрди рд╣реЛрддрд╛ рд╣реИ, рдЬреЛ рдХрд╕реНрдЯрдо рдирд┐рд░реНрджреЗрд╢реЛрдВ рдХреЛ рд╡рд┐рдХрд╕рд┐рдд рдХрд░рдирд╛ рдХрдард┐рди рдмрдирд╛рддрд╛ рд╣реИред
рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЗрди рдЕрдиреБрдХреВрд▓рди рддрдХрдиреАрдХреЛрдВ рдкрд░ рдЕрддрд┐рд░рд┐рдХреНрдд рдкреНрд░рд▓реЗрдЦрди рдорджрджрдЧрд╛рд░ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЕрд╕рдВрдЧрдд рдирд┐рд░реНрджреЗрд╢ рдЬреАрд╡рдирдЪрдХреНрд░ рдХреА рдШрдЯрдирд╛рдПрдВ рдореЗрд░реА рд░рд╛рдп рдореЗрдВ рдареАрдХ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдмрдЧ рд╣реИрдВред

рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рдХреЗ рд░реВрдк рдореЗрдВ, рдШрдЯрдХреЛрдВ рдореЗрдВ рд╕реЗ рдПрдХ рдкрд░ рдПрдХ рдХреБрдВрдЬреА рд╕реЗрдЯ рдХрд░реЗрдВ

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

lmnsg picture lmnsg  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

loki0609 picture loki0609  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

hiendv picture hiendv  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

aviggngyv picture aviggngyv  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

6pm picture 6pm  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ