Учебный проект на основании видео
npm install -g @vue/cli
yarn global add @vue/cli
vue create my-project
vue ui
При создании проекта выбираем настраиваемую установку и оставляем только babel, а на втором вопросе отказываемся от сохранения шаблона.
npm install
npm run serve
npm run build
-
Основы
-
Работа с данными
-
Конструкции
-
Поведение
-
Роутинг
- Импортируются
import TodoList from '@/components/TodoList'
Знак @ указывает на папку src
- Регистрируются в скрипте, в свойстве components
<script>
export default {
components: {
TodoList,
}
}
</script>
- Используются как и в React
<TodoList />
Стили помещаются в тег style в каждом компоненте.
Чтоб создать уникальные стили добавляем атрибут scoped - это добавит специальный хеш-атрибут и стили будут задействованы только к этому компоненту
<style scoped>
ul {
margin: 0;
padding: 0;
}
</style>
Так же доступно использование препроцессоров:
-
Необходимо установить библиотеку
npm i -D sass-loader sass
-
И прописать в теге 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-else-if
и v-else
.
В первые два передаем условие для отображения. Конструкция работает на весь компонент и вложенных условий не предполагает
<Loader v-if="loading" />
<TodoList v-else-if="todos.length" />
<p v-else>No todo!</p>
Оглавление || Документация по 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)">×</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>