Nano Hash - криптовалюты, майнинг, программирование

Список левого меню VueJS, который обновляет основную панель содержимого

У меня есть приложение VueJS, в котором мне нужно создать компонент, который будет иметь левое меню и основное содержимое, подобное следующему изображению:

введите здесь описание изображения

Как только представление загружено, create method я загружу left menu json и items content json. К тому времени ни один элемент не будет отображаться в основном контенте.

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

Мой вопрос здесь о том, сколько компонентов я должен построить?

Думаю, мне придется создать контейнер компонентов, который будет содержать left menu component и right component. Тогда правый компонент будет иметь заголовок и элемент v-for, который будет отображать каждый из item component. Это путь?

Любой совет?

vue.js vuejs2
15.02.2019

  • 1. Создайте его в одном компоненте и разбейте, когда вам надоест! 2. Ваш счет, вероятно, в порядке. 3. Вы можете создать компонент левого меню, который фактически реализует основной контент с контентом элемента, а не разрывает ссылку. Left item -> main content -> item -> item content вместо Left Menu -> Item И main content -> main content -> item -> item-content 15.02.2019
  • Итак, вы имеете в виду, что 3. создать компонент левого меню, а внутри этого шаблона есть HTML, который отображает основной контент и элементы? 15.02.2019
  • Да, ничто не мешает вам использовать любой метод. Я не уверен в преимуществах, кроме того, что левое меню сможет передать props вниз через все компоненты. Я предполагаю, что когда вы щелкаете ссылку в меню, вы просто устанавливаете элемент, который хотите показать, а затем подкомпонент должен обрабатывать загрузку остальных данных. Делаете ли вы это в качестве реквизита или просто data в основном приложении, на самом деле не имеет значения... 15.02.2019
  • Да, это правильно 15.02.2019

Ответы:


1

Вы можете создать один компонент-контейнер, который отображает все три области, используя сетку CSS. Затем у вас может быть компонент для каждой области: левое меню, заголовок и основное содержимое.

С макетом сетки нужно немного поучиться, но он чрезвычайно полезен. Современные браузеры поддерживают его, но не IE.

new Vue({
  el: '#app',
  components: {
    leftMenu: {
      template: '#left-menu-template'
    },
    mainContent: {
      template: '#main-content-template'
    },
    headerThing: {
      template: '<div class="header-thing"><div>one</div><div>two</div></div>'
    }
  }

});
html,
body {
  height: 100%;
}

#app {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'lm h'
    'lm mc'
  ;
  width: 100%;
  height: 100%;
}

.header-thing {
  background-color: #eef;
  grid-area: h;
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  padding: 0.7em;
  grid-gap: 1.4em;
}

.left-menu {
  background-color: #efe;
  grid-area: lm;
  padding: 0.7em;
}

.main-content {
  background-color: #fee;
  grid-area: mc;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
  grid-auto-rows: 1fr;
}

.content-item {
  background-color: white;
  border: thin solid black;
  border-radius: 0.2em;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 2em 3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <header-thing></header-thing>
  <left-menu></left-menu>
  <main-content></main-content>
</div>

<template id="left-menu-template">
  <nav class="left-menu">
    <div>First item</div>
    <div>Second item</div>
  </nav>
</template>

<template id="main-content-template">
  <div class="main-content">
    <div class="content-item">item</div>
    <div class="content-item">another</div>
    <div class="content-item">another</div>
    <div class="content-item">more</div>
    <div class="content-item">still more</div>
    <div class="content-item">another</div>
  </div>
</template>

15.02.2019
  • Вау Очень удивительно!!.. Большое спасибо 15.02.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..