Co to jest Vue.js?
Vue.js pozwala rozszerzyć HTML o atrybuty HTML zwane dyrektywami
Dyrektywy Vue.js oferują funkcjonalność dla aplikacji HTML
Vue.js zapewnia wbudowane dyrektywy i dyrektywy zdefiniowane przez użytkownika
Dyrektywy Vue.js
Vue.js używa podwójnych nawiasów klamrowych {{ }}jako symboli zastępczych dla danych.
Dyrektywy Vue.js to atrybuty HTML z prefiksemv-
Przykładowy widok
W poniższym przykładzie nowy obiekt Vue jest tworzony za pomocą nowej Vue() .
Właściwość el: wiąże nowy obiekt Vue z elementem HTML z id="app" .
Przykład
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Wiązanie Vue.js
Gdy obiekt Vue jest powiązany z elementem HTML, element HTML zmieni się, gdy zmieni się obiekt Vue:
Przykład
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Dwukierunkowe wiązanie Vue.js
Dyrektywa v-modelwiąże wartość elementów HTML z danymi aplikacji.
Nazywa się to wiązaniem dwukierunkowym:
Przykład
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Wiązanie pętli Vue.js
Użycie v-fordyrektywy do powiązania tablicy obiektów Vue z „tablicą” elementu HTML:
Przykład
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>