Что такое Vue.js?
Vue.js позволяет расширять HTML с помощью HTML-атрибутов, называемых директивами .
Директивы Vue.js предлагают функциональность HTML-приложениям .
Vue.js предоставляет встроенные директивы и определяемые пользователем директивы .
Директивы Vue.js
Vue.js использует двойные фигурные скобки {{ }}в качестве заполнителей для данных.
Директивы Vue.js — это HTML-атрибуты с префиксом v-
Пример просмотра
В приведенном ниже примере новый объект Vue создается с помощью new Vue() .
Свойство el: связывает новый объект Vue с элементом HTML с id="app" .
Пример
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Привязка Vue.js
Когда объект Vue привязан к элементу HTML, элемент HTML изменится при изменении объекта Vue:
Пример
<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
Директива v-modelсвязывает значение элементов HTML с данными приложения.
Это называется двусторонней привязкой:
Пример
<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
Использование v-forдирективы для привязки массива объектов Vue к «массиву» элемента HTML:
Пример
<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>