Vue.Js

Question 1

How to install Vue and create a Vue project from template?

Answer 1

In terminal write: npm install -g @vue/cli

Then to create a project: Vue create project name

Question 2

Which function inserts your component into your html?

Answer 2

import { createApp } from Vue

createApp(component name”).mount({html selector})

Question 3

How to create a Vue.js component?

Answer 3

1. Create it in your script as a JS object (rarely used and unintuitive)
2. Single file component method - create a separate file with sections : template (html), script (JS), style (CSS), and export it from the file into your main script

Question 4

Что такое интерполяция во Vue? Как её использовать?

Answer 4

Интерполяция Vue это использование переменных из data() компонента внутри верстки. Используется так:
У нас есть компонент, с script фрагментом, который выглядит так:
script
 export default {
     data(){
        return {
              variable : 0,
        }
      }
  }
script

Используем:
template
p what is the value? It’s {{ variable }}! p
template

Question 5

Каким образом можно добавить обработку нажатия кнопки внутри one file компонента Vue?

Answer 5

Создать функцию обработки нажатия в секции в методе компонента под названием methods script:

export default{
    data(){
        return {
          "variable" : 0;
        }
    }
   methods(){
       clickprocess(){
          this.variable++;
       }
   }
}

Добавить обработку в template:
button @v-on:click=”clickprocess” button

v-on: click лучше заменить на короткую версию: @click

Question 6

Как можно легко дебажить vue приложение?

Answer 6

Скачать расширение Vue devtools (beta для третей версии Vue)

Question 7

