Co je Vue.js?
Vue.js vám umožňuje rozšířit HTML o atributy HTML nazývané direktivy
Direktivy Vue.js nabízí funkčnost aplikacím HTML
Vue.js poskytuje vestavěné direktivy a uživatelsky definované direktivy
Směrnice Vue.js
Vue.js používá dvojité složené závorky {{ }}jako zástupné symboly pro data.
Direktivy Vue.js jsou atributy HTML s předponou v-
Příklad zobrazení
V níže uvedeném příkladu je nový objekt Vue vytvořen pomocí new Vue() .
Vlastnost el: váže nový objekt Vue k prvku HTML s id="app" .
Příklad
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vazba Vue.js
Když je objekt Vue svázán s prvkem HTML, prvek HTML se změní, když se změní objekt Vue:
Příklad
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js obousměrná vazba
Direktiva v-modelspojuje hodnotu prvků HTML s daty aplikace.
Tomu se říká obousměrná vazba:
Příklad
<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>
Vue.js smyčková vazba
Použití v-fordirektivy k navázání pole objektů Vue na „pole“ prvku HTML:
Příklad
<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>