vue.js 2.0 프레임 워크와 함께 일어나서 달리기

처음부터 vue.js를 배우고 싶습니까? Sitepoint Premium은 기본, 프로젝트, 팁 및 도구 등을 다루는 Vue 책을 완전히 제공합니다. 한 달에 $ 14.99에 가입하십시오.

이 기사는 업데이트되었으며 주로 도구 섹션을 업데이트했습니다. v2의 인기있는 JavaScript 프레임 워크 vue.js 버전이 출시 된 이후, 나는 그것을 시도하고 그것이 어떻게 느끼는지 기다릴 수 없습니다. Angular and React에 매우 익숙한 사람으로서, 나는 그들과 Vue 사이의 유사점과 차이점을보기를 기대합니다.

VUE 2는 우수한 성능 메트릭, 비교적 작은 부하 (번들 링 런 타임 버전의 무게가 약 30kB이며 GZIP 압축 후 약 30KB) 및 Vue-Router 및 Vuex, VUE 라이브러리와 같은 지원 라이브러리의 상태 관리를 가지고 있습니다. 하나의 기사로 모든 ​​것을 다루는 것은 너무 많지만 후속 기사에주의를 기울이면 핵심 프레임 워크와 완벽하게 통합 된 다양한 라이브러리를보다 신중하게 살펴 보겠습니다.

키 포인트

vue.js 2.0은 효율적인 렌더링을 위해 React-Inspired Virtual DOM을 소개하고 Vue-Router 및 Vuex와 같은 개선 된 라이브러리를 State Management를 통합합니다.

구성 요소는 vue.js 2.0의 기초이며, 여기서 응용 프로그램은 일련의 중첩 구성 요소에 내장되어 있으며 단일 파일 구성 요소 (.Vue)가 권장되어 코드를 더 잘 구성 할 수 있습니다.

vue 프로젝트를 처음부터 시작하려면 Webpack 및 Vue-Loader가 .Vue 파일을 처리하고 Babel은 현대식 JavaScript 기능을 사용하여 개발 워크 플로우를 향상시켜야합니다.

vue devtools는 디버깅에 필수적이며, 이는 응용 프로그램 상태와 구성 요소를 통한 데이터 흐름에 대한 통찰력을 제공합니다.

vue.js 2.0은 양방향 데이터 바인딩을 위해 V- 모델을 활용하고 사용자 정의 이벤트 처리에 V-ON을 사용하여 인터랙티브 형태의 구성을 용이하게하여 상태 관리가 구성 요소간에 매끄럽게 만듭니다.

이 기사에서는 VUE의 반응 시스템 및 수명주기 후크를 사용하여 데이터를 효과적으로 관리하고 표시하는 GitHub 사용자 통계 획득 애플리케이션을 구축하고 실제 시나리오에서 VUE.JS의 실제 사용을 보여줍니다.

다른 라이브러리에서 영감을 이 튜토리얼을 배우면 VUE에는 다른 프레임 워크에서 영감을 얻은 많은 기능이 있음을 알 수 있습니다. 이것은 좋은 일입니다. 새로운 프레임 워크가 다른 도서관의 아이디어를 이끌어 내고 개선하는 것을 보는 것이 좋습니다. 특히 VUE의 템플릿이 Angular의 템플릿에 매우 가깝지만 구성 요소 및 구성 요소 수명주기 접근 방식은 React (및 Angular)에 더 가깝습니다. 그러한 예는 오늘날의 JavaScript 필드의 React 및 거의 모든 프레임 워크와 마찬가지로 Vue가 Virtual DOM의 개념을 사용하여 렌더링 효율성을 유지한다는 것입니다. Vue는 가장 인기있는 가상 DOM 라이브러리 중 하나 인 Snabbdom의 지점을 사용합니다. VUE 웹 사이트에는 가상 DOM 렌더링에 대한 문서가 포함되어 있지만 사용자로서 VUE는 렌더링 속도를 유지하는 데 매우 능숙하다는 것을 알아야합니다 (실제로는 React보다 더 잘 수행됩니다). 신뢰할 수있는 플랫폼이 구축되고 있습니다.

구성 요소, 구성 요소, 구성 요소

