D - JavaScript MVVM ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ.
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΡΠ΅Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ Π΄Π²ΡΡΡΠΎΡΠΎΠ½Π½Π΅ΠΌ ΡΠ°Π²ΡΠ·ΡΠ²Π°Π½ΠΈΠΈ Π΄Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈ ΡΠ°Π±Π»ΠΎΠ½Π°.
ΠΠΎΠ΄ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΈΡΠ°Π»ΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ "ΠΠ»Ρ ΡΠ΅Π±Ρ", ΠΊΠ°ΠΊ ΠΏΠΎΠΏΡΡΠΊΠ° ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π²ΡΡΡΠΎΡΠΎΠ½Π½Π΅Π³ΠΎ ΡΠ°Π²ΡΠ·ΡΠ²Π°Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ Π½Π° ΡΠΈΡΡΠΎΠΌ JS (ES 2015), ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ vue.js.
$data: Π΄Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°
$methods: Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ
watch: ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°
template: Π¨Π°Π±Π»ΠΎΠ½ Π΄Π»Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°
$components: Π²ΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
$parent: ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ
$root: root ΠΊΠΎΠΏΠΎΠΌΠ½Π΅Π½Ρ
$on: ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° ΡΠΎΠ±ΡΡΠΈΠ΅ΠΌ
$emit: ΠΏΠΎΡΠ»Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅
- d-bind:[[prop name]]
- d-text
- d-class
- d-if (Π±ΡΠ΄Π΅Ρ Π·Π°ΠΌΠ΅Π½Π΅Π½ΠΎ Π½Π° d-show)
- d-click
- d-model
- d-enter (Π² ΠΏΠ»Π°Π½Π°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ d-keydown)
- d-for
<div id="app">
<component_test></component_test>
</div>D.component("component_test", {
template: `
<div>Test</div>
`
});ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π΄Π°Π½Π½ΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ
ΠΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π² [[prop_name]] Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π½ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
D.component("component_test", {
template: `
<div>
<component_user
d-bind:user="current_user"></component_user>
</div>
`,
data: {
current_user: {
name: "Mars"
}
}
});
D.component("component_user", {
template: `
<span d-text="user.name"></span>
`,
data: {
user: {}
}
});<div>
<component_user d-bind:user="current_user">
<span d-text="user.name">Mars</span>
</component_user>
</div>D.component("component_test", {
template: `
<div d-text="name"></div>
`,
data: {
name: "Your name"
}
});<div d-text="name">Your name</div>D.component("component_test", {
template: `
<div>
<span d-text="user.name"></span><span d-text="user.sec_name"></span>
</div>
`,
data: {
user: {
name:"Name",
sec_name: "Second name"
}
}
});<div>
<span d-text="user.name">Name</span><span d-text="user.sec_name">Second name</span>
</div>- ΠΡΡΠΌΠΎΠ΅ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²Ρ d-class="class_name"
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΉ d-class="some ? 'class_one' : 'class_two'"
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° d-class="class_name if expression"
D.component("component_test", {
template: `
<div d-class="class_name"></div>
`,
data: {
class_name: "test_class"
}
});<div d-class="class_name" class="test_class"></div>D.component("component_test", {
template: `
<div d-class="list.length > 0 ? 'active' : 'disabled'" class="button">Send</div>
`,
data: {
list: ['one', 'two']
}
});<div d-class="class_name" class="active"></div>ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅:
- d-if="expression"
D.component("component_test", {
template: `
<div d-if="show">Test</div>
`,
data: {
show: true
}
});<div d-if="show">Test</div>D.component("component_test", {
template: `
<div d-click="Hello">Hello</div>
`,
methods: {
Hello: function() {
alert("Hello")
}
}
});alert("Hello")
D.component("component_test", {
template: `
<div d-click="Hello(name)">Hello</div>
`,
data: {
name: "Your name"
},
methods: {
Hello: function() {
alert("Hello, " + this.$data.name)
}
}
});alert("Hello Your name")
Π‘Π²ΡΠ·ΡΠ²Π°Π΅Ρ value inpput, select, textarea Ρ Π΄Π°Π½Π½ΡΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°
D.component("component_test", {
template: `
<select d-model="select">
<option value="1">One</option>
<option value="2">Two</option>
</select>
`,
data: {
select: 2
}
});<select d-model="select">
<option value="1">One</option>
<option selected value="2">Two</option>
</select>ΠΠ°Π²Π΅ΡΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ keydown Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π΅ΡΠ»ΠΈ Π½Π°ΠΆΠ°Ρ Enter
D.component("component_test", {
template: `
<input d-enter="Foo" />
`,
methods: {
Foo: function() {
alert("Enter")
}
}
});alert("Enter")
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΠΎΠ²ΡΠΎΡΠΎΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ°ΡΡΠΊΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ d-for Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ ΠΏΠΎΠ²ΡΠΎΡΠ½ΡΠΉ ΠΏΠ°ΡΡΠΈΠ½Π³ Π΄Π°Π½Π½ΡΡ , ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π² d-for ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
D.component("component_test", {
template: `
<div d-for="el in list">
<span d-text="el"></span>
</div>
`,
data: {
list: [
"One",
"Two"
]
}
});<div d-for="el in list" d-path-d-for="true">
<span d-text="el">One</span>
<span d-text="el">Two</span>
</div>D.component("component_test", {
template: `
<div d-for="el in list">
<component_user
d-bind:name="el"></component_user>
</div>
`,
data: {
list: [
"Dima",
"Dasha"
]
}
});
D.component("component_user", {
template: `
<span d-text="name"></span>
`,
data: {
name: ""
}
});<div d-for="el in list" d-path-d-for="true">
<component_user d-bind:name="el">
<span d-text="name">Dima</span>
</component_user>
<component_user d-bind:name="el">
<span d-text="name">Dasha</span>
</component_user>
</div>