- Открытие: краткое введение и демонстрация vue.js
- Суть разработки vue — компоненты
- Три API компонентов vue: prop, event, slot
- Связь между компонентами
- Объяснение примера: интерфейсные компоненты справочного центра Baht Baoyi
Открытие: краткое введение и демонстрация vue.js
Vue был выпущен в 2013. Это прогрессивный фреймворк и легкий фреймворк.Он заботится только о данных, поэтому разработчикам не нужно уделять слишком много внимания изменениям и операциям DOM.Автор Vue — Эван Ю (Юкси Ю) , работает в Google Creative Lab
DOM: объектная модель документа (объектная модель документа) — это общий программный интерфейс для манипулирования html или xml, который здесь подробно не описывается.
Демонстрация кода двусторонней привязки
// html
<body>
<div id="app">
<input type="text" v-model="note">
<p>{{ note }}</p>
</div>
</body>
// js
var app = new Vue({
el: '#app',
data: {
note: ''
}
})
По сравнению с другими интерфейсными веб-фреймворками vue проще в использовании, код и API более краткие и интуитивно понятные, а скорость выше!
Суть разработки vue — компоненты
Суть Vue заключается в его компонентах и компонентизации.Написание проекта Vue — это на самом деле написание компонентов один за другим.
Классификация компонентов vue (три категории)
- Каждая страница, сгенерированная ==vue-router==, по сути является компонентом (.vue), который в основном несет HTML-структуру текущей страницы, включая сбор данных, сортировку данных, визуализацию данных и другие обычные службы. Весь файл относительно большой, потому что он используется в качестве рендеринга маршрута и не будет использоваться повторно, поэтому он не будет обеспечивать интерфейс с внешним миром; при разработке проекта большая часть кода, который мы пишем, — это тип компонента (страница), которая разрабатывается совместно. Когда каждый человек ведет свою собственную страницу, пересечений мало. Этот тип компонента является относительно лучшим для написания, потому что он в основном предназначен для восстановления проекта проекта и выполнения требований без слишком большого количества модулей и соображений архитектурного дизайна;
- Не включает деловые, независимые, специальные функции == базовые компоненты ==, такие как средства выбора даты, модальные окна и т. д. В качестве основных элементов управления проекта такие компоненты будут широко использоваться, поэтому API компонентов слишком сильно абстрагируется, и через разные конфигурации могут быть реализованы разные функции;
- ==Бизнес-компоненты==. В отличие от второго типа независимого компонента, который содержит только определенную функцию, он повторно используется несколькими страницами в бизнесе. Разница между ним и независимым компонентом заключается в том, что бизнес-компонент используется только в текущем проекте и не является универсальным. и будет включать в себя некоторые службы, такие как запросы данных, в то время как независимые компоненты не содержат службы и могут использоваться в любом проекте с одной функцией, например, поле ввода с пользовательской функцией проверки данных.
Три API компонентов vue: prop, event, slot
Сложность компонента состоит из трех частей: ==prop (свойство)==, ==event (событие)==, ==slot (слот)==, эти три должны быть разработаны в первую очередь. Часть компонента может быть продолжалась разработка компонентов.Иначе после выпуска кода будет сложно потом модифицировать API.Сопровождение компонентов в основном основано на новых функциях, а не на частых изменениях интерфейса;
опора (собственность)
Prop определяет, какие настраиваемые свойства имеет этот компонент, и основные функции компонента также определяются им. При написании общих компонентов реквизиты предпочтительно должны быть написаны как объекты, чтобы вы могли установить тип, значение по умолчанию или значение пользовательских свойств проверки для каждого свойства.Это очень важно при разработке компонентов, но многие люди игнорируют это и используют его. Массив использования реквизита, такие компоненты часто не являются строгими.
Например: компонент всплывающей рамки для печати со стороны кассира (часть кода сокращена)
<template>
<!--打印-->
<el-dialog
:show-close="false"
:visible="visiable"
:closeOnClickModal="false"
custom-class="zbe-dialog chose-sale"
width="1000px"
center
>
<p slot="title" class="zbe-dialog-title">打印单据</p>
<div class="box">
<el-row style="margin-top:10px">
<el-col :span="24" v-if="!web_view_error" v-loading="loading">
<!-- 预览窗口 -->
<webview
ref="view"
id="view"
:src="visiable?data_web_view_url:' '"
autosize
plugins
disablewebsecurity
allowpopups
style="display:inline-flex; width:100%;height:400px;"
></webview>
</el-col>
<!-- 打印加载失败提示 -->
<el-col :span="24" v-if="web_view_error&&!loading">打印加载失败</el-col>
</el-row>
<!-- 关闭按钮 -->
<el-row>
<el-col :span="11" :offset="20" style="margin-top:20px">
<el-button @click="doCancle">关闭</el-button>
</el-col>
</el-row>
</div>
</el-dialog>
</template>
<script>
export default {
name: "print",
props: {
// 控制组件的显示隐藏
show: {
type: Boolean,
default: false
},
// 打印URL
web_view_url: "",
// 关闭打印后的跳转地址
web_view_reback_path: "",
// 是否打印加载失败
web_view_error: false
},
data() {
return {
visiable: false,
domReady: true,
data_web_view_url: "/",
loading: false
};
},
methods: {
// 关闭后跳到传过来的path
doCancle() {
this.$emit("dailog-close", "printDialogVisible");
this.$router.push({ name: this.web_view_reback_path });
}
},
watch: {
show(item) {
this.visiable = item;
},
web_view_url(newValue, oldValue) {
this.loading = true;
this.data_web_view_url = "/";
setTimeout(() => {
this.data_web_view_url = newValue;
}, 200);
this.loading = false;
},
}
};
</script>
В компоненте определены 4 реквизита, а именно ==show== (управление отображением и сокрытием компонентов), ==web_view_url== (печать URL), ==web_view_reback_path== (закрытие адреса перехода после печати), = = web_view_error== (если загрузка печати не удалась)
Стоит отметить, что реквизиты, определенные в компоненте, представляют собой односторонний поток данных, который можно изменить только посредством выравнивания родительского компонента.Сам компонент не может изменять значение реквизита, а только данные, определенные в данных. , Уведомлять родителя через настраиваемое событие, описанное ниже, которое модифицируется родителем;
соль (слот)
Сначала посмотрите код
<template>
<button>
<slot name="icon"></slot>
<slot></slot>
</button>
</template>
Узел здесь — это расположение указанного слота, так что содержимое может быть расширено внутри компонента;
<i-button>
<i-icon slot="icon" type="checkmark"></i-icon>
按钮 1
</i-button>
Таким образом, содержимое, определенное в родительском элементе, появится в слоте, соответствующем компоненту.Если имя не написано, это слот по умолчанию;
мероприятие
или сначала посмотрите код
<template>
<button @click="handleClick">
<slot></slot>
</button>
</template>
<script>
export default {
methods: {
handleClick (event) {
this.$emit('on-click', event);
}
}
}
</script>
В компоненте вы можете запускать настраиваемое событие по клику через $emit и прослушивать родительский компонент через @on-click
<i-button @on-click="handleClick"></i-button>
Связь между компонентами
Компоненты с областью действия Vue изолированы, им не разрешено напрямую ссылаться на данные в подкомпонентах шаблона родительского компонента. Вы должны использовать определенный метод для передачи данных между компонентами.
Метод связи родительского компонента с дочерним компонентом может быть передан через реквизиты: Если вам нужно получить значение имени пользователя из родительского компонента, вам нужно
props:{
username:{
}
}
Дочерний компонент может передавать данные родительскому компоненту через событие:
methods:{
handelSwitch(index){
this.actIndex=index;
this.$emit("transferTabIndex",this.actIndex)
}
}
2. Связь между неродительскими и дочерними компонентами: eventBus
Метод связи eventBus направлен на связь между неродительскими и дочерними компонентами, и его принцип по-прежнему заключается в запуске и мониторинге событий;
Но поскольку это не родительский-дочерний компонент, для соединения им нужен промежуточный компонент;
Я использую его, определяя компонент, к которому все компоненты могут получить доступ в корневом компоненте, то есть компонент #app.Конкретное использование выглядит следующим образом:
Чтобы передать данные с помощью eventBus, нам нужно сделать всего 3 вещи.
- 1. Добавьте атрибут шины в компонент приложения (чтобы все компоненты могли получить доступ к ней через это. $ Root.bus, и не нужно вводить какие-либо файлы);
- В Компоненте 1 in это.
генерировать триггерное событие; - 3. В компоненте 2 это.
о событиях монитора;
3. Используйте локализованный механизм кэширования
Этот вид связи относительно прост, но недостатком является то, что данные и статус хаотичны, и их нелегко поддерживать;
Получение данных window.localStorage.getItem(key); window.localStorage.setItem (ключ, значение) для хранения данных;
Обратите внимание, что для формата преобразования данных с использованием JSON.PARSE () / JSON.Stringify ();