Vue.js

Vue.js — легкий, быстрый и интуитивный java-script фреймворк. Имеющий в в составе DOM-шаблонизатор, разделение кода по MVVM, возможность писать компоненты. Определение «интуитивный» особенно будет близка тем кто знаком с AngularJS.
ИМХО его смело можно называть «облегченным ангуляром».
Плюсы:

  • Легкость. Всего 75 кб
  • Код четко структурирован.
    Взглянув на компонент vue.js сразу понимаешь что «тут у нас описание модели», «вот ф-ция выполняющая после инициализации», «вот методы» и т.д.
  • html гораздо чище чем после AngularJS.
    Vue.js как и angularJS использует директивы. Например вы можете в теге прописать условие при котором этот тег показывается (v-if и ng-if). Но в отличие от ангуляра эта атрибуты не будет видна в режиме отладки.
  • Ничего лишнего. Это и плюс и минус. В стандартной поставке нет ни роутера ни библиотеки для работы с ajax. Если вам потребуется берите внешние компоненты

По последнему пункту хочется заметить что vue.js не всегда дотягивает до angular.js и потому что автор придерживается другой парадигмы проектирования. Он не приветсвует динамической подгрузи шаблонов.
Именно поэтому в vue.js нет аналога ng-include.

Стандартный каркас приложения:

    var vm = new Vue({
        // селектор DOM элемента на котором работает приложение
        // Не обязательный параметр.
        // Если параметр пропущен то vm.$mount('#elemnt')
        el:'#elemnt',

        // место для регистрации переменных или коллекций
        data: {},

        // переменные расчитываемые "на лету"
        computed: {},

        // Функция сработает когда приложение загружено
        ready: function (){ },

        // Методы для отслеживания изменения в переменных указанных в разделе data
        watch: {},

        // список методов которые будут использованы в приложение
        methods: {}
    });

Для того что бы прибиндить (подключить данные) в html, у вас в js указывается селектор DOM-элемента.
После этого вы можете прописывать директивы в этом участке html для обращение к вашему js коду.
Например: есть переменная name

    var vm = new Vue({
        el:'#elemnt',
        data: {
            name: 'Иванов И.И.'
        },
    ...

и html выводящий это поле

<div class="container" id="elemnt">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group" v-bind:class="{'has-error': !name}">
                <input class="form-control" v-model="name" v-el:input_name>
            </div>
            <button class="form-control" v-on:click="showName()">Вас зовут</button>
        </div>
    </div>
</div>
  • v-bind:class="{'has-error': !name}" — Прописываем класса ‘has-error’ если атрибут name не заполнен
  • v-model="name" — выводить в inpute данные из поля name
  • v-el:input_name — Прописываем для самого тега имя input_name. В дальнейшем можно обращаться к нему по этому имени (например для установки фокуса)
  • v-on:click="showName()" — вызываем метод showName при нажатие на кнопку

В js добавляем код который будет обрабатывать событие:

        // список методов которые будут использованы в приложение
        methods: {
            showName: function(){
                if(this.name.length ==0){
                    alert('Укажите как вас зовут');
                }
                else {
                    alert('Вас зовут ' + this.name);
                }
            },

Парочка более сложных примеров на vue.js

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *