Vue.Js Framework
В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications)
Документация
- API (rus)
Объект VueJs
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(){},});
Глобальная конфигурация
Vue.config - это объект, содержащий глобальные конфигурации Vue. Вы можете изменить свои свойства, перечисленные ниже, перед загрузкой приложения:
- Vue.config.silent = true
- Vue.config.devtools = true
- Vue.config.errorHandler = function (err, vm, info) { ... }
- Vue.config.warnHandler = function (msg, vm, trace) { ... }
- 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.modifiers
- v-model - Связывает входной параметр value и событие input (двусторонняя привязка)
- v-if - Конструкция if значение переменной или переменая возращаемоя методом (скрывает или показывает тэг)
- v-html - Вывод HTML
- v-show -
Свойства объекта
- data: {}
- methods: {}
- computed: {} - Отслеживает переменные внутри методов декларированных в computed (возвращает значение)
- props: [] - Аналогично объявлению входящих в функцию параметрах
- wath: {} - Отслеживает изменение именованных как метод переменных
- template: "" -
- model: {}
- components: {} - Список копонентов
- filters: {} - Применяются для обработке в выводе {{ | filterName}}
- directives: {} - Методы представляют из себя директивы v-todo-focus, имена методов указываются без v-
- Пример
<inputclass="edit"type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
- mountend: {} -
Методы объекта
- this.$emit() - Вызов метода дочернего компанента
- this.$el - виртуальный дом
- this.$mount(selector) - При этом необходимо из app удалить указание елемента el
- this.$refs - Ссылки на реальный дом елементы
<element-name ref="">
- this.$resource - Сторонний модуль vue-resource (не входит в vuejs)
- this.$slots - Позмоляет передавать HTML, в качестве строки (В шаблоне необходимо использовать тэг <slot>, так - же он может быть именован <slot name="myslot">)
События
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
- activated
- deactivated
- errorCaptured
Хуки
- created - Компанент собран, но не помещен в дом
Расширения / Компоненты / Процессоры
Ссылки
Обучение / Трюки / Статьи
Видео
RU
- Vue.js с нуля (Точка.dev)
- Vue.js для начинающих (Гоша Дударь)
- Vue.js. Введение (Ausite Blog)
- Vue.js (Дмитрий Лаврик)
- Vue.js (Learn Programming Together)
- Vue JS 2 (Yauhen Kavalchuk)
- Фреймворк VUE JS (WebForMySelf)
- Vue js уроки (Web Developer Blog)