오늘날 다른 프레임 워크와 마찬가지로 Vue의 핵심 빌딩 블록은 구성 요소입니다. 응용 프로그램은 최종 응용 프로그램을 생성하기 위해 서로 구축 된 일련의 구성 요소 여야합니다. vue.js는 한 단계 더 나아가서 .Vue 파일의 구성 요소를 정의한 다음 (짧은 시간에 커버 할 빌드 도구)가 해당 파일을 구문 분석 할 수 있음을 제안합니다 (필수는 아니지만). 이 기사의 목적은 VUE와 그 사용법을 완전히 탐색하는 것이기 때문에이 응용 프로그램 에이 컨벤션을 사용할 것입니다.

vue 파일은 다음과 같습니다

또는 구성 요소의 모든 부분을 단일 파일에 넣기를 원하지 않으면 각 요소에 각각 SRC 속성을 제공하고 각각 별도의 HTML, JS 또는 CSS 파일을 가리킬 수 있습니다.

설정 프로젝트 우수한 Vue CLI를 사용하면 전체 프로젝트를 쉽게 설정할 수 있지만 새 라이브러리로 시작할 때 처음부터 시작하여 이러한 도구에 대해 더 많이 배울 수 있습니다.

이제 WebPack은 선호하는 빌드 도구입니다. Vue-Loader 플러그인과 함께 사용할 수있는 vue.js 구성 요소 형식을 지원할 수 있습니다. 또한 Babel 및 Env 사전 설정이 필요하므로 Filed JavaScript 구문과 파일 변경이 감지 될 때 브라우저를 업데이트하는 WebPack-Dev-Server를 사용하여 모든 코드를 작성할 수 있습니다.

프로젝트를 초기화하고 종속성을 설치합시다 :

그런 다음 초기 폴더와 파일을 만듭니다

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

프로젝트 구조는 다음과 같아야합니다

지금 웹 팩 구성을 설정하겠습니다. 이것은 다음과 같은 점으로 귀결됩니다 :

는 WebPack에게 .Vue 파일에 vue-loader 를 사용하도록 지시하십시오 Webpack에게 .js 파일 는 WebPack에게 src/index.html을 템플릿으로 사용하여 Dev-Server를 위해 HTML 파일을 생성하여 서비스를 제공하도록 지시합니다.

마지막으로, 우리는 HTML 파일에 콘텐츠를 추가하고 시작할 수 있습니다!

우리는 앱의 ID로 빈 DIV를 만들었습니다. 이것이 VUE 앱을 배치 할 요소이기 때문입니다. 나는 항상 신체 요소보다는 div를 사용하는 것을 선호합니다. 이것은 나머지 페이지를 제어 할 수 있기 때문입니다.

첫 번째 vue.js 응용 프로그램 우리는 이전의 모든 프로그래밍 튜토리얼에 충실하고 VUE 응용 프로그램을 작성하고 "Hello, World!"

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

각 vue 응용 프로그램은 라이브러리를 가져온 다음 새 Vue 인스턴스를 인스턴스화하여 생성됩니다.

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

우리는 VUE를 페이지에 렌더링 할 요소를 제공하므로 VUE 응용 프로그램을 만듭니다! VUE가 응용 프로그램으로 바꾸려는 요소를 선택하기 위해 선택기를 전달합니다. 이것은 VUE가 실행되면 우리가 만든 Div#앱을 가져 와서 응용 프로그램으로 바꿀 것임을 의미합니다.

변수 이름 vm을 사용하는 이유는 "보기 모델"을 나타 내기 때문입니다. MVVM (Model View Model Model) 패턴과 엄격하게 연관되어 있지는 않지만 VUE는 부분적으로 영감을 받았으며 VUE 응용 프로그램을 나타내는 변수 이름 VM을 사용하는 컨벤션은 오늘날까지 사용되었습니다. 물론, 당신은 원하는대로 변수를 지정할 수 있습니다!

지금까지 우리의 앱은 아무것도하지 않으므로 첫 번째 구성 요소 인 app.vue를 만들어 실제로 페이지에 무언가를 렌더링합니다.

vue는 응용 프로그램의 구조를 지정하지 않으므로 귀하에게 달려 있습니다. 각 구성 요소에 대한 폴더를 만들었습니다.이 경우 앱 (캐피탈 레터를 좋아합니다. 이는 구성 요소를 의미합니다).

index.vue script.js style.css

파일 구조는 이제 다음과 같아야합니다

<..> app/index.vue 템플릿을 정의하고 다른 파일을 가져옵니다. 이것은 VUE 문서의 "우려 분리에 관한"섹션에 권장되는 구조에 적합합니다.

