YmNIK13 / vue-50min

на основании видео https://www.youtube.com/watch?v=OlnwgS-gk8Y

vue-crash-course

Учебный проект на основании видео

Создание нового проект Vue

Устанавливаем vue-cli

npm install -g @vue/cli

или

yarn global add @vue/cli

Создаем проект

vue create my-project

или

vue ui 

При создании проекта выбираем настраиваемую установку и оставляем только babel, а на втором вопросе отказываемся от сохранения шаблона.

---

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

---

Пояснения

Оглавление

1. Основы

   • Компоненты;
   • Стили;

2. Работа с данными

   • Данные;
   • Модели (Связь данных с компонентом);
   • Вычисляемые поля;

3. Конструкции

   • Условия отображения;
   • Коллекции (for);

4. Поведение

   • События;
   • Жизненный цикл;
   • Хуки;

5. Роутинг

   • Роутинг.

Компоненты

Оглавление

1. Импортируются

import TodoList from '@/components/TodoList'

Знак @ указывает на папку src

2. Регистрируются в скрипте, в свойстве components

<script>
    export default {
        components: {
            TodoList,
        }
    }
</script>

3. Используются как и в React

<TodoList />

Стили

Оглавление

Стили помещаются в тег style в каждом компоненте.

Чтоб создать уникальные стили добавляем атрибут scoped - это добавит специальный хеш-атрибут и стили будут задействованы только к этому компоненту

<style scoped>
    ul {
        margin: 0;
        padding: 0;
    }
</style>

Так же доступно использование препроцессоров:

1. Необходимо установить библиотеку

    npm i -D sass-loader sass
   

2. И прописать в теге style атрибут lang="scss"

<style lang="scss">
$color: red;
</style>

Подробней тут

Данные

Оглавление

По сути это props в React

Для инициализации данных прописываем их в функцию data()

export default {
    name: 'App',
    data() {
        return {
            todos: []
        }
    },
}

Для передачи данных в компонент исопльзуем тег v-bind

<TodoList v-bind:name_param="todos" />

где

• name_param - это название пропса в компоненте
• todos - это сами данные

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

<script>
    export default {
        props: ['name_param'],
    }
</script>

при получении можно также валидировать

<script>
    export default {
        props: { // при валидации  уже передаются через объект
            todo: {
                type: Object,
                required: true, // обязательный параметр
            },
            index : Number // можно сходу указать тип
        }
    }
</script>

Модели (Связь данных с компонентом)

Оглавление

Осуществляется через атрибут v-model , куда передаем переменную для связи

<input type="text" v-model="title"/>

связав данные с элементом мы можем их обработать в свойстве watch, где нам надо создать функцию с таким же названием как и переменная, в данном случае title() и одним аргументом, куда будет попадать значение после изменений

export default {
    data() {
        return {
            title: '',
        }
    },
    watch: {
        title(value) { 
            // ...
        }
    },
}

Вычисляемые поля

Оглавление

Если нам надо создать вычисляемую переменную то в свойстве computed описываем функцию которая будет возвращать результат

export default {
    data() {
        return {
            todos: [],
        }
    },
    computed: {
        filterTodos() { // используем как переменную вместо массива todos
            if (this.filter === 'all') {
                return this.todos
            }
            if (this.filter === 'completed') {
                return this.todos.filter(t => t.completed)
            }
            if (this.filter === 'not-completed') {
                return this.todos.filter(t => !t.completed)
            }
        }
    },
}

а в самом темплейте используем название функции как переменную

<TodoList v-bind:todos="filterTodos" />

Условия отображения (v-if)

Оглавление

Для отображения определенного вывода в темплейте используются атрибуты v-if, v-else-if и v-else. В первые два передаем условие для отображения. Конструкция работает на весь компонент и вложенных условий не предполагает

<Loader v-if="loading" />
<TodoList v-else-if="todos.length" />
<p v-else>No todo!</p>

Коллекции (v-for)

Оглавление || Документация по v-for

Если нам надо вывести коллекцию каких-то компонентов, то в самом компоненте, который надо выводить при вызове указываем атрибут v-for

<TodoItem
    v-for="(todo, i) of todos"
    v-bind:todo="todo"
    v-bind:index="i"
/>

в значении v-for указываем имя переменной передаваемого элемента todo и индекса i , которые мы передаем в виде props через v-bind уже с именами todo и index

События

Оглавление

Подписаться

Подписаться на событие элемента можно через атрибут v-on:

<TodoItem v-on:click="removeTodo" />

а дальше, после двоеточия, указываем название события и указываем обработчик.

Так же есть сокращенный тип привязки событий

<TodoItem @click="removeTodo" />

Можно запретить всплывающее событие через модификатор prevent

<form @submit.prevent="onSubmit">
    // ...
</form>

Обработчик

Все обработчики регистрируем в свойстве methods

export default {        
    methods: {
        removeTodo(id) {
    	    this.$emit('remove-todo', id)
        }
    }
}

Свое событие

События создаются через объект $emit который можно вызвать через this в коде

this.$emit('remove-todo', todo.id)

или можно генерить непосредственно в темплейте

<button class="rm" v-on:click="$emit('remove-todo', todo.id)">&times;</button>

в обоих случаях, мы при клике зарегистрируем событие remove-todo в которое будет передана переменная todo.id

Жизненный цикл

Оглавление

Жизненный цикл

Хуки

Оглавление

если что-то надо сделать до создания компонента - прописываем это в функцию mounted

export default {
    name: 'App',
    data() {
        return {
            todos: []
        }
    },
    mounted() {
        fetch('https://jsonplaceholder.typicode.com/todos?_limit=3')
            .then(response => response.json())
            .then(json => {
                this.todos = json
            })
    },
}

В данном случае мы получаем json и сохраняем его в массив todos

Роутинг

Оглавление

Для роутинга необходима библиотека

npm i vue-router

Настройка роутов происходит тут

src/router.js

В главном файле main.js импортим router.js и передаем его в главный компонент Vue

А в самом шаблоне главного элемента прописываем вызов компонента роутов

<router-view />

Ссылки

Можно указывать ссылки на страницу напрямую, но чтоб страница не перезагружалась генерим их через компонент router-link

<router-link to="/todos">Todos</router-link>