Vue.js для

верстальщиков

<div class="container">
    <button id="button-animate">
        Button
    </button>
</div>

let btn = document.getElementById('button-animate');

btn.addEventListener('click', () => {
    // some code
});

CSS

HTML

JavaScript

View

button {
    border: 3px solid #218294;
    font-size: 30px;
    color: #218294;
    text-decoration: none;
    text-transform: uppercase;
    ...
}

button::after {
    content: '';
    position: absolute;
    ...
}

Кнопка

Компоненты

@Component({
  selector: 'app-buttin',
  templateUrl: './btn.html',
  styleUrls: ['./btn.css']
})

class AppButton {
  constructor() {}
  ...
}

TypeScript

button {
    ...
}

CSS

<button>
  Button
</button>

HTML

Angular (Google)

2009, 2016

button {
    ...
}

React.js (Facebook)

2013

Vue.js (Эван Ю)

2014

class Btn extends Component {
  render() {
    return (
      <div>
        <button>
          Button
        </button>
      </div>
    );
  }
}

JSX

<template>
  <div>
    <button>
      Button
    </button>
  </div>
</template>


<script>
  export default {
    data() {...},
    methods: {...}
  }
</script>


<style>
  button {
    ...
  }
</style>

CSS

VUE

Однофайловые компоненты

<template>
    <div>
        <h1>Компонент на Vue.js</h1>
        <span>{{spanText}}</span>
        <button v-on:click="btnClick">Нажми меня!</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            spanText: 'Text in Vue'
        }
    },
    methods: {
        btnClick() {
            alert('Привет');
        }
    }
}
</script>

<style scoped>
h1 {
    color: blue;
}
</style>

<p v-text="messText">Текстовое содержимое</p>
<p v-html="messHTML">HTML содержимое</p>

items: [
    {name: 'Tony',  age: 25},
    {name: 'Tyler', age: 27},
    {name: 'Tom',   age: 20}
]

Использование директив

<button v-on:click="onClick" />

<a v-bind:href="url" />

<ul>
    <li v-for="item in items">
        {{ item.name }}
    </li>
</ul>

<div v-if="name == 'admin'">Показываем блок</div>
<div v-else>Иначе показываем этот</div>

Список директив

v-text, v-html	Отображение текста или html
v-show, v-if, v-else, v-else-if	Условная отрисовка
v-for	Отрисовка списков
v-on:	Обработчики событий DOM
v-bind:	Связывание атрибутов элементов
v-model	Двунаправленное связывание данных с элементами
v-pre	Отмена компиляции у элемента и его потомков
v-cloak	Скрытие нескомпилированных шаблонов
v-once	Однократная отрисовка элемента

Vue CLI

npm install -g @vue/cli

vue create hello-world
vue ui

Vue Router

<template>
    <div id="app">
	<router-link to="/home">Home</router-link>
	<router-link to="/about">About</router-link>
	<router-view></router-view>
    </div>
</template>

<script>
const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About }
]

const router = new VueRouter({
    routes
})

const app = new Vue({
    router
}).$mount('#app')
</script>