"jQuery에서 하는 일은 서버 쪽에서 아무것도 바꾸지 말고 앞쪽을 Vuejs로 설정하세요."

서버의 올바른 렌더링을 바꾸고 싶지 않습니다.근데 프론트 데스크는 바꿔야 돼.그런 요구가 있었죠?
예?없다있죠.
컨텐트의 컨텐트는 가변적이어서 SS로 렌더링하려고 했지만 API가 FE 측에서 얻은 컨텐트도 만들지 않았다.또한 렌더링된 HTML에는 Vue의 바인딩 및 조건식을 쓸 수 없습니다.나는 그런 상황을 구상할 것이다.

아코디언

닫기

열다
나는 이런 인상의 물건을 만들고 싶다.
먼저 서버에서 HTML을 렌더링합니다.

코드

html

<div id="accordion--wrapper">
  <div id="accordion--component" class="accordion">
    <h2 class="accordion--title">アコーディオンメニュー<i class="icon"></i></h2>
    <ul class="accordion--body">
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
      <li>メニュー4</li>
    </ul>
  </div>
</div>

그럼 Vue 구성 요소를 만들어 보세요.

Vue 구성 요소

<script>
export default {
  data() {
    return {
      isOpen: false,
    };
  },
  mounted() {
    this.$el.querySelector('.accordion--title').addEventListener('click', this.clicked);
  },
  methods: {
    clicked() {
      this.isOpen = !this.isOpen;
    },
  },
  watch: {
    isOpen(isOpen) {
      const accordion = this.$el;
      if (isOpen) {
        accordion.classList.add('open');
      } else {
        accordion.classList.remove('open');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.accordion {
  & .accordion--title {
    cursor: pointer;
    display: block;
    padding: 15px 15px 15px 42px;
    margin-bottom: 0;
    border: 1px solid #CCC;

    & i.icon {
      margin-left: 20px;
      &:before {
        content: "+";
      }
    }

  }
  & .accordion--body {
    padding: 0;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    overflow: auto;
    transition: all .2s ease-in;
    list-style: none;
    & li {
      border-bottom: 1px solid #CCC;
      border-left: 1px solid #CCC;
      border-right: 1px solid #CCC;
    }
  }
  &.open {
    & .accordion--title {
      & i.icon {
        &:before{
          content: "-";
        }
      }
    }
    & .accordion--body {
      visibility: visible;
      opacity: 1;
      transition: all .8s ease-in;
    }
  }
}
</style>

이번에는 템플릿 제한이 없어 없는 단일 부품을 만들었다.css/scss는 견습 중이어서 난잡합니다.

css에 대한 추기

아코디언의 풍격은 모두 구성 요소에 쓰여 있지만 외관을 결정하는 기술 기술은 화면에서 읽는 css에 쓰여 있다. 여기에는 개폐 등 논리와 관련된 것만 기술해야 한다.
추기는 여기까지.
이 구성 요소에서 베오로 생명을 〃에 주입합니다.

엔트리 포인트 JavaScript

import Accordion from './components/Accordion.vue';

const ready = (fn) => {
  if (
    document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading'
  ) {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
};

ready(() => {
  Accordion.template = '#accordion--wrapper';
  new Vue({
    el: '#accordion--component',
    render: h => h(Accordion),
  });
});

<template> 여기 Accordion.template = '#accordion--wrapper' 요소의 안쪽을Accordion 구성 요소의 템플릿으로 주입합니다.id="accordion-wrapper"할 때new Vue,지정된 요소를 구성 요소로 바꾸기 때문에template와el이 지정한 id가 부자가 되는 것을 주의해야 한다(template:부모,el:자).

장점

또 서버측이 재현된 HTML을 전제로 구현되기 때문에 논리와 외관을 분리할 수 없는 점도 아쉽고, 평소 Vue의 단일 구성 요소에서 사용하지 않고el: '#accordion--component'와querySelector를 넣는다.
다만, 컨디션 관리와 $el 등 뷰 기능을 활용할 수 있어 단순히 ES6로 쓰는 것보다 읽기가 더 좋지 않겠나.
또 사업 일부가 이미 뷰를 도입했지만, SS 렌더링의 편리함으로 뷰화를 하기 어려운 곳에도 적용할 수 있어 틀을 통일하는 장점도 크다.

총결산

제목이 좀 어수선하지만 다양한 제약 속에서 뷰를 사용하지 않기 위해 프런트엔드 코드가 일관되지 않는 상황을 개선하자는 내용을 썼다.
이렇게 되면 지금까지 jQuery에서 실시된 프로젝트도 서버에서 몰래 Vue로 바꿀 수 있을지도 모른다.

염려하다

한번 재현된 것을 교체해야 하기 때문에 SEO 평가에 영향을 줄 수 있다.이 일대는 천천히 조사하고 싶습니다.