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.

Обработка ввода пользователя

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 .

Посмотрите живой пример здесь.

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.

Поздравляю, ты готов!