Содержание

Создание нового проекта с помощью Vue CLI

Для создания нового проекта на Vue (при условии установленных Node и Vue CLI) нужно выполнить команду в папке проета

vue create new-project

Работа с refs

Для получения значения любого элемента к нему добавляется атрибут ref и указывается произвольное название, например:

<input type="text" ref="customName">

Для доступа к этому свойству в js кода нужно использовать такую конструкцию:

this.inputValue = this.refs.customName

Жизненные циклы приложения

Для получения любого хука цикла приложения используется код на подобии methods:

beforeCreate() {
    console.log('beforeCreate')    
    }

Модификаторы событий

Модификаторы — особые постфиксы, добавляемые после точки, обозначающие, что директива должна быть связана каким-то определённым образом. Например, модификатор .prevent говорит директиве v-on вызвать event.preventDefault() при обработке произошедшего события:

<form v-on:submit.prevent="onSubmit"> ... </form>

Доступные модификаторы:

.stop
.prevent
.capture
.self
.once
.passive

Передача параметров в компоненты (props):

Для передачи параметра в компонент используется свойство props. В родительском компоненте:

<friend-contact
v-for="friend in friends"
v-bind:key = "friend.id" // key нужно обязательно привязывать при обработке циклов
v-bind:name = "friend.name"
></friend-contact>

В дочернем компоненте в конфигурации добавляется свойство props. Props также могут валидироваться

props: {
    name: String    
    }

или

props: {
    name: {
     type: String,
     required: true
     default: 'some value',
     validator: function(value) {
      return value === '1' || value === '0';   
     }
   }
}

Для ипользования переданных данных в js коде используется this.name

Внутри template используется название props без this

<h2> \{\{ name \}\} </h2>

Передача событий из компонента через $emit

Для передачи события из дочернего компонента родительскому используется $emit

В дочернем элементе в конфигурации добавлятся код:

emits: {
    'new-event'  // здесь перечиляются события, которые есть в компоненте
    События также могут валидироваться.
},
methods: {
     someFunction() {
      this.$emit('new-event',  value1, value2 ....);  
     }
}

В родительском компоненте привязываем $emit к событию

<input 
v-on:new-event="someFunction"
>


</input >

Provide & Inject используются для передачи данных через несколько компонентов между родительским и дочерними элементами.

В родительском элементе добавляем код:

provide: {
     somedate: {
      value1: value1,
      value2: value2
     }
}

В дочернем элементе любой степени вложености для вставки данных используется inject

inject: ['somedate'],



Локальная регистрация компонента внутри родительского компонента

В началае файла добавляется js код для импорта компонента

import ComponentName from './ComponentName.vue

В файле конфигурации добавляется запись

components: {
   'componemt-name' :  ComponentName 
}

Slots

Элементы slot используются для передачи html контента внутрь элементов.

Для создания например стандартной обертки создается глобальный компонент, который имеет scoped стили.

Потом этот элемент оборачивается вокруг нужного контента.


Передача запроса на бекенд методом POST

fetch('server_adress', 
{
   method: 'POST',
   headers: {
    'Content-Type': 'application/json'
    },
   body: {
     message: message
    }
});

Передача запроса на бекенд с Axios

import axios from 'axios'; 
...
axios.post('https://vue-http-demo-85e9e.firebaseio.com/surveys.json', {
  name: this.enteredName,
  rating: this.chosenRating,
});

Получение данных методом GET

fetch('https://vue-http-demo-85e9e.firebaseio.com/surveys.json')
        .then((response) => {
          if (response.ok) {
            return response.json();
          }
        })
        .then((data) => {
          const results = [];
          for (const id in data) {
            results.push({
              id: id,
              name: data[id].name,
              rating: data[id].rating,
            });
          }
          this.results = results;
        });

Routs

Установка пакета для работы с маршрутами

npm install --save vue-router@next

В файле main.js добавляем импорт

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';

const router = createRouter ({
    history: createWebHistory(),
    routes: [
        {
            path: '/teams', component: TeamsList
        },
        {
            path: '/users', component: UsersList
        }
    ]
});

В файле App.vue добавляем код:


Классы анимации vue

  • enter-from
  • enter-to
  • enter-active
  • leave-from
  • leave-to
  • leave-active

Vuex

Цстановка

npm install --save vuex@next

Подключение store

import { createStore } from 'vuex';


const store = createStore({
    state() {
        return {
            counter: 0
        }
    }
});

const app = createApp(App);

app.use(store);


app.mount('#app');

Передача данных из store в компонент

computed: {
    counterValue() {
      return this.$store.state.counter;
    } 

Для правильного изменения данных нужно использовать мутации

const store = createStore({
    state() {
        return {
            counter: 0
        }
    },
    mutations: {
        addOne(state) {
            state.counter++;
        }
    }
});

Для использования мутации в коде компонента

methods: {
        addOne() {
            this.$store.commit('addOnePayload');
        }
}

Передача данных в мутацию

methods: {
        addOnePayload() {
            this.$store.commit('addOnePayload', {value: 5});
        }
}

Код мутации

mutations: {
        addOnePayload(state, payload) {
            state.counter +=payload.value;
        }
}

Также можно использовать альтернативный синтаксис

methods: {
        addOnePayload() {
            this.$store.commit({
                'type': addOnePayload,
                value: 5
                .....
                });
        }
}

Использование гетеров.

Файл main.js

getters: {
    finalCounter(state) {
     return state.counter * 2;   
    }
}

Код компонента

computed: {
    counter() {
        return this.$store.getters.finalCounter;
    }
}
Дополнительная информация по Vuex

Использование actions

Действия похожи на мутацию, но вместо того, чтобы напрямую изменять данные в хранилище, они совершают мутацию. Странно? Давайте посмотрим на объявление действия (action).

mutations : {
  SET_NAME : (state, name) => {
    state.name = name
  }
},
actions : {
  SET_NAME : async (context, name) => {
    let { data } = await Axios.post('http://myapiendpoint.com/api/name',{name : name})
    if(data.status == 200){
      context.dispatch('SET_NAME', name)
    }
  }
}

Никогда не совершайте свои Мутации (Mutations) напрямую. Всегда используйте действия (Actions), чтобы зафиксировать (commit) мутацию