Он подробно знакомит с синтаксисом и общими плагинами расширений vue3, что удобно для изучения и поиска. Заинтересованные друзья могут обратиться к нему!
Отредактировано в 2024-02-04 00:46:16Vue3
Создать проект
vue создать A
Синтаксис шаблона
текст
{{ сообщение }}
В любом месте
Эквивалент $A.text() в JS.
Обычно он используется для установки данных с помощью data() в js.
Старая версия
экспортировать по умолчанию { имя: '123', данные(){ возвращаться{ msg: "Приглашение к сообщению" } } }
новая версия
ref определяет переменную, которую можно переназначить с помощью атрибута .value. ref — это перепаковка реактивного
реактивный определяет объекты, не может определять базовые типы данных и не может быть переназначен
Необработанный HTML
При динамическом представлении HTML с переменными двойные фигурные скобки будут интерпретировать данные как обычный текст, а не HTML.
v-html=""
Эквивалент $A.html() в JS.
Атрибуты
Используйте переменные для динамического представления атрибута
v-bind:id=""
Эквивалент $('div').attr('id', 'ID') в JS.
v-bind:id можно сократить как:id
Если мы хотим, чтобы B в A="B" была переменной, просто добавьте: перед A.
Простые выражения js могут поддерживаться в шаблонах.
Может
{{ номер 1 }}
{{ ок? 'ДА': 'НЕТ'}}
{{ message.split( ' ').reverse().join( ' ')}}
нет
{{ вар а = 1 }}
Это утверждение, а не выражение
{{ if (ok) {возвратное сообщение} }}
Управление процессом не вступит в силу, используйте троичные выражения.
Условный рендеринг
в-если
Будет отображаться только в том случае, если значение истинно.
в-еще
v-шоу
Будет рендериться, но не отображаться
Рендеринг списка
v-для
(x,индекс) в элементах
Эта команда будет повторять len(items) раз, и каждый раз, когда x внутри используется для получения значения в items.
:key="item.id"
Обновление для повышения эффективности
обработка событий
Добавить событие
Пишите напрямую
@click="счетчик = 1"
Вызов функций
@click="clickHandle(123)"
Старая версия
методы: { clickHandle (данные) { console.log(данные); } }
Благодаря этому можно изменить значение данных в методах.
новая версия
Вы можете добавить событие параметра, которое является собственным событием js.
Уведомление
щелчок может быть вызван любым объектом, по которому щелкают мышью, например <li>
Двусторонняя привязка
v-модель
Может двунаправленно связывать <input>, <textarea> и <select>.
Изменение значения в data может изменить значение в <input>, Изменение значения в <input> также может изменить значение в данных.
Преобразование атрибута в тип модели
v-модель:current-page="nowpage"
v-model.lazy
Изменится только тогда, когда <input> потеряет фокус
v-model.trim
Удалить начальные и конечные пробелы при получении
компоненты
суффикс
.vue
содержание
шаблон
сценарий
экспортировать свойства объекта по умолчанию
name: имя компонента
данные: передать данные
методы: писать функции
компоненты: хранит все компоненты, используемые в <шаблоне>
реквизит: хранит данные, переданные родительским компонентом дочернему компоненту.
watch(): срабатывает при изменении определенных данных
вычислено: динамически вычислять определенные данные
setup(props, context): инициализировать переменные и функции
ref определяет переменную, которую можно переназначить с помощью атрибута .value.
Объект реактивного определения не может быть переназначен
context.emit(): функция, которая запускает привязку родительского компонента.
return может передавать данные дочерним компонентам
стиль
ограниченный
Если этот атрибут присутствует, этот стиль будет действовать только в текущем компоненте.
нагрузка
Знакомство с компонентами
импортировать A из ./comComponents/A.vue
висит на компоненте
компоненты: {A}
компонент дисплея
<А/>
Взаимодействие компонентов
Родительский компонент передается дочернему компоненту
Передать HTML
<el-main>Список</el-main>
Передача переменных
способ доставки
Через реквизиты в экспорте по умолчанию в скрипте
Прохождение шагов
родительский компонент
Пропишите тег дочернего компонента в шаблоне.
:А=Б :С=D
Если вы хотите передать какой-то сложный параметр B, вы можете написать его в setup().
Здесь B — пользователь
Подсборка
сценарий
экспортировать по умолчанию { имя: «МойКомпонент», реквизит: { А:{ тип: Строка, по умолчанию: "" }, }, }
Обычно выбирают один из обязательных:true и default:""
Уведомление
Значения по умолчанию для массивов и объектов должны быть функциями
по умолчанию: функция() { возвращаться []; }
по умолчанию: функция() { возвращаться {}; }
При настройке вы можете ссылаться на информацию родительского компонента через реквизиты.
шаблон
{{}} Цитировать
тип пройден
Нить
Число
логическое значение
Множество
Объект
Функция
Дочерний компонент передается родительскому компоненту
способ доставки
Передача данных через пользовательские события
Прохождение шагов
Подсборка
Напишите событие A в шаблоне
источник событий
Реализуйте это событие A в методах
Старая версия
this.$emit("B",this.message)
новая версия
context.emit("B"): функция, которая запускает привязку родительского компонента.
родительский компонент
Пропишите тег дочернего компонента в шаблоне.
@Б="С"
Реализуйте это событие C в методах. Событие будет иметь параметр, который является переданным значением.
С(данные){}
Жизненный цикл компонента
При создании: beforeCreate, создано При рендеринге: beforeMount, смонтировано При обновлении: beforeUpdate, обновлено При размонтировании: beforeUnmount, размонтировано
Восемь периодических функций находятся на том же уровне, что и данные.
Представлять третьих лиц
Свипер
карусель
Аксиос
сетевой запрос
инкапсуляция
Создайте папку utils в src и создайте в ней файл request.js.
Конкретное использование
https://www.bilibili.com/video/BV1Y84y1B7Tz?p=14&vd_source=048c7bdfe54313b8b3ee1483d9d07e38
10:16
Междоменное решение сетевых запросов
Строка запроса
Преобразовать в строку
маршрутизация
Переход на страницу
Пропишите URL, который нужно перепрыгнуть в маршрутах в роутере
<маршрутизатор-представление>
показывать
<маршрутизатор-ссылка на="...">
Прыгать
Несущие параметры
путь:"/список/:A/:B"
to="/list/Baidu/1"
const маршрут = useRoute(); {{route.params.userID}}
Вложенная маршрутизация
Перенаправление
{ путь: '/:catchAll(.*)/', перенаправление: "/404", }
обновить
По умолчанию определяется необходимость обновления по имени.
Вы можете настроить метод оценки, переписав ключевое значение.
вюекс
состав
состояние: использовать контент в vuex
Getter: фильтрация и расчет данных в Vuex
Мутация: изменение состояния в хранилище Vuex.
Старая версия
новая версия
импортировать {useStore} из "vuex";
const store = useStore();
настраивать(){ store.dispatch("логин", {параграфы}) }
Commit — это метод отправки и выполнения мутаций. Мутации изменяют данные и должны быть синхронизированы.
Dispatch — это метод, который отправляет и выполняет действия. Действия отправляют мутации, которые могут быть асинхронными операциями.
действие: аналогично Mutation, поддерживает асинхронные операции, но не может изменять хранилище
модули: подмодули, которые определяют состояние
передача
внешний
состояние
store.state.user.access
действие
store.dispatch("имя функции", параметры)
мутация
store.commit("имя функции", параметры)
внутренний
мутации корректируют состояние
state.id
функция вызова
Изменить магазин на контекст
JWT
Открытый ключ пароля -> новая строка. Если у вас есть открытый ключ, вы можете использовать его, чтобы проверить правильность пароля. Но если вы хотите получить пароль через эту новую строку, вам понадобится новая строка. назад.
npm я jwt-декодировать
импортировать jwt_decode из «jwt-decode»;
Примечание. После носителя стоит пробел.
аякс
Если вы хотите использовать ajax на странице vue, вы можете написать его непосредственно в настройке, и он будет вызываться непосредственно при создании страницы. Конечно, это также можно записать в функции
Если вы хотите использовать его в vuex, вам нужно поместить его в функцию, чтобы запустить его.
другой
настраивать()
Фрагмент без корневого узла
Установить элемент
npm установить элемент-плюс --save
npm install -D unplugin-vue-компоненты unplugin-auto-import
vue.config.js
const { defineConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-comComponents/webpack') const { ElementPlusResolver } = require('unplugin-vue-comComponents/resolver') модуль.exports = defineConfig({ транспиледепенденсиес: правда, configureWebpack: { плагины: [ Автоимпорт({ резольверы: [ElementPlusResolver()] }), Компоненты({ резольверы: [ElementPlusResolver()] }) ] } })