Title Text

Вячеслав Крысин,

Frontend developer, TDS, Group-IB

git: palpich

vpkrysin@gmail.com

Evan You

Creator of @vuejs,

previously @meteor & @google

Vue Ecosystem

Stat Vue

Быстрый старт

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli


vue create hello-world

File .vue

<template>
  <div id="myApplication">
    <h1>Hello World</h1>
    <p>little text behind the title</p>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

TEMPLATE

<!-- Условия можно писать прямо в шаблоне -->
<div v-if='isShown'>
  Этот текст будет видно если isShow='true'
</div>
<div v-else>
  else
</div>

<!-- Можно делать аргументы тега связанными со значениями -->
<a v-bind:href="url"> ... </a>

<!-- Или слушать события и вызывать обработчики -->
<a v-on:click="doSomething"> ... </a>

<!-- Есть и модификаторы -->
<form v-on:submit.prevent="onSubmit"> ... </form>

WebComponents

https://github.com/karol-f/vue-custom-element

Migration React Developer

to Vue Developer

1 month

Для кого?

Для новичков, которые начинают знакомство с frontend
Для стартапов, которые хотят создать быстрый MVP
Для backend developer которые хотят быстро и попроще

ИТОГИ

Понятная организация кода (file .vue)
Продуманная и полная экосистема для построения прогрессивных приложений
Отличная документация
Начать и работать очень просто - vue-cli