Nick - Vue.js: The Basics

Overview

Vue.js is a JavaScript UI framework. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. Although not as popular as its main competitors - Angular and React - the framework has been gaining popularity due to its simplicity and adoptability. Vue is a progressive framework. In short, that means Vue has:

Lean core that works well alone
Official support libraries that solve common needs
Opinionated but optional build toolchain

Why Vue?

Approachability - the basic HTML+CSS+JS set is all you need to get started
Versatility - since Vue provides only the tools to build the view layer, you aren't locked into using a certain architecture or a certain library
Performance - due to being well-optimized, Vue renders faster than most of its contestants; it's way of re-rendering the view also means you need to spend less time optimizing your app

Concepts

Although not strictly associated with the MVVM pattern, Vue’s design was partly inspired by it. As a convention, the vm variable is often used to refer to the Vue instance:

var data = { name: 'Nick' }
var vm = new Vue({
  el: '#example',
  data: data
})

Now you just need an element to bind that instance to:

<div id="example">
  Hello, {{ name }}
</div>

and voilà! You've got yourself a Vue app! But wait, there's more to it than that. By using the $ prefix you can address the instance's fields:

vm.$data === data // true
vm.$el === document.getElementById('example')  // true

as well as use the instance methods, such as $watch():

vm.$watch('name', function (newVal, oldVal) {
  // this callback will be called when `vm.name` changes
})

Each Vue instance also goes through a series of steps during it's initialization, each of these steps has a lifecycle hook associated with it, such as created, mounted, updated and destroyed:

var vm = new Vue({
  data: {
    name: 'Nick'
  },
  created: function () {
    // `this` points to the vm instance
    console.log('name is: ' + this.name)
  }
})
// -> "name is: Nick"

Vue templates use the standard "Mustache" syntax (same as Angular). Vue has a number of convenient directives (also same as Angular), which use the v- prefix :

<span v-once>This will never change: {{ msg }}</span>

<ul id="example">
  <li v-for="item in items">  <!-- v-for directive renders the element once for each item in the items array -->
    {{ item.message }}
  </li>
</ul>

This one, for example, will not allow the view inside this element to update, even once the msg changes. "Mustaches" cannot be used inside HTML attributes, so the v-bind directive should be used:

<div v-bind:id="dynamicId"></div>

Some directives, such as v-bind or v-on accept an argument, which comes after a colon right after the directive's name. Some directives can have modifiers that allow you to do some nifty things, such as .prevent:

<form v-on:submit.prevent="onSubmit"></form>

that, aside from the action assigned to v-on:submit, also calls the event.preventDefault(). Vue also allows you to define filters, that can be used for text formatting:

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

Filters are appended to the end of the JavaScript expression, denoted by the “pipe” symbol. Several most used directives - v-bind and v-on - have shorthands, which are entirely optional, but can save you a bit of time:

<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>

<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>

In-template expressions are very convenient, but they cater for non-complicated operations exsclusively. Putting too much logic into your templates can make them bloated and hard to maintain. That's where computed expressions come into play:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

"What's the difference between computed expressions and methods?" you might ask.

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

The thing is, computed properties are cached based on their dependencies. A computed property re-evaluates only in case when some of its dependencies are changed, opposed to methods, which always run the function whenever the re-render occurs. Components allow you to extend basic HTML elements to encapsulate reusable code.At a high level, components are custom elements that Vue’s compiler attaches behavior to. Use Vue.component() to register a global component:

<div id="example">
  <my-component></my-component>
</div>

// register
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// create a root instance
new Vue({
  el: '#example'
})

Which will render

<div id="example">
  <div>A custom component!</div>
</div>

You can also register a component locally:

