집 > 기사 > 웹 프론트엔드 > Bootstrap 프로젝트에서 jQuery를 제거하는 방법

Bootstrap 프로젝트에서 jQuery를 제거하는 방법

小云云원래의: 2018-01-01 10:34:431804검색

Bootstrap은 인터넷에서 가장 인기 있는 프런트 엔드 개발 프레임워크입니다. 이 글은 부트스트랩 프로젝트에서 jQuery를 제거하는 방법을 공유할 것입니다. 필요한 친구들이 이를 참조하여 모두에게 도움이 되기를 바랍니다.

Bootstrap은 인터넷에서 가장 인기 있는 프런트 엔드 개발 프레임워크입니다. 이를 사용하는 것 외에 반응형 웹 사이트를 구축하는 다른 빠른 방법은 없습니다.

하지만 웹 페이지에 동적 기능을 추가하는 도구가 vue.js가 되었기 때문에. 부트스트랩에 적응하는 것이 어려워집니다. 여기에는 기술적인 수하물이 포함되어 있기 때문입니다. 좋아요. 나는 jquery에 대해 이야기하고 있습니다.

이것은 jquery에 대한 비판이 아닙니다. 프로젝트에서 이미 Vue와 같은 일부 프레임워크를 사용하고 있는 경우 jQuery를 도입하면 몇 가지 중요한 단점이 있다는 것을 깨달았습니다.

오버헤드 증가. jQuery는 웹 페이지를 30KB 늘립니다.

webpack과 같은 패키징 도구를 사용하는 경우 jquery도 구성하기 어렵습니다.

Vue를 사용하여 DOM 작업을 처리할 때 Jquery가 DOM을 다시 엉망으로 만드는 것을 원하지 않을 것입니다.

jQuery 및 Bootstrap javascript 플러그인을 완전히 제거

여기에는 Vue.js 내장 플러그인을 사용하여 Bootstrap의 Javascript 플러그인을 대체하는 훌륭한 프로젝트 vue-strap이 있습니다. 따라서 모달, 캐러셀, 탭 등과 같은 원래의 Bootstrap 플러그인을 프로젝트에서 사용할 수 있습니다. 이들은 모두 Vue를 기반으로 지원을 제공합니다.

그러나 Bootstrap 플러그인의 일부만 사용하는 경우- Vue를 직접 사용자 정의할 수 있다고 생각합니다. js 플러그인도 매우 쉽습니다. 그러면 전체 vue-strap을 참조할 필요가 없습니다. )

아래에서 보여드리겠습니다. vue 사용법과 일반적으로 사용되는 일부 부트스트랩 플러그인을 처음부터 설정해 보겠습니다.

vue.js로 구동되는 나만의 부트스트랩 위젯 만들기

Tab

시작하겠습니다. 탭으로. 각 탭에는 해당 패널이 수반됩니다. 탭의 표시/숨기기는 탭 및 패널의 클래스 속성에 활성 항목을 추가/제거하여 수행되며 이것이 Vue가 처리하는 것입니다.

<p id="tabs">
 <ul class="nav nav-tabs">
  <li><a>Tab 1</a></li>
  <li><a>Tab 2</a></li>
 </ul>
 <p class="tab-content">
  <p class="tab-pane">Pane 1</p>
  <p class="tab-pane">Pane 2</p>
 </p>
</p>

변수 탭을 사용하여 현재 선택된 탭을 추적하고 이 변수를 사용하여 탭과 해당 패널의 Class 속성에서 활성 항목을 추가/제거합니다.

<p id="tabs">
 <ul class="nav nav-tabs">
  <li v-bind:class="{ active: tab === 1}"><a>Tab 1</a></li>
  <li v-bind:class="{ active: tab === 2}"><a>Tab 2</a></li>
 </ul>
 <p class="tab-content">
  <p class="tab-pane" v-bind:class="{ active: tab === 1}">
   Pane 1</p>
  <p class="tab-pane" v-bind:class="{ active: tab === 2}">
   Pane 2</p>
 </p>
</p>

또한 Listen이 필요합니다. 모든 탭의 클릭 이벤트를 통해 탭 변수를 업데이트합니다

