Shower Presentation Engine

Yours Truly, Famous Inc.

VUE - Лекция 1. Основы

Подготовил для вас Andrey Pereverzev

Vuejs lecture1 cover

Прогрессивный фреймворк

Где применять?

Где почитать?

Как подключить?

HTML

			<div id="app"><!--Привязка приложения по id-->
			  {{ message }}
			</div>
		

JS

      var app = new Vue({
        el: '#app', // Привязка приложения по id
        data: {
          message: 'Hello Vue!'
        }
      })
		

v-bind

Связывание атрибутов элементов

Пример - https://codepen.io/y4t6/pen/dZEmBm

v-if

Присутствие элементов в DOM

Пример - https://codepen.io/y4t6/pen/yPWjJa

v-for

Отображение списков

Пример - https://codepen.io/y4t6/pen/ooRdzM

v-on

Обработка событий

Пример - https://codepen.io/y4t6/pen/zPQjNE

v-model

Связывание элементов форм с состоянием приложения

Пример - https://codepen.io/y4t6/pen/eearvR

Все вместе

Спасибо

Vuejs thanks cover