vue의 장점과 단점은 무엇입니까? 왜 그것을 사용합니까?

장점과 단점은 간단하고 빠르며 강력하고 모듈 친화적이지만 IE8을 지원하지 않으며 검색 엔진에 적합하지 않아 SEO에 영향을 미칩니다. 사용 이유: Vue는 개발 비용을 절감하고 개발 효율성을 향상시킬 수 있는 도구입니다. 개발 중에 올바른 뷰와 데이터 규칙을 설정한 후 개발자가 지루한 DOM 작업에서 벗어날 수 있도록 도와줍니다. 뷰 콘텐츠는 그에 따라 변경되며 이를 수정하기 위해 DOM 요소를 수동으로 조작할 필요가 없습니다. 그리고 Vue의 컴포넌트화는 코드 재사용을 개선하고 대규모 프로젝트를 해체하는 데 매우 도움이 됩니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

Vue란 무엇인가요?

Vue(/vjuː/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한 JavaScript 프레임워크입니다. 이는 표준 HTML, CSS 및 JavaScript를 기반으로 구축되었으며 사용자 인터페이스를 효율적으로 개발하는 데 도움이 되는 선언적 구성 요소 기반 프로그래밍 모델을 제공합니다. 단순한 인터페이스든 복잡한 인터페이스든 Vue는 모든 것을 할 수 있습니다.

다음은 기본 예입니다.

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

결과 표시

위 예는 Vue의 두 가지 핵심 기능을 보여줍니다.

• 선언적 렌더링: Vue는 표준 HTML 템플릿 구문을 기반으로 제품군을 확장합니다. 최종 출력 HTML과 JavaScript 상태 간의 관계를 선언적으로 설명합니다.

• Responsiveness: Vue는 JavaScript 상태를 자동으로 추적하고 DOM이 변경될 때 이에 반응하여 업데이트합니다.

Vue.js의 장점과 단점

장점:

1. 간단함: 공식 문서는 Angular보다 매우 명확하고 배우기 쉽습니다.

2. 빠른: 비동기 일괄 처리로 DOM을 업데이트합니다.

3. 구성: 분리되고 재사용 가능한 구성 요소로 애플리케이션을 구성합니다.

4. 압축: 최대 18kb 최소 +gzip, 종속성 없음.

5. 강력함: 종속성을 선언하지 않고 표현식 및 계산된 속성을 사용할 수 있습니다.

6. 모듈 친화적: NPM, Bower 또는 Duo를 통해 설치할 수 있으며 모든 코드가 Angular의 다양한 규정을 따르도록 강요하지 않으며 사용 시나리오가 더 유연합니다.

단점:

• 은 IE8을 지원하지 않습니다.

  Vue.js는 IE8이 에뮬레이트할 수 없는 ECMAScript 5 기능을 사용하기 때문에 IE8 이하를 지원하지 않습니다. Vue.js는 모든 ECMAScript 5 호환 브라우저를 지원합니다.

• vue는 단일 페이지 페이지로, 검색 엔진에 적합하지 않고 SEO에 영향을 미치므로 회사 공식 웹사이트에 적합하지 않습니다. 예를 들어 두 Vue 경로(페이지)의 경로는 index.html#aaa 및 index.html#bbb와 같지만 검색 엔진에서는 둘 다 동일한 페이지인 index.html입니다. 이런 방식으로 검색 엔진은 귀하의 페이지를 포함할 수 없습니다.

Vue.js를 사용하는 이유

새로운 프레임워크와 라이브러리를 사용하는 것은 실제로 현재 개발에서 직면하는 문제를 해결하거나 개발 효율성을 향상시키기 위한 것입니다. 모든 사람의 비용은 시간이며, 좋은 도구는 프로젝트 관점에서 시간을 절약하는 데 도움이 되며 비용을 절감하는 데도 도움이 됩니다. Vue.js는 개발 비용을 절감하고 개발 효율성을 향상시킬 수 있는 도구입니다. 지루한 DOM 작업에서 벗어날 수 있도록 도와줍니다. 개발 중에 올바른 뷰와 데이터에 대한 규칙을 설정한 후에는 데이터 변경에만 주의하면 되며 DOM 요소를 수정하기 위해 수동으로 조작할 필요 없이 뷰의 콘텐츠가 그에 따라 변경됩니다. .

또한 프런트 엔드 개발 모델은 점차 구성 요소화로 전환하기 시작했으며 웹 구성 요소의 개념은 자체 독립적인 HTML 조각, JS 파일 및 CSS 스타일을 사용하여 점차 표준이 되었습니다. 비즈니스 코드를 사용할 때 자신에 대해 걱정해야 합니다. Vue.js는 또한 이 개념의 자체 구현을 구현했는데, 이는 코드 재사용을 개선하고 대규모 프로젝트를 해체하는 데 매우 유용합니다.

vue의 장점:

1. 컨트롤이 자동으로 데이터에 바인딩됩니다. 백그라운드로 양식을 제출하면 $("#id")를 사용하지 않고 데이터의 데이터 값을 직접 사용할 수 있습니다. 컨트롤의 값을 얻으려면 일련의 메소드를 사용하는 것이 훨씬 편리하고, 컨트롤에 값을 할당하는 것이 훨씬 편리합니다. 데이터의 값만 변경하면 컨트롤이 자동으로 변경됩니다. 가치. 복잡한 인터페이스 작업을 데이터 작업으로 변환합니다.

예를 들어 다음 코드 조각은 선택 컨트롤에서 목록의 동적 관리를 실현할 수 있습니다.

html 코드:

<el-select v-model="mType" style="flex: 1;">
　　<el-option v-for="(item,index) in enums" :label="item.label" :value="item.value" :key="index"></el-option>
</el-select>

js 코드:

data(){
    return{
　　　　mType:'',
　　　　enums:[{value:0,label:'未婚'},{value:1,label:'已婚'}]
　　}
}

선택 목록의 내용을 수정해야 하는 경우 더 이상 수정이 필요합니다. DOM에서 작업하려면 열거형의 값만 변경하면 됩니다. 컨트롤에서 선택한 값이 변경되면 데이터의 mType 필드에 자동으로 바인딩됩니다.

2. 페이지 값 전송 및 상태 관리

Vue에는 페이지 URL 매개변수를 사용하여 값을 전송하거나 vuex 전역 상태 관리 방법을 사용하여 페이지에 값을 전송하는 등 하위 구성요소 속성을 사용하여 값을 전송하는 등 페이지 값 전송을 위해 선택할 수 있는 다양한 방법이 있습니다. . 기본 개발에서 페이지에 여러 매개변수가 있는 경우 페이지 값 전송 및 초기화가 훨씬 더 복잡합니다. 반면에 Vue는 매개변수를 객체에 직접 저장하고 하위 구성 요소 또는 vuex의 속성에 대해 객체를 직접 저장합니다.

3. 모듈형 개발, 모듈형 업데이트

두 번째 요점에서 언급했듯이 실제로는 모듈형 개발로 확장될 수 있습니다. 예를 들어 목록 페이지에는 추가 기능과 수정 기능이 있습니다. 이때 하위 구성 요소의 내용이 업데이트되면 하위 구성 요소를 참조하여 주 구성 요소의 데이터를 수정할 수 있습니다. 데이터의 경우 메인 구성 요소를 동시에 수정해야 하지만 원본 목록 페이지의 페이지 번호와 검색 조건은 변경하고 싶지 않습니다. 이를 구현하기 위해 네이티브 개발을 사용한다면 이전 페이지의 검색 조건, 페이지 번호 등의 파라미터를 저장하기 위해 비즈니스 로직을 많이 작성해야 하는데, Vue로 개발한다면 매우 간단해집니다.

4. 코드 가독성

vue는 본질적으로 컴포넌트 개발이 가능하기 때문에 기본적으로 서로 다른 기능이 서로 다른 모듈에 작성되므로 코드의 가독성이 매우 높습니다. 초보자가 오래된 프로젝트를 맡게 되면 기본적으로 수정할 코드를 찾아 하루나 이틀 안에 수정할 수 있습니다.

5. 강력한 nodejs를 기반으로 기본 npm 명령으로 설치할 수 있는 새 구성 요소 라이브러리를 추가합니다. 예를 들어 axios 구성 요소를 사용해야 하는 경우 npm install axios를 사용하여 직접 설치할 수 있습니다. Axios 컴포넌트를 사용할 수 있습니다. Maven에 익숙한 학생이라면 npm 도구를 쉽게 이해할 수 있습니다.

6. 기본 라우팅, 하위 라우팅, 기본 페이지 및 하위 구성 요소 접근 방식을 사용하면 iframe을 완전히 버릴 수 있습니다. 프런트 엔드에 글을 써 본 학생들은 모두 iframe의 스크롤 막대와 하위 페이지와 다른 페이지 간의 상호 작용으로 인해 사용자 경험이 여전히 단일 페이지 아키텍처보다 훨씬 덜 친숙하다는 것을 알고 있습니다. 그리고 vue를 사용하면 시스템 메뉴, 네비게이션 등 고정 레이아웃을 구현하는 것이 매우 간단하고 편리합니다.

7. CSS 모듈화: 각 구성 요소는 동일한 스타일 이름을 사용할 수 있지만 스타일 속성은 다릅니다. 예를 들어, 구성 요소 A와 구성 요소 B의 버튼은 모두 class="btn"에 바인딩되어 있지만 두 구성 요소에서는 서로 영향을 주지 않고 두 개의 서로 다른 btn 스타일 속성을 구현할 수 있습니다.

관련 추천: vue.js 비디오 튜토리얼

위 내용은 vue의 장점과 단점은 무엇입니까? 왜 그것을 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!