<p id="tabs">
 <ul class="nav nav-tabs">
  <li v-bind:class="{ active: tab === 1}" v-on:click="tab = 1">
   <a>Tab 1</a>
  </li>
  <li v-bind:class="{ active: tab === 2}" v-on:click="tab = 2">
   <a>Tab 2</a>
  </li>
 </ul>
 <p class="tab-content">
  <p class="tab-pane" v-bind:class="{ active: tab === 1}">
   Pane 1</p>
  <p class="tab-pane" v-bind:class="{ active: tab === 2}">
   Pane 2</p>
 </p>
</p>

마지막으로 js 코드는 다음과 같습니다.

new Vue({
 el: &#39;#tabs&#39;,
 data: { 
  // Tab 1 is selected by default
  tab: 1 
 }
});

몇 가지 개선과 최적화를 할 수 있지만 이 글을 간략하게 유지하기 위해 생략하겠습니다.

웹 사이트 전체에서 이 탭 코드를 재사용할 수 있도록 JavaScript 표현을 Vue 구성 요소로 래핑합니다.

정말 컴팩트한 템플릿입니다. 탭과 해당 패널 내용을 배열 속성에 넣은 다음 v-for를 사용하여 탭과 패널 목록을 인쇄합니다.

모달 상자

모달 대화 상자는 제가 가장 좋아하는 부트스트랩 플러그인 중 하나입니다. 탭과 마찬가지로 클래스에 추가/제거를 통해 모달 상자의 표시/숨기기를 제어합니다. 그리고 이는 열기 및 닫기 버튼에 의해 트리거됩니다.

<p id="app" v-bind:class=" { &#39;modal-open&#39;: show }">
 <button class="btn btn-primary" v-on:click="toggle">
  Open
 </button>
 <p class="modal" tabindex="-1" v-bind:class="{ in: show }"
  v-bind:style="modalStyle">
  <p class="modal-dialog">
   <p class="modal-content">
    <p class="modal-body">
     <p>Vue-powered modal!</p>
    </p>
   <p class="modal-footer">
    <button class="btn" v-on:click="toggle">Close</button>
   </p>
  </p>
 </p>
 </p>
</p>

Bootstrap 모달 상자의 경우 대화 상자에 동적 인라인 스타일이 필요합니다. 계산된 속성에서 "객체 스타일"을 수신하여 작동하는 v-bind:style 지시문을 통해 이를 수행합니다. 계산된 속성이 의존하는 변수가 변경될 때마다 자체적으로 다시 계산됩니다.

new Vue({
 el: &#39;#app&#39;,
 data: { 
  show: false 
 },
 methods: {
  toggle() { this.show = !this.show; }
 },
 computed: {
  modalStyle() {
   return this.show ? 
    { &#39;padding-left&#39;: &#39;0px;&#39;, display: &#39;block&#39; } : {};
  }
 }
});

모달 상자가 DOM 상자에 들어오고 나갈 때 Vue의 전환 애니메이션을 그라데이션으로 사용하여 모달을 향상시킬 수도 있습니다.

jQuery를 중단하고 다음 Bootstrap 프로젝트에서 Vue.js 사용을 고려하세요

Bootstrap에서 jquery 대신 vue.js를 사용할 수 있다고 말하는 것은 아니지만 실제로 사용해야 합니다. vue-strap을 사용하든 플러그인을 직접 패키징하든 Vue의 다음과 같은 매력적인 장점을 느낄 수 있기 때문입니다.

jQuery와 비교하여 vue의 DOM 운영 체제는 더 높은 UI 성능과 응답성을 허용합니다.

Vue는 작고 격리된 UI 블록을 구축하도록 설계되었습니다. 따라서 Vue로 작성된 위젯은 jquery보다 확장하기 쉽고 유지 관리성이 더 좋습니다.

Bootstrap 위젯에는 지저분한 템플릿이 많기로 악명 높으므로 Vue는 jsx, 단일 페이지 애플리케이션 구성 요소, 렌더링 기능, 클래스 및 스타일 바인딩 등과 같은 유연한 템플릿 옵션을 통해 이 문제를 완화할 수 있습니다.

Vue는 IE8을 지원하지 않지만 다음 부트스트랩 프로젝트에서는 Vue 사용을 고려할 수 있습니다.

Bootstrap 프로젝트에서 jQuery를 제거하는 방법

관련 기사