Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
develop:java-script:vuejs [2018/07/11 21:35] – [Ссылки] mirocowdevelop:java-script:vuejs [2025/02/14 16:12] (текущий) – mirocow
Строка 1: Строка 1:
-{{tag>js javascript framework}}+{{tag>js java-script javascript framework}}
  
 ====== Vue.Js Framework ====== ====== Vue.Js Framework ======
  
-  * https://vuejs.org/ +{{:java-script:vuejs.png?400|}} 
-  * https://ru.vuejs.org/v2/guide/ + 
-  * https://ru.vuejs.org/v2/api/+  * https://vuejs.org 
 +  * https://github.com/vuejs 
 +  * https://ru.vuejs.org/v2/guide 
 +  * https://ru.vuejs.org/v2/api
  
  В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications)  В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications)
  
-{{:js:vuejs:lifecycle.png?600|}} 
-===== Документация  ===== 
- 
-  * [[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 +  * [[https://github.com/vuejs/vuex|vuex]] 
-  * created +  * [[https://github.com/vuejs/vue-router|vue-router]] 
-  * beforeMount +  * [[https://github.com/axios/axios|axios]] 
-  * mounted +  * [[https://github.com/baianat/vee-validate|vee-validate]] 
-  * beforeUpdate +  * [[https://github.com/wxsms/uiv|uiv]]
-  * updated +
-  * beforeDestroy +
-  * destroyed +
-  * activated +
-  * deactivated +
-  * errorCaptured +
-=== Хуки ===+
  
-  * created - Компанент собран, но не помещен в дом 
  
 ===== Расширения / Компоненты / Процессоры ===== ===== Расширения / Компоненты / Процессоры =====
  
 +  * [[js:vuejs:docs]]
 +  * [[js:vuejs:ui]]
   * [[js:vuejs:faq]]   * [[js:vuejs:faq]]
   * [[js:vuejs:components]]   * [[js:vuejs:components]]
   * [[js:vuejs:processors]]   * [[js:vuejs:processors]]
   * [[js:vuejs:frameworks]]   * [[js:vuejs:frameworks]]
 +  * [[js:vuejs:repositories]]
 +
 +
 +===== Каталоги =====
 +
 +  * https://www.vuescript.com
 +  * https://vuejsexamples.com
  
 ===== Ссылки ===== ===== Ссылки =====
Строка 175: Строка 69:
   * https://habr.com/post/336352/   * https://habr.com/post/336352/
   * https://medium.com/devschacht/%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8-%D1%85%D0%BE%D1%82%D1%8F%D1%82-%D1%83%D1%87%D0%B8%D1%82%D1%8C-vue-js-63aa3b456dfa   * https://medium.com/devschacht/%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8-%D1%85%D0%BE%D1%82%D1%8F%D1%82-%D1%83%D1%87%D0%B8%D1%82%D1%8C-vue-js-63aa3b456dfa
 +  * https://www.8host.com/blog/otobrazhenie-dannyx-iz-api-s-pomoshhyu-vue-js-i-axios/
 +  * https://lovefrontend.ru/vue-basics
  
 ===== Обучение / Трюки / Статьи ===== ===== Обучение / Трюки / Статьи =====
Строка 191: Строка 87:
 ==== RU ==== ==== RU ====
  
 +  * [[https://www.youtube.com/watch?v=NQ2i5cZ87ug&list=PLqKQF2ojwm3njNpksFCi8o-_c-9Vva_W0|Практика Vue JS - создание CRM системы]] (Владилен Минин)
 +  * [[https://www.youtube.com/watch?v=xodyM-xXrl4&list=PLu_62Q68DvTqmSjoY-3uPtJAXmT5WWMy1|Vue.js+Vuetify+Firebase (RU)]] :!:
   * [[https://www.youtube.com/watch?v=k3yRfEw1pYk&list=PL5r0NkdgM0UOxb4Hl81FV5UIgexwTf8h7|Vue.js с нуля]] (Точка.dev)   * [[https://www.youtube.com/watch?v=k3yRfEw1pYk&list=PL5r0NkdgM0UOxb4Hl81FV5UIgexwTf8h7|Vue.js с нуля]] (Точка.dev)
-  * [[https://www.youtube.com/watch?v=b7r6JlLvF0Q&list=PLu_62Q68DvTrWAR_3-iOfIdbqKU912i3z|Learn Vue.js]] (Learn Programming Together) 
   * [[https://www.youtube.com/watch?v=NtlVno8igVQ&list=PL0lO_mIqDDFVVNsIt02JBIdBkjNVHIoum|Vue.js для начинающих]] (Гоша Дударь)   * [[https://www.youtube.com/watch?v=NtlVno8igVQ&list=PL0lO_mIqDDFVVNsIt02JBIdBkjNVHIoum|Vue.js для начинающих]] (Гоша Дударь)
   * [[https://www.youtube.com/watch?v=O9p4dRBRSXE&list=PLEyOhcqU3T9VL6wathF8CoHnHGvUAdzq6|Vue.js. Введение]] (Ausite Blog)   * [[https://www.youtube.com/watch?v=O9p4dRBRSXE&list=PLEyOhcqU3T9VL6wathF8CoHnHGvUAdzq6|Vue.js. Введение]] (Ausite Blog)
Строка 203: Строка 100:
   * [[https://www.youtube.com/watch?v=IMYO487lpxg&list=PLVfMKQXDAhGWFP61AzOs_PowY7OAaFRHU|Vue js уроки]] (Web Developer Blog)   * [[https://www.youtube.com/watch?v=IMYO487lpxg&list=PLVfMKQXDAhGWFP61AzOs_PowY7OAaFRHU|Vue js уроки]] (Web Developer Blog)
   * [[https://www.youtube.com/watch?v=6Vu3_zEwZOw&list=PLYfFMdgVk4_wQGMwjKlb8y8wSP-0Dnq5B|VueJS API]]   * [[https://www.youtube.com/watch?v=6Vu3_zEwZOw&list=PLYfFMdgVk4_wQGMwjKlb8y8wSP-0Dnq5B|VueJS API]]
 +  * [[https://www.youtube.com/watch?v=k3yRfEw1pYk&list=PL5r0NkdgM0UOxb4Hl81FV5UIgexwTf8h7|Vue.js с нуля ]]
 +