• 나는 INDEX.VUE의 이름을 지정하고 싶지만 쉽게 검색 할 수 있도록 App.Vue의 이름을 지정할 수도 있습니다. App/App.Vue 대신 내 코드에서 App/Index.vue를 가져 오는 것을 선호하지만 다시 동의하지 않을 수도 있으므로 귀하와 귀하의 팀을 가장 좋아하는 이름을 자유롭게 선택하십시오.
현재, 우리의 템플릿은
• 입니다 안녕하세요, 세상! , 나는 CSS 파일을 비워 두었다. 주요 작업은 Script.js에서 수행됩니다.
그렇게하는 것은 앱으로 이름을 지정할 구성 요소를 만듭니다. 앱은 주로 디버깅 목적으로 나중에 다룰 것입니다. 그런 다음 구성 요소가 소유하고 책임이있는 데이터를 정의합니다. 현재 우리는 데이터가 없으므로 빈 개체를 반환하여 Vue에게 알 수 있습니다. 나중에 데이터를 사용하는 구성 요소의 예가 표시됩니다.
• 이제 우리는 src/index.js로 돌아가서 vue 인스턴스에 앱 구성 요소를 렌더링하도록 알릴 수 있습니다.
먼저, 우리는 구성 요소를 가져오고 웹팩과 vue-loader가 그것을 파싱 할 책임이 있다고 생각합니다. 그런 다음 구성 요소를 선언합니다. 이것은 중요한 단계입니다. 기본적으로 VUE 구성 요소는 전 세계적으로 사용할 수 없습니다. 각 구성 요소에는 사용할 모든 구성 요소 목록과 매핑되는 태그가 있어야합니다. 이 경우, 우리는 다음과 같이 구성 요소를 등록하기 때문에 다음과 같이합니다.

이것은 템플릿에서 앱 요소를 사용하여 구성 요소를 참조 할 수 있음을 의미합니다.

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

마지막으로 렌더링 함수를 정의합니다. 이 기능은 요소를 생성 할 수있는 도우미 (일반적으로 H라고 함)를 사용합니다. React에서 사용하는 React.createElement 함수와 그다지 유사하지 않습니다. 이 경우 렌더링중인 구성 요소가 태그 앱이있는 것으로 등록되기 때문에 문자열 '앱'을 제공합니다.

대부분의 경우 (그리고이 자습서의 나머지 부분에서) HTML 템플릿을 정의하기 때문에 다른 구성 요소의 렌더 기능을 사용하지 않습니다. 그러나 더 많은 것을 배우려면 렌더링 함수에 대한 vue.js 가이드를 읽을 가치가 있습니다.

마지막 단계는 Package.json에서 NPM 스크립트를 만드는 것입니다.

이제 NPM 실행 시작을 실행하십시오. 기본 브라우저는

https://www.php.cn/link/03b0db8c971432a5e8d1638976a7cc src/index.vue 편집을 시도하여 메시지를 다른 것으로 변경하십시오. 모든 것이 잘 진행되면 Webpack-Dev-Server가 페이지를 새로 고쳐서 변경 사항을 반영해야합니다.

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

대단해! 우리는 vue.js를 사용하여 실행 중입니다.

vue devtools 우리가 약간 더 복잡한 VUE 응용 프로그램을 파헤 치기 전에 Vue DevTools를 확실히 설치해야한다고 언급 할 때입니다. 이들은 Chrome 개발자 도구에 위치하고있어 애플리케이션 및 모든 전달 된 속성, 각 구성 요소가 보유한 상태 등을 볼 수있는 좋은 방법을 제공합니다.

응용 프로그램을 구축하십시오 샘플 애플리케이션으로서 GitHub API를 사용하여 응용 프로그램을 작성하고 사용자 이름을 입력하고 해당 사용자의 GitHub 통계를 보자. 나는 대부분의 사람들에게 친숙하고 인증없이 사용할 수 있으며 많은 정보를 제공하기 때문에 여기에서 Github API를 선택했습니다.

응용 프로그램을 시작하기 전에 필요한 구성 요소에 대해 신속하게 생각하고 싶습니다. 앱 구성 요소는 다른 두 구성 요소 인 Githubinput을 렌더링 할 것이라고 생각합니다. Githubinput은 사용자로부터 입력을 수신하는 데 사용됩니다. 화면 정보. 우리는 입력부터 시작합니다.

참고 : GitHub에서 모든 코드를 찾을 수 있으며 온라인에서 실행되는 응용 프로그램을 볼 수도 있습니다.