Как реализовываться двухстороннее связывание? (Как связать например форму и переменную в компоненте?

Answer 7

С помощью v-bind:attribute и обработчика ввода

Template
    Form
        input type=text v-bind:value="variable" @input="processInput"
    Form
Template

export default{
    data(){
        return {
          "variable" : 0;
        }
    }
   methods(){
       process Input(input){
          this.variable = input.value
       }
   }
}

Process Input метод оптимизируется таким образом:
input type=text v-bind:value=”variable” @input=”variable = $event.target.value”

$event это зарезервированное во Vue значение

Question 8

How to prevent a Vue form from submitting?

Answer 8

Form @submit.prevent

Question 9

Как вставить один компонент Vue в другой?

Как передать ему данные?

Answer 9

Нужно импортировать в его секцию script, и зарегистрировать его в components поле экспорта:

script
import Component from “@/components/Component

export default {
    components:{
    Component, Component2
    }
}

Question 10

Как передать данные в импортированный компонент?

Answer 10

Нужно использовать директиву v-bind, а внутри самого компонента использовать поле props в экспорте

Компонент родитель:
template
child :data=”parentVar”
template

Импортированный компонент
script
    export default {
        props: {
        data: {
            type: Array,
            required: true
        }    
    }    
}

Question 11

Можно ли изменять данные, переданные компоненту через props?

Answer 11

Нет

Question 12

Как называется директива, заменяющая все типы двухстороннего связывания, включающая в себя событие (onclick например) и привязку v-bind?R

Answer 12

V-model = “variable”

Question 13

Как передать данные из импортированного компонента в компонента родителя?

Answer 13

Сгенерировать событие в компоненте ребенке с помощью emit, и подписаться на это событие в родителе

Пример:
Родитель -

template
child @create=”ProcessCreation” // список аргументов функции - данные, которые отсылает emit в ht,tyrt
template

Ребенок:
methods:{
    onclick(){
    this.$emit('create', this.data);
    }
}

Question 14

Как поместить что-либо вовнутрь импортированного компонента Vue?

Answer 14

В вёрстке дочернего компонента создать слот для элементов

template
   div
        slot slot
   div
template

Question 15

Как экспортировать сразу все компоненты и не включать их по одному?

Answer 15

Создать отдельный js файл, импортировать их туда, экспортировать обьект с этими всеми компонентами
В основном js файле массивом все зарегистрировать через функцию .component

Question 16

Как обрабатывать данные в компоненте, который получает их через v-model?

Answer 16

Получить их в props (дефолтное имя переменной будет modelValue, но можно поставить v-model:variableName и в props компонента также поставить variableName) и повесить обработку события.

Question 17

Как обработать запрос на сервер при открытии страницы Vue?

Answer 17

Лучше всего будет обработать его в хуке жизненного цикла mounted()

Question 18

Как использовать функционал анимаций, встроенный во Vue?

Answer 18

Завернуть элементы, для которых нужна будет анимация в специальный элемент transition group (больше в документации)

Question 19

Как динамически добавить элементу класс или инлайн стиль?

Answer 19

используя специальный атрибут Vue “:class” (:style для стиля)

div :class=”{
‘className’: flag===true // условие
}”

Question 20

Как создать референс на DOM элемент компонента, для использования его в функциях жизненного цикла? Как получить к нему доступ?

Answer 20

Навесить ref с именем на элемент. Доступ получается через специальный обьект this.$refs.имя компонента

div ref=”element” div

mounted(){
console.log(this.$refs.element);
}

Question 21

Как создать постраничную навигацию во Vue?

Answer 21

Создать файл с названием router.js
В нем создать массив с объектами с полями path и component
Импортировать в него страницы компоненты vue
Создать обьект роутера с помощью функции createRouter

В основном скрипте подключить роутер

В темплейте главного компонента добавить тег router-view

router.js

import Main from “@/pages/Main” // страница, на которую будет перенаправлять
роутер
import {createRouter, createWebHistory} from “vue-router”
const routes = [
{ path:”\user”, component: Main},
{ path:”\nopage”, component: EmptyPage} // путь в адресной строке и имя используемого компонента
]

const router = createRouter(routes, history:createWebHistory(process.env.BASE_URL) // из документации

export default router

main. js
app. use(router).mount(верстка)

Main.vue
template
    div 
        router-view router-view
    div
template

Question 22

Как создать динамическую страничную навигацию?

Answer 22

В элементе вёрстки, который перенаправляет на другую страницу использовать функцию $router.push(‘добавляемый URL)
пример: div @click=”$router.push(“/page/${id}”)

А в routes роутера добавить путь {path:’/page/:id’, component: UserIDPage}

Question 23

Можно ли во Vue создавать пользовательские директивы?

Answer 23

Да, можно, подробнее в документации.
Их также нужно импортировать в main скрипт (как и общие компоненты), и затем подключать к приложению с помощью функции app.directive(имя директивы, директива)

Question 24

Как создать mixin во Vue?

Answer 24

Создать отдельный файл миксина, вставить в него нужный функционал
mixin.js
exportdefault{
   *свойства компонента* 
   //например data(){}
}

Вставить его можно, вставив в массив поля mixins его имя в экспорт компонента

Component.vue
export default{
mixins:[mixin]
}

Question 25

Как создать глобальные переменные с помощью глобального хранилища Vuex?

Answer 25

Вначале нужно создать хранилище с помощью функции из vuex “createStore”

store.js
import {createStore} from “vuex”

export default createStore({
state:{
likes:0}, // данные
getters:{
} // кешированные свойства, похожие на computed
mutations:{
addLike(){this.likes+=1}
} // функции, изменяющие данные
actions:{} // функции, использующие мутации
modules:{} // хранилище для кусочков состояния при увеличении масштабов приложения
})

Подключить его к приложению с помощью .use

import store
app.use(store)

Использование в компоненте:

h1 {{$store.state.likes}} h1 // $store - спец переменная для доступа к хранилищу

мутации:
button @click=”$store.commit(‘addLike’)

Можно упросить синтаксис, сделав импорт
import {mapState, mapGetters, mapActions, mapMutations} from ‘vuex’

и импорт в computed:{
…mapState({}),…mapGetters({})
}

теперь можно использовать все через this:
h1 {{this.likes}} h1

Question 26

Как можно улучшить декомпозицию, переместив нужные вещи в другие файлы?

Answer 26

Composition.api
Создаются файлы “хуки”, которые потом импортируются в компоненты

import ref from “vue”
пример хука: export function addLike2(){likes = ref(10) return likes++}
в функции можно писать функционал как ниже.
В хуке можно использовать методы жизненного цикла компонентов
Пример: onMounted(addLike2())//отработает при отрисофке компонента

Данные в хуки передаются через ref, и забираются через импорт ref

Пользоваться хуками можно через функцию setup(props){
    const likes = ref(0)
   function addLike({likes.value++})// value 
потому что обертка - передача по значению, а не по референсу
    const like= addLike2(likes)
} // все из функции setup будет доступно в компоненте