new Vue({
  // ...
  components: {
    // <my-component> will only be available in parent's template
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
})

Requirements

In order to start working with Vue all you need is to install Vue. You can either use the CDN distributive (Vue is a very lightweight library so it's absolutely fine), or install it via npm install vue or bower install vue. Vue provides an official CLI that allows you to quickly set up and easily manage your future project.

Обзор

Vue.js - UI-фреймворк для JavaScript. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. Хоть и не такой популярный, как его основные конкуренты - Angular и React - этот фреймворк набирает популярность благодаря его простоте и интегрируемости. Vue - прогрессивный фреймворк. Вкратце это означает, что у Vue есть:

"Скудное" ядро, которое хорошо работает само по себе
Официально поддерживаемые библиотеки, решающие частые проблемы
"Своевольный", но опциональный набор инструментов сборки

Почему Vue?

Доступность - основной набор HTML+CSS+JS - все, что нужно чтобы начать работу
Гибкость - т.к. Vue только предоставляет инструменты для создания слоя отображения, вас не вынуждают использовать определенную архитектуру или определенную библиотеку
Производительность - благодаря хорошей оптимизации, Vue отображает страницы быстрее большинства соперников; его способ обновления отображения также означает, что вам не придется тратить столько времени на оптимизацию приложения

Концепции

Хотя он и не жестко связан с паттерном MVVM, дизайн Vue’s был частично им вдохновлен. По конвенции, переменная vm используется, чтобы ссылаться на экземпляр Vue:

var data = { name: 'Nick' }
var vm = new Vue({
  el: '#example',
  data: data
})

Теперь нужно только добавить элемент, к которому можно привязать этот экземпляр:

<div id="example">
  Hello, {{ name }}
</div>

и вуаля! У вас есть Vue-приложение! Но постойте, это еще не все. Использую префикс $, можно обращаться к полям экземпляра:

vm.$data === data // true
vm.$el === document.getElementById('example')  // true

, а также его методам, таким как $watch():

vm.$watch('name', function (newVal, oldVal) {
  // this callback will be called when `vm.name` changes
})

Каждый экземпляр Vue проходит через ряд шагов при инициализации, у каждого из этих шагов есть хук жизненного цикла, ассоциированный с ним, к примеру created, mounted, updated и destroyed:

var vm = new Vue({
  data: {
    name: 'Nick'
  },
  created: function () {
    // `this` points to the vm instance
    console.log('name is: ' + this.name)
  }
})
// -> "name is: Nick"

Vue-шаблоны также используют стандартный синтаксис "Mustache" (как и Angular). У Vue имеется ряд удобных директив (тоже как в Angular), которые используют префикс v-:

<span v-once>This will never change: {{ msg }}</span>

<ul id="example">
  <li v-for="item in items">  <!-- v-for directive renders the element once for each item in the items array -->
    {{ item.message }}
  </li>
</ul>

Этот, например, не позволит отображению элемента измениться, даже когда меняется msg. "Mustaches" не могут быть использованы в HTML-атрибутах, поэтому нужно использовать директиву v-bind:

<div v-bind:id="dynamicId"></div>

Некоторые директивы, такие как v-bind or v-on, принимают аргумент, который идет после двоеточия после имени директивы. У некоторых директив есть модификаторы, который позволяют производить некоторые изящные трюки, как, например, с .prevent:

<form v-on:submit.prevent="onSubmit"></form>

который, кроме действия, назначенного в v-on:submit, также вызывает event.preventDefault(). Vue также позволяет определять filters, которые могут быть использованы для форматирования текста:

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

Фильтры добавляются в конце JS-выражения, обозначенные символом вертикальной черты. У некоторых из наиболее широко используемых директив - v-bind и v-on - имеются сокращения, которые хоть и необязательны, но могут сэкономить вам немого времени:

<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>

<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>

Внутришаблонные выражения очень удобны, но они предназначены только для очень простых операций. Помещение в шаблон слишком большого количества логики делает их раздутыми и тяжело поддерживаемыми. Тут в игру вступают вычисляемые выражения:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

Вы спросите: "В чем разница между вычисляемыми выражениями и методами?".

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

Дело в том, что вычисляемые выражения кэшируются исходя из своих зависимостей. Вычисляемое выражение будет перерасчитываться только когда изменилась его зависимость, в отличие от методов, которые запускают свою функцию при каждом переотображении. Компоненты позволяют расширять базовые HTML-елементы, инкапсулируя повторяющийся код. На высшем уровне, компоненты - пользовательские элементы, к которым компилятор Vue прикрепляет поведение. Используйте Vue.component() чтобы зарегистрировать глобальный компонент:

<div id="example">
  <my-component></my-component>
</div>

// register
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// create a root instance
new Vue({
  el: '#example'
})

Что отобразит:

<div id="example">
  <div>A custom component!</div>
</div>

Компонент также можно регистрировать локально:

new Vue({
  // ...
  components: {
    // <my-component> will only be available in parent's template
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
})

Требования

Для того, чтобы начать работать с Vue, нужно лишь его установить. Это можно сделать, либо используя CDN-дистрибутив (Vue - очень легковесная библиотека, так что это нормальный способ), или установить его с помощью npm install vue или bower install vue. Vue также предоставляет официальный CLI, который позволяет быстро настроить и управлять будущим проектом

AlexKolonitsky / mifort-dev