{{tag>js vuejs framework}}

====== Документация ======

  * [[https://ru.vuejs.org/v2/guide/installation.html|Документация]]
  * [[https://ru.vuejs.org/v2/api|API]] (rus)

==== Рабочий процесс ====

{{:js:vuejs:lifecycle.png?600|}}


==== Объект VueJs ====


<code javascript>
Vue.use({
    install: function(Vue, options) {
    	
        Vue.mixin({
        	
        });
            	
}, {
    createComputed: true
});    	

var app = new Vue({
    // Используется в раннем связывании
    el: '#app',
    name: 'nameApp',
    //
    props: [
    ],
    //
    data() {
    },
    //
    methods: {
    },
    //
    computed: {
    },
    //
    watch: {
    },
    //
    components: {
    },
    // Событие перед созданием компонента
    beforeCreate() {
    },
    // Событие после создания компонента
    created() {
    },
    // 
    beforeMount() {
    },  
});
</code>

{{:js:vuejs:88a1d3abe413490f90414d2d43cfd13e.png?600|}}
=== Глобальная конфигурация ===

Vue.config - это объект, содержащий глобальные конфигурации Vue. Вы можете изменить свои свойства, перечисленные ниже, перед загрузкой приложения:

  * Vue.config.silent = true
  * Vue.config.devtools = true
  * Vue.config.errorHandler = function (err, vm, info) { <text>...</text> }
  * Vue.config.warnHandler = function (msg, vm, trace) { <text>...</text> }
  * Vue.config.ignoredElements = [ \\ /^ion-/, \\ 'another-web-component' ]
  * Vue.config.keyCodes = {}




=== Конструкции html (атрибуты) ===

  * v-bind, : - Связывает HTML атрибут с переменными или методом (:href, :src), также можно применять java-script выражения
  * v-on, @ - Методы (click, change, blur, etc) или в нативной декларации (onClick, onChange, onBlur)
    * click.[[https://ru.vuejs.org/v2/guide/events.html#%D0%9C%D0%BE%D0%B4%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D1%8B-%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9|modifiers]]
  * v-model - Связывает входной параметр value и событие input (двусторонняя привязка)
  * v-for - Конструкциия for для массива или для массива возвращенного методом <code html><div :v-for="method in methods"></div></code>
  * v-if - Конструкция if значение переменной или переменая возращаемоя методом (скрывает или показывает тэг)
  * v-html - Вывод HTML
  * v-show - 
  * :is - наименование компонента, если по какой-либо причине нельзя испозовать тег  в качестве названия компонента <code html>
<div :is="com1"><div>
<!-- или -->
<com-1></com-1>
</code>

=== Свойства объекта ===

  * data: {}
  * methods: {}
  * computed: {} - Отслеживает переменные внутри методов декларированных в computed (возвращает значение)
  * props: [] - Аналогично объявлению входящих в функцию параметрах
  * wath: {} - Отслеживает изменение именованных как метод переменных
  * template: "" -
  * model: {} 
  * components: {} - Список копонентов
  * filters: {} - Применяются для обработке в выводе <text>{{ | filterName}}</text>
  * directives: {} - Методы представляют из себя директивы v-todo-focus, имена методов указываются без v-
    * Пример <code html><input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)"></code>
  * mountend: {} - 

=== Методы объекта ===

  * this.$emit() - Вызов метода дочернего компанента
  * this.$el - виртуальный дом
  * this.$mount(selector) - При этом необходимо из app удалить указание елемента el
  * this.$refs - Ссылки на реальный дом елементы 
    * <code html><element-name ref=""></code>
  * this.$resource - Сторонний модуль [[develop:java-script:vuejs#http_clients_like_get_post|vue-resource]] (не входит в vuejs)
  * this.$slots - Позмоляет передавать HTML, в качестве строки (В шаблоне необходимо использовать тэг <slot>, так - же он может быть именован <slot name="myslot">)

=== События ===

  * beforeCreate
  * created
  * beforeMount
  * mounted
  * beforeUpdate
  * updated
  * beforeDestroy
  * destroyed
  * activated
  * deactivated
  * errorCaptured
=== Хуки ===

  * created - Компанент собран, но не помещен в дом
