vue가 뭐야?

vue는 Vue.js의 약어이며 사용자 인터페이스를 만들기 위한 오픈 소스 JavaScript 프레임워크이자 단일 페이지 애플리케이션을 만들기 위한 웹 애플리케이션 프레임워크입니다. 또한 구성 요소 내의 특정 방법을 통해 데이터 업데이트를 쉽게 얻고 뷰 및 모델과 상호 작용할 수도 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.0, DELL G3 컴퓨터.

【추천 관련 기사: vue.js】

Vue.js(/vjuː/ 또는 간단히 Vue)는 사용자 인터페이스 생성을 위한 오픈 소스 JavaScript 프레임워크이자 단일 페이지 애플리케이션 생성을 위한 웹 애플리케이션입니다. .

Vue.js는 웹 개발을 더 잘 구성하고 단순화하도록 설계된 인기 있는 JavaScript 프런트 엔드 프레임워크입니다. Vue의 핵심 초점은 MVC 패턴의 뷰 레이어입니다. 동시에 데이터 업데이트를 쉽게 얻고 구성 요소 내의 특정 메서드를 통해 뷰와 모델 간의 상호 작용을 실현할 수도 있습니다.

Features

Components

Components는 Vue의 가장 강력한 기능 중 하나입니다. 대규모 애플리케이션을 더 잘 관리하려면 애플리케이션을 작고 독립적이며 재사용 가능한 구성 요소로 잘라야 하는 경우가 많습니다. Vue에서 구성 요소는 기본 HTML 요소의 확장이며 해당 데이터와 동작을 쉽게 사용자 정의할 수 있습니다. 아래 코드는 마우스 클릭 수를 계산하는 버튼으로 렌더링된 Vue 구성 요소의 예입니다.

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: &#39;<button v-on:click="count++">You clicked me {{ count }} times.</button>&#39;
})

Templates

Vue는 HTML 기반 템플릿 구문을 사용하므로 개발자는 DOM 요소를 기본 Vue 인스턴스의 데이터에 바인딩할 수 있습니다. 모든 Vue 템플릿은 합법적인 HTML이므로 사양을 따르는 브라우저와 HTML 파서로 구문 분석할 수 있습니다. 기본 구현에서 Vue는 템플릿을 가상 DOM 렌더링 기능으로 컴파일합니다. 반응형 시스템과 결합된 Vue는 구성 요소를 다시 렌더링하는 데 드는 최소 비용을 지능적으로 계산하고 애플리케이션 상태가 변경될 때 이를 DOM 작업에 적용할 수 있습니다. [12]

또한 Vue를 사용하면 개발자가 JSX 언어를 구성 요소의 렌더링 기능으로 직접 사용하여 템플릿 구문을 대체할 수 있습니다. [13] 다음은 클릭 수를 계산할 수 있는 버튼의 JSX 렌더링 버전입니다(해당 Babel 프로세서 구성 필요).

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  render: function (h) {
    return (<button vOn:click={this.onclick}>Clicked {this.count} times</button>)
  },
  methods: {
    "onclick": function() {
      this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
});

반응형 디자인

반응형은 MVC 모델의 뷰가 변경됨을 의미합니다. 모델이 바뀌면서. Vue에서 개발자는 뷰를 해당 모델에 바인딩하기만 하면 Vue는 자동으로 모델의 변경 사항을 관찰하고 뷰를 다시 그릴 수 있습니다. 이 기능은 Vue의 상태 관리를 매우 간단하고 직관적으로 만듭니다.

전환 효과

Vue는 DOM을 삽입, 업데이트 또는 제거할 때 전환 효과를 적용하는 다양한 방법을 제공합니다. 다음 도구가 포함되어 있습니다.

• CSS 전환 및 애니메이션에 자동으로 클래스 적용

• Animate.css와 같은 타사 CSS 애니메이션 라이브러리와 함께 사용할 수 있습니다.

• 전환 후크 기능에서 JavaScript를 사용하여 직접 DOM 조작

• Velocity.js와 같은 타사 JavaScript 애니메이션 라이브러리와 함께 사용할 수 있습니다

단일 파일 구성 요소

복잡한 프로젝트에 더 잘 적응하기 위해 Vue는 .vue 파일을 지원합니다. 완전한 구성 요소를 정의하기 위한 확장으로, Vue.comComponent를 사용하여 구성 요소를 등록하는 대신 사용할 수 있습니다. 개발자는 Webpack 또는 Browserify와 같은 빌드 도구를 사용하여 단일 파일 구성 요소를 패키징할 수 있습니다.

핵심 플러그인

vue-router
vuex
vue-loader
vueify 
vue-cli

위 내용은 vue가 뭐야?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!