초기 설정 SRC 디렉토리에서 githuboutput 및 githubinput 구성 요소 용 폴더 생성 :

각 폴더에 필요한 파일을 추가하십시오

src 폴더의 구조는 이제 다음과 같습니다.

vue.js에서 형태 Githubinput 구성 요소부터 시작하겠습니다. 앱 구성 요소와 마찬가지로 index.Vue 파일에는로드 스크립트 및 CSS 파일뿐만 아니라 템플릿이 포함되어야합니다. 현재 템플릿에는

만 포함됩니다 github 입력

. 곧 올바르게 작성하겠습니다. 새로운 구성 요소를 만들 때 템플릿이 올바르게 연결되어 있는지 확인할 수 있도록 가상 HTML을 넣고 싶습니다.

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

이 구성 요소를 만들 때 다르게하는 일은 구성 요소와 관련된 데이터 스 니펫을 만드는 것입니다. 이것은 React의 상태 개념과 매우 유사합니다.

이것은이 구성 요소에 소유하고 책임이있는 데이터가 있다는 것을 의미합니다. 우리는 곧 사용자 입력을 기반으로 업데이트 할 것입니다.

마지막으로,이 구성 요소를 화면에 넣으려면 앱 구성 요소가 렌더링되므로 앱 구성 요소에 등록해야합니다.

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

이를 위해 Src/App/Script.js를 업데이트하고 githubinput을 알려줍니다.

그런 다음 앱 구성 요소의 템플릿을 업데이트 할 수 있습니다.

vue 구성 요소의 한 가지 제한 (각도 및 반응에서는) 각 구성 요소가 루트 노드가 있어야한다는 것입니다. 일반적인 것은 div입니다.

트랙 형식 입력 우리의 githubinput 구성 요소는 두 가지를 수행해야합니다

입력의 현재 값 추적 는 다른 구성 요소가 결과적으로 자신의 상태를 알고 업데이트 할 수 있도록 값이 변경되었음을 전달합니다.

입력 요소가 포함 된 양식을 작성하여 첫 번째 버전을 완성 할 수 있습니다. VUE의 내장 지시문을 사용하여 양식 값을 추적 할 수 있습니다. Githubinput의 템플릿은 다음과 같습니다

mkdir src
touch webpack.config.js src/index.html src/index.js

당신은 두 가지 중요한 속성이라는 것을 알게 될 것입니다 : V-on과 v-model.

v-on은 우리가 VUE의 DOM 이벤트에 바인딩하고 호출 함수를 바인딩하는 방법입니다. 예를 들어,

나를 클릭하십시오! 단락을 클릭 할 때마다 구성 요소의 foo 메소드가 호출됩니다. 이벤트 처리에 대해 자세히 알아 보려면 이벤트 처리에 대한 Vue의 문서를 적극 권장합니다. V- 모델은 양식 입력과 데이터 사이에 양방향 데이터 바인딩을 만듭니다. 무대 뒤에서 V-Model은 실제로 VUE 구성 요소의 양식 입력 및 데이터 업데이트에 대한 변경 이벤트를 듣고 있습니다.

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

위의 템플릿을 고려할 때 V-ON 및 V- 모델을 사용하여 데이터를 양식으로 처리하는 방법은 다음과 같습니다.

v-on : 제출 .prevent = "onsubmit"은 onsubmit을 형성하기 위해 메소드를 바인딩 할 때 onsubmit을 실행합니다. .prevent를 추가함으로써 VUE는 기본 조치가 자동으로 발생하는 것을 방지합니다. (VUE 가이 작업을 수행하지 않으면 코드에서 event.preventDefault ()를 호출 할 수 있지만 VUE의 기능을 활용할 수도 있습니다.) v-model : 사용자 이름 입력 된 값을 코드의 값 사용자 이름에 바인딩합니다. Angular에 익숙한 사람들에게는 이것이 NG 모델과 매우 유사하다는 것을 알 수 있습니다. githubinput을 만들 때 우리는 데이터를 입력 필드에 바인딩하는 데이터 사용자 이름이 있다고 선언합니다. 둘 다 자동으로 동기화됩니다.

이제 구성 요소의 JavaScript로 돌아가서 OnSubmit 메소드를 선언 할 수 있습니다. 여기의 이름은 완전히 임의적입니다 - 당신은 마음대로 모든 이름을 선택할 수 있습니다. 그러나 나는 이벤트를 유발할 이벤트에 따라 이름이 지정된 기능을 사용하는 협약을 고수하고 싶습니다 : .

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

