Автор оригинала: FreeCodeCamp Community Member.
Vue.js – это библиотека JavaScript для построения пользовательских интерфейсов. В прошлом году он начал становиться довольно популярным среди веб-разработчиков. Это легкий, относительно легко учиться и мощный.
Через три минуты, в том, что средний говорит, что потребует вас прочитать эту статью, вы будете оснащены, чтобы начать строительство основных приложений Vue. С каждым сегментом я также включал интерактивный Scrimba Screencast, где вы можете посмотреть меня объяснить концепции и играть с кодом самостоятельно.
Давайте прыгнем в него.
Шаблон синтаксиса и данные
В ядре Vue.js является простым шаблонным синтаксисом, который выглядит так:
{{ message }}
Пара, что со следующим javaScript Snippet:
var myApp = new Vue({
el: '#myApp',
data: {
message: 'Hello world!'
}
})
И это приведет к Привет мир! оказывается на странице.
Эл: #myApp Часть рассказывает Vue сделать приложение внутри элемента DOM с идентификатором MyApp. данные Объект – это то, где вы размещаете вас данные, которые вы хотите использовать в вашем приложении. Мы добавили только один ключ здесь, сообщение , который мы ссылаемся на наш HTML, как это: {{Message}} Отказ
Vue заботится об соединении данные Объект к DOM, поэтому, если данные изменяются, страница также будет обновлена.
Это называется декларативным рендерингом. Вы просто указываете что Вы хотите обновить, а Vue заботится о Как сделать это.
Вы можете изменить данные, которые могут сделать это:
myApp.message = 'Some new value';
Вот скринкаст, который объясняет эту точную концепцию:
Директивы
Следующая концепция вам понадобится узнать, являются директивами. Директивы являются атрибутами HTML, которые префиксированы с V- , что указывает на то, что они применяют реактивное поведение для оказанного DOM.
Допустим, мы хотим сделать только что-то, если условие верно, и скрыть его, если это ложно. Тогда мы будем использовать V-если Отказ
В HTML это выглядит так.
Now you see me
И какой-то JavaScript:
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
Это приведет к оказанию оформления Теперь вы видите меня абзац, если видно в данные это правда. Чтобы скрыть абзац, вы можете установить видно к Ложь, как это:
приложение.
Вот скринкаст, объясняющий ту же концепцию:
Есть много других директив, как V-для , V-on, V-bind и V-модель Отказ
Обработка пользовательского ввода
Еще одна основная директива, которую вы должны учиться, это V-на Отказ Он будет подключать слушатель события в элемент DOM, чтобы вы могли обрабатывать ввод пользователя. Вы указываете тип события после колонны. Итак, V-on: нажмите Слушаю щелчки.
myclickhandler Относится к ключу с тем же именем в Методы объект. Само собой разумеется, это объект, где вы размещаете методы вашего приложения. Вы можете иметь столько методов, сколько вы хотите.
var app = new Vue({
el: '#app',
methods: {
myClickHandler: function () {
console.log('button clicked!');
}
}
})
Это приведет к Кнопка нажала Зарегистрируйтесь в консоли при нажатии на кнопку.
Вот скринкаст, объясняющий концепцию:
Связывая все вместе
Теперь давайте создадим пример, где мы используем оба данные и Методы , связывая, что мы научились до сих пор.
{{ message }}
И JavaScript:
var app = new Vue({
el: '#app',
data: {
message: 'Start message'
},
methods: {
changeMessage: function () {
this.message = 'The message has changed!'
}
}
})
Первоначально он будет отображаться Начать сообщение На странице, однако после щелчка его отображается Это сообщение изменилось вместо.
это Ключевое слово относится к экземпляру Vue, тот, который мы называли приложение Отказ Именно в этом случае наши данные живут, поэтому мы можем ссылаться на сообщение данные через Это. Мессажирование Отказ
Проверьте этот скринкаст, объясняющий концепцию.
И этим, вы должны знать достаточно Vue.js, чтобы начать создавать простые приложения.
В следующем уроке вы узнаете, как создавать компоненты Vue. Поэтому обязательно следите за этой публикацией, если вам понравилась эта статья.