Показать страницуИстория страницыСсылки сюдаCopy this pageExport to MarkdownODT преобразованиеНаверх Вы загрузили старую версию документа! Сохранив её, вы создадите новую текущую версию с этим содержимым. Медиафайлы{{tag>js vuejs framework}} ====== Документация ====== * [[https://ru.vuejs.org/v2/guide/installation.html|Документация]] * [[https://ru.vuejs.org/v2/api|API]] (rus) ==== Объект 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 - Компанент собран, но не помещен в дом СохранитьПросмотрРазличияОтменить Сводка изменений Примечание: редактируя эту страницу, вы соглашаетесь на использование своего вклада на условиях следующей лицензии: CC0 1.0 Universal