Различия

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

--- develop:java-script:vuejs [2019/02/20 21:42] – [RU] mirocow
+++ develop:java-script:vuejs [2025/02/14 16:12] (текущий) – mirocow
@@ Строка 1: / Строка 1: @@
-{{tag>js javascript framework}}
+{{tag>js java-script javascript 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)
-{{:js:vuejs:lifecycle.png?600|}}
-===== Документация  =====
-  * [[https://ru.vuejs.org/v2/guide/installation.html|Документация]]
+===== Популярные компонеты =====
-  * [[https://ru.vuejs.org/v2/api|API]] (rus)
-==== Объект VueJs ====
+  * [[https://github.com/vuejs/vuex|vuex]]
+  * [[https://github.com/vuejs/vue-router|vue-router]]
+  * [[https://github.com/axios/axios|axios]]
+  * [[https://github.com/baianat/vee-validate|vee-validate]]
+  * [[https://github.com/wxsms/uiv|uiv]]
-<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 - Компанент собран, но не помещен в дом
 ===== Расширения / Компоненты / Процессоры =====
+  * [[js:vuejs:docs]]
+  * [[js:vuejs:ui]]
   * [[js:vuejs:faq]]
   * [[js:vuejs:components]]
   * [[js:vuejs:processors]]
   * [[js:vuejs:frameworks]]
+  * [[js:vuejs:repositories]]
+===== Каталоги =====
+  * https://www.vuescript.com
+  * https://vuejsexamples.com
 ===== Ссылки =====
@@ Строка 193: / Строка 87: @@
 ==== 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)