우리는 이것에 대한 데이터를 직접 참조 할 수 있으므로 this.username은 텍스트 상자의 최신 값을 제공합니다. 비어 있지 않으면 다른 구성 요소가 데이터가 변경되었음을 알기를 원합니다. 이렇게하려면 메시지 버스를 사용합니다. 이들은 구성 요소가 이벤트를 발행하고 다른 이벤트를들을 수있는 객체입니다. 응용 프로그램이 커지면 Vuex와 같은보다 체계적인 접근 방식을 고려할 수 있습니다. 현재 메시지 버스가이를 수행 할 수 있습니다.

좋은 소식은 빈 VUE 인스턴스를 메시지 버스로 사용할 수 있다는 것입니다. 이렇게하려면 SRC/Bus.js를 생성하여 VUE 인스턴스를 생성하고 내보내는 것입니다.

githubinput 구성 요소에서 사용자 이름이 변경 될 때 이벤트를 발행하여 모듈을 가져 와서 사용할 수 있습니다.

이런 식으로, 우리의 양식이 완료되고 생성 된 데이터로 무언가를 시작할 수 있습니다.

github

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

의 결과를 보여줍니다 githuboutput 구성 요소는 다른 두 구성 요소와 동일한 구조를 갖습니다. githuboutput/script.js에서는 사용자 이름이 언제 변경 될지 알아야하므로 버스 모듈도 가져옵니다. 이 구성 요소가 담당하는 데이터는 GitHub API에서 얻은 데이터에 GitHub 사용자 이름을 매핑하는 객체입니다. 이것은 우리가 데이터를 이전에 가져온 경우 매번 API에 요청할 필요가 없다는 것을 의미합니다. 또한 화면에 어떤 데이터가 표시되는지 알 수 있도록 마지막으로받은 사용자 이름을 저장합니다.

구성 요소를 만들 때 메시지 버스에서 방출 된 새로운 사용자 이름 이벤트를 듣고 싶습니다. 고맙게도 Vue는 생성을 포함하여 많은 수명주기 후크를 지원합니다. 우리는 책임있는 개발자이기 때문에 구성 요소 파괴 일 때 파괴 된 이벤트를 사용하여 이벤트 듣기를 중단 할 것입니다.

그런 다음 그런 다음 onusernamechange 메소드를 정의하고 Currentusername 속성을 설정하고 설정합니다.

mkdir src
touch webpack.config.js src/index.html src/index.js

우리는 OnuserNameChange 메소드를 현재 범위에 명시 적으로 바인딩 할 필요가 없습니다. VUE 구성 요소에서 메소드를 정의하면 VUE는 자동으로 MyMethod.bind (this)를 호출하므로 항상 구성 요소에 바인딩됩니다. 이것이 VUE가 그것들을 완전히 이해하고 그에 따라 설정할 수 있도록 메서드 객체에서 구성 요소에 대한 메소드를 정의 해야하는 이유 중 하나입니다.

조건부 렌더링

사용자 이름이 없으면 구성 요소가 처음 작성되었을 때 사용되지 않습니다. 사용자에게 메시지를 표시하고 싶습니다. VUE에는 많은 조건부 렌더링 기술이 있지만 가장 간단한 것은 V-IF 지침으로 조건을 받아들이고 조건이 존재하는 경우에만 요소를 렌더링합니다. 또한 v-else : 에서도 작동합니다

다시, 이것은 모든 각도 개발자에게 매우 친숙합니다. 우리는 여기에서 트리플 부호 대신 더블 부호를 사용합니다. currentusername이 null 일 때뿐만 아니라 currentusername이 정의되지 않았고 null == 정의되지 않은 경우 조건이 사실이되기를 원하기 때문입니다.

github

에서 데이터를 가져옵니다 vue.js에는 자체 HTTP 라이브러리가 제공되지 않으므로 그럴만 한 이유가 있습니다. 오늘날 Fetch API는 기본적으로 많은 브라우저에 포함되어 있습니다 (IE11, Safari 또는 iOS Safari를 제외하고는 글을 쓰는 시점에도). 이 튜토리얼을 위해 PolyFill을 사용하지 않지만 필요한 경우 브라우저에서 API에 PolyFill을 쉽게 추가 할 수 있습니다. Fetch API가 마음에 들지 않으면 HTTP를위한 많은 타사 라이브러리가 있으며 VUE 문서에 언급 된 것은 Axios입니다.

