Vue.js учебник
Начало работы с Vue.js
Поиск…
замечания
Vue.js - это быстро развивающаяся инфраструктура front-end для JavaScript , вдохновленная Angular.js , Reactive.js и Rivets.js которая предлагает упрощенный дизайн пользовательского интерфейса, манипулирование и глубокую реактивность.
Он описывается как структура с MVVM , Model-View View-Model , которая основана на концепции двухсторонней привязки данных к компонентам и представлениям. Это невероятно быстро, превосходит скорости других систем JS верхнего уровня и очень удобен для легкой интеграции и прототипирования.
Версии
| Версия | Дата выхода |
|---|---|
| 2.4.1 | 2017-07-13 |
| 2.3.4 | 2017-06-08 |
| 2.3.3 | 2017-05-09 |
| 2.2.6 | 2017-03-26 |
| 2.0.0 | 2016-10-02 |
| 1.0.26 | 2016-06-28 |
| 1.0.0 | 2015-10-26 |
| 0.12.0 | 2015-06-12 |
| 0.11.0 | 2014-11-06 |
"Привет, мир!" программа
Чтобы начать использовать Vue.js , убедитесь, что у вас есть файл сценария, включенный в ваш HTML. Например, добавьте в свой HTML-код следующее.
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
Простой пример
Шаблон HTML
<div id="app">
{{ message }}
</div>
JavaScript
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
См. Живую демонстрацию этого примера.
Вы также можете проверить пример «Hello World», сделанный Vue.js.
Hello World в Vue 2 (путь JSX)
JSX не предназначен для интерпретации браузером. Он должен быть сначала преобразован в стандартный Javascript. Для использования JSX вам необходимо установить плагин для babel babel-plugin-transform-vue-JSX
Выполните команду ниже:
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev
и добавьте его в свой .babelrc следующим образом:
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
Пример кода с VUE JSX:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
methods: {
handleClick () {
alert('Hello!')
}
},
render (h) {
return (
<div>
<h1 on-click={this.handleClick}>Hello from JSX</h1>
<p> Hello World </p>
</div>
)
}
})
Используя JSX, вы можете писать сжатые структуры HTML / XML в том же файле, что и код JavaScript.
Поздравляю, ты готов!
Обработка ввода пользователя
VueJS может использоваться для легкого управления вводом пользователя, а двухсторонняя привязка с использованием v-модели позволяет легко легко изменять данные.
HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
{{message}}
<input v-model="message">
</div>
JS:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
Очень просто сделать двустороннюю привязку в VueJS, используя директиву v-model .
Посмотрите живой пример здесь.