Vue.Js Flashcards
How to install Vue and create a Vue project from template?
In terminal write: npm install -g @vue/cli
Then to create a project: Vue create project name
Which function inserts your component into your html?
import { createApp } from Vue
createApp(component name”).mount({html selector})
How to create a Vue.js component?
- Create it in your script as a JS object (rarely used and unintuitive)
- 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
Что такое интерполяция во Vue? Как её использовать?
Интерполяция Vue это использование переменных из data() компонента внутри верстки. Используется так:
У нас есть компонент, с script фрагментом, который выглядит так:
script
export default {
data(){
return {
variable : 0,
}
}
}
script
Используем:
template
p what is the value? It’s {{ variable }}! p
template
Каким образом можно добавить обработку нажатия кнопки внутри one file компонента Vue?
Создать функцию обработки нажатия в секции в методе компонента под названием methods script:
export default{
data(){
return {
"variable" : 0;
}
}
methods(){
clickprocess(){
this.variable++;
}
}
}
Добавить обработку в template:
button @v-on:click=”clickprocess” button
v-on: click лучше заменить на короткую версию: @click
Как можно легко дебажить vue приложение?
Скачать расширение Vue devtools (beta для третей версии Vue)
Как реализовываться двухстороннее связывание? (Как связать например форму и переменную в компоненте?
С помощью 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 значение
How to prevent a Vue form from submitting?
Form @submit.prevent
Как вставить один компонент Vue в другой?
Как передать ему данные?
Нужно импортировать в его секцию script, и зарегистрировать его в components поле экспорта:
script
import Component from “@/components/Component
export default {
components:{
Component, Component2
}
}
Как передать данные в импортированный компонент?
Нужно использовать директиву v-bind, а внутри самого компонента использовать поле props в экспорте
Компонент родитель:
template
child :data=”parentVar”
template
Импортированный компонент
script
export default {
props: {
data: {
type: Array,
required: true
}
}
}
Можно ли изменять данные, переданные компоненту через props?
Нет
Как называется директива, заменяющая все типы двухстороннего связывания, включающая в себя событие (onclick например) и привязку v-bind?R
V-model = “variable”
Как передать данные из импортированного компонента в компонента родителя?
Сгенерировать событие в компоненте ребенке с помощью emit, и подписаться на это событие в родителе
Пример:
Родитель -
template
child @create=”ProcessCreation” // список аргументов функции - данные, которые отсылает emit в ht,tyrt
template
Ребенок:
methods:{
onclick(){
this.$emit('create', this.data);
}
}
Как поместить что-либо вовнутрь импортированного компонента Vue?
В вёрстке дочернего компонента создать слот для элементов
template
div
slot slot
div
template
Как экспортировать сразу все компоненты и не включать их по одному?
Создать отдельный js файл, импортировать их туда, экспортировать обьект с этими всеми компонентами
В основном js файле массивом все зарегистрировать через функцию .component
Как обрабатывать данные в компоненте, который получает их через v-model?
Получить их в props (дефолтное имя переменной будет modelValue, но можно поставить v-model:variableName и в props компонента также поставить variableName) и повесить обработку события.
Как обработать запрос на сервер при открытии страницы Vue?
Лучше всего будет обработать его в хуке жизненного цикла mounted()
Как использовать функционал анимаций, встроенный во Vue?
Завернуть элементы, для которых нужна будет анимация в специальный элемент transition group (больше в документации)
Как динамически добавить элементу класс или инлайн стиль?
используя специальный атрибут Vue “:class” (:style для стиля)
div :class=”{
‘className’: flag===true // условие
}”
Как создать референс на DOM элемент компонента, для использования его в функциях жизненного цикла? Как получить к нему доступ?
Навесить ref с именем на элемент. Доступ получается через специальный обьект this.$refs.имя компонента
div ref=”element” div
mounted(){
console.log(this.$refs.element);
}
Как создать постраничную навигацию во Vue?
Создать файл с названием 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
Как создать динамическую страничную навигацию?
В элементе вёрстки, который перенаправляет на другую страницу использовать функцию $router.push(‘добавляемый URL)
пример: div @click=”$router.push(“/page/${id}”)
А в routes роутера добавить путь {path:’/page/:id’, component: UserIDPage}
Можно ли во Vue создавать пользовательские директивы?
Да, можно, подробнее в документации.
Их также нужно импортировать в main скрипт (как и общие компоненты), и затем подключать к приложению с помощью функции app.directive(имя директивы, директива)
Как создать mixin во Vue?
Создать отдельный файл миксина, вставить в него нужный функционал
mixin.js
exportdefault{
*свойства компонента*
//например data(){}
}
Вставить его можно, вставив в массив поля mixins его имя в экспорт компонента
Component.vue
export default{
mixins:[mixin]
}
Как создать глобальные переменные с помощью глобального хранилища Vuex?
Вначале нужно создать хранилище с помощью функции из 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
Как можно улучшить декомпозицию, переместив нужные вещи в другие файлы?
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 будет доступно в компоненте