나는 HTTP 라이브러리를 포함하지 않는 VUE와 같은 프레임 워크를 매우지지하고 있습니다. 프레임 워크의 번들 크기를 줄이고 개발자가 가장 적합한 라이브러리를 선택하고 API와 통신하는 데 필요한 요청을 쉽게 사용자 정의 할 수 있습니다. 이 기사에서 Fetch API를 고수하겠습니다. 그러나 원하는 라이브러리로 자유롭게 바꿀 수 있습니다.

페치 API에 대해 알아야 할 경우 itepoint에서 Ludovico Fischer의 게시물을 확인하면 신속하게 시작할 수 있습니다.

http 요청을하기 위해 다른 방법 FetchgithubData를 제공하여 GitHub API에 요청하고 결과를 저장합니다. 또한 먼저이 사용자에 대한 데이터가 있는지 확인하고 그렇지 않은 경우 요청이 없습니다.

그런 다음 사용자 이름이 변경되면이 메소드를 트리거해야합니다.

주목해야 할 것은 Vue가 사용중인 데이터를 추적하기 때문에보기를 업데이트 할시기를 알고 있다는 것입니다. 자세히 설명하는 훌륭한 반응 가이드가 있지만, 객체에서 속성을 추가하거나 제거했을 때 본질적으로 Vue는 마술처럼 알 수 없습니다.

vue는 이것을 인식하지 못하고 우리의 견해를 업데이트하지 않습니다. 대신, 우리는 vue에게 키를 추가했다고 명시 적으로 알려주는 특수 vue.set 메소드를 사용할 수 있습니다. 위의 코드는 다음과 같습니다.

이 코드는 this.githubdata를 수정하여 우리가 전달하는 키와 값을 추가합니다. 또한 변경 사항을 알 수 있도록 변경 사항을 알립니다.

이제 우리의 코드는 다음과 같습니다

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

마지막으로 앱 구성 요소를 사용하여 githuboutput 구성 요소를 등록해야합니다.

템플릿에 포함 시키십시오 :

화면에 검색된 데이터를 표시하기 위해 뷰 코드를 작성하지 않았지만 사용자 이름으로 양식을 작성한 다음 Vue DevTools를 확인하여 GitHub에서 요청한 데이터를 볼 수 있어야합니다. 이것은 이러한 DevTools가 얼마나 실용적이고 강력한지를 보여줍니다.

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

view 에 일부 통계가 표시됩니다 이제 템플릿을 업데이트하여 일부 데이터를 표시 할 수 있습니다. 요청이 완료된 후에 만 ​​데이터를 렌더링 할 수 있도록이 코드를 다른 V-IF 지시문으로 래핑하겠습니다.

이 방법으로, 이제 Github 세부 사항을 화면에 렌더링 할 수 있으며 응용 프로그램이 완료되었습니다!

refactor

우리는 분명히 약간의 개선을 할 수 있습니다. 위의 GitHub 데이터를 렌더링하는 HTML 코드는 현재 사용자의 데이터의 작은 부분 만 필요합니다. 이것은 다른 구성 요소의 완벽한 사례입니다. 사용자 데이터를 제공 할 수 있으며이를 렌더링 할 수 있습니다.

다른 구성 요소와 동일한 구조를 가진 githubuserData 구성 요소를 만들어 봅시다.

이 구성 요소에는 하나의 작은 차이 만 있습니다. 속성 데이터가 나타납니다. 이는 사용자 데이터가 될 것입니다. 속성 (또는 "props")은 구성 요소가 부모 구성 요소를 통과시키는 데이터의 비트이며, VUE에서 반응하기 위해 매우 유사하게 행동합니다. Vue에서는 구성 요소가 필요한 모든 속성을 명시 적으로 선언해야하므로 여기서는 구성 요소가 속성 데이터를 얻을 것이라고 말할 것입니다.

내가 VUE에 대해 정말로 좋아하는 것은 구성 요소가 사용할 모든 속성, 데이터 및 구성 요소가 명확하게 선언되어야한다는 것입니다. 이로 인해 코드를보다 쉽게 ​​사용할 수 있으며 프로젝트가 점점 커지면 유지하기가 더 쉽다고 생각합니다.

새 템플릿에서는 Githubdata [currentusername] 대신 데이터를 참조 할 수 있지만 이전과 동일한 HTML을 가지고 있습니다.

이 구성 요소를 사용하려면 githuboutput 구성 요소를 업데이트해야합니다. 먼저 GithubuserData를 가져오고 등록합니다

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

구성 요소를 선언 할 때 이름을 사용할 수 있으므로 GitHub-User-Data를 넣을 때 원하는 이름을 배치 할 수 있습니다. 대시를 포함하는 구성 요소를 고수하는 것이 좋습니다. Vue는 이것을 시행하지는 않지만 사용자 지정 요소에 대한 W3C 사양은 미래 버전의 HTML에 추가 된 요소와 Lifename 충돌을 방지하기 위해 대시를 포함해야한다고 명시합니다.

구성 요소를 선언 한 후 템플릿에서 사용할 수 있습니다.

여기서 중요한 점은 데이터 속성을 구성 요소로 전달하는 방법입니다.

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

이 속성의 시작 부분에있는 콜론은 우리가 전달하는 속성이 동적이며 데이터가 변경 될 때마다 구성 요소를 업데이트해야한다고 Vue에게 알려줍니다. VUE는 GithubData [CurrentUserName]의 값을 평가하고 데이터가 변경됨에 따라 GithubuserData 구성 요소가 최신 상태인지 확인합니다.

<:> 찾은 경우 : 데이터가 약간 짧고 마술처럼, 더 긴 V- 바인드 구문을 사용할 수도 있습니다 :

둘은 동일하므로 선호도를 사용하십시오.

결론 이런 식으로, 우리의 Github 응용 프로그램은 꽤 좋은 상태입니다! GitHub에서 모든 코드를 찾을 수 있으며 온라인에서 실행되는 응용 프로그램도 볼 수 있습니다.

mkdir src
touch webpack.config.js src/index.html src/index.js

나는 많은 좋은 것을 들었 기 때문에 Vue를 사용하기 시작했을 때 Vue에 대한 높은 희망을 가지고 있었고 그것이 내 기대를 충족 시켰다고 말하게되어 기쁩니다. Vue를 사용하면 React의 가장 좋은 부분을 취하고 Best Angular와 병합하는 것처럼 느껴집니다. 일부 지침 (V-IF, V-ELSE, V-MODEL 등)은 시작하기가 매우 쉽고 React의 JSX 구문의 조건부 판단보다 즉시 이해하기 쉽습니다). .

당신은 시스템을 작은 구성 요소로 분해해야하며, 전반적으로, 나는 그것이 매우 완벽한 경험이라는 것을 알았습니다. VUE 팀의 문서에 대해 충분한 찬사를 줄 수는 없습니다. 절대적으로 훌륭합니다. 가이드는 훌륭하고 API 참조는 포괄적이며 원하는 정확한 것을 찾기 위해 쉽게 탐색 할 수 있습니다.

이 게시물을 좋아하고 더 많은 것을 배우고 싶다면 가장 좋은 출발점은 확실히 공식 vue.js 웹 사이트입니다.

vue.js 2.0 에 대한 자주 묻는 질문

vue.js 1.0과 vue.js 2.0의 주요 차이점은 무엇입니까?

vue.js 2.0은 전임자보다 몇 가지 개선 사항이 있습니다. 가장 중요한 변화는 가상 DOM의 도입으로 실제 DOM에서 직접 작업을 줄임으로써 성능을 향상시킵니다. Vue.js 2.0은 또한 복잡한 사용자 인터페이스를보다 쉽게 ​​구축 할 수 있도록 단순화 된 구성 요소 기반 개발 구문을 도입합니다. 또한 vue.js 2.0은 서버 측 렌더링을 지원하므로 응용 프로그램의 성능을 향상시키고 SEO를보다 쉽게 ​​최적화 할 수 있습니다.

vue.js 2.0에서 관찰자를 사용하는 방법은 무엇입니까?

vue.js 2.0의 옵저버를 사용하면 데이터 속성이 변경 될 때 사용자 정의 로직을 실행할 수 있습니다. 관찰자를 사용하려면 관찰하려는 데이터 속성과 동일한 이름의 함수를 정의하고 VUE 인스턴스의 "Watch"객체에 추가해야합니다. 이 메소드는 데이터 속성이 변경되고 새 및 이전 값이 매개 변수로 간주 될 때마다 호출됩니다.

vue.js의 긴급 로딩은 무엇이며 어떻게 사용할 수 있습니까?

비상로드는 vue.js의 개념으로, 필요하기 전에 서버에서 데이터를로드 할 수 있으므로 응용 프로그램의 성능을 향상시킵니다. vue.js에서 긴급로드를 사용하려면 "생성 된"라이프 사이클 후크를 사용하여 구성 요소가 생성 될 때 서버에서 데이터를 가져올 수 있습니다. 그런 다음이 데이터는 구성 요소가 렌더링 된 직후에 사용할 수 있습니다.

vue.js 2.0에서 계산 된 속성을 사용하는 방법은 무엇입니까?

vue.js 2.0의 계산 된 속성을 사용하면 데이터를 기반으로 계산 된 재사용 가능한 속성을 정의 할 수 있습니다. 계산 된 속성을 사용하려면 계산 된 값을 반환하는 메소드를 정의하고 VUE 인스턴스의 계산 된 개체에 추가해야합니다. 이 방법은 데이터 속성이 변경에 의존 할 때마다 호출되며 종속성이 다시 변경 될 때까지 반환 값이 캐시됩니다.

vue.js 2.0에서 이벤트를 처리하는 방법?

vue.js 2.0은 DOM 이벤트를 듣고 이벤트가 발생할 때 사용자 정의 로직을 실행할 수있는 강력한 이벤트 처리 시스템을 제공합니다. 이벤트를 처리하려면 템플릿에서 "V-ON"지침을 사용하고 이벤트의 이름과 이벤트가 발생할 때 실행되는 방법을 사용해야합니다. 이 메소드는 이벤트 객체를 매개 변수로 사용하여 호출됩니다.

Laravel과 함께 vue.js 2.0을 사용하는 방법은 무엇입니까?

vue.js 2.0은 인기있는 PHP 프레임 워크 인 Laravel과 쉽게 통합 할 수 있습니다. Laravel에는 vue.js 지원이 제공되므로 Vue.js 구성 요소를 즉시 구축 할 수 있습니다. Laravel 프로젝트에서 vue.js를 사용하려면 vue.js 스크립트를 HTML에 포함시킨 다음 별도의 JavaScript 파일에서 VUE 구성 요소를 정의해야합니다.

웹 팩과 함께 vue.js 2.0을 사용하는 방법은 무엇입니까?

Webpack은 Vue.js 구성 요소를 단일 JavaScript 파일에 번들로 번들링하는 데 사용할 수있는 모듈 Bundler입니다. WebPack과 함께 vue.js를 사용하려면 WebPack이 VUE 구성 요소를 이해할 수있는 "vue-loader"패키지를 설치해야합니다. 그런 다음 JavaScript 파일에서 vue 구성 요소를 가져 와서 평소와 같이 사용할 수 있습니다.

typescript에서 vue.js 2.0을 사용하는 방법은 무엇입니까?

vue.js 2.0은 정적으로 입력 한 JavaScript의 슈퍼 세트 인 TypeScript를 지원합니다. TypeScript와 함께 vue.js를 사용하려면 "vue class-component"패키지를 설치해야합니다.이 패키지를 사용하면 TypeScript 클래스를 사용하여 VUE 구성 요소를 정의 할 수 있습니다. 그런 다음 VUE 구성 요소를 TypeScript 클래스로 정의하고 TypeScript의 정적 유형 기능을 사용하여 컴파일 시간에 오류를 포착 할 수 있습니다.

vuex와 함께 vue.js 2.0을 사용하는 방법은 무엇입니까?

vuex는 vue.js의 주 관리 라이브러리로, 중앙 집중식 스토리지에서 응용 프로그램 상태를 관리 할 수 ​​있습니다. vue.js와 함께 vuex를 사용하려면 "vuex"패키지를 설치 한 다음 Vuex 스토리지에서 상태, 돌연변이, 동작 및 게터를 정의해야합니다. 그런 다음 "this. $ store"속성을 사용하여 상태에 액세스하고 VUE 구성 요소에서 작업을 예약 할 수 있습니다.

vue 라우터와 함께 vue.js 2.0을 사용하는 방법은 무엇입니까?

vue 라우터는 vue.js 용 라우팅 라이브러리로 응용 프로그램의 경로를 정의 할 수 있습니다. vue.js와 함께 vue 라우터를 사용하려면 "vue-router"패키지를 설치 한 다음 Vue 라우터 인스턴스에서 경로를 정의해야합니다. 그런 다음 "라우터 링크"구성 요소를 사용하여 경로를 탐색하고 "라우터 뷰"구성 요소를 사용하여 현재 라우팅 된 구성 요소를 표시 할 수 있습니다.

위 내용은 vue.js 2.0 프레임 워크와 함께 일어나서 달리기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!