vue.js 2.0 프레임 워크와 함께 일어나서 달리기
이 기사는 업데이트되었으며 주로 도구 섹션을 업데이트했습니다.
키 포인트
이 기사에서는 VUE의 반응 시스템 및 수명주기 후크를 사용하여 데이터를 효과적으로 관리하고 표시하는 GitHub 사용자 통계 획득 애플리케이션을 구축하고 실제 시나리오에서 VUE.JS의 실제 사용을 보여줍니다.
-
나는 INDEX.VUE의 이름을 지정하고 싶지만 쉽게 검색 할 수 있도록 App.Vue의 이름을 지정할 수도 있습니다. App/App.Vue 대신 내 코드에서 App/Index.vue를 가져 오는 것을 선호하지만 다시 동의하지 않을 수도 있으므로 귀하와 귀하의 팀을 가장 좋아하는 이름을 자유롭게 선택하십시오. - 입니다
안녕하세요, 세상! <🎜 🎜>
, 나는 CSS 파일을 비워 두었다. 주요 작업은 Script.js에서 수행됩니다. -
이제 우리는 src/index.js로 돌아가서 vue 인스턴스에 앱 구성 요소를 렌더링하도록 알릴 수 있습니다.
구성 요소, 구성 요소, 구성 요소
오늘날 다른 프레임 워크와 마찬가지로 Vue의 핵심 빌딩 블록은 구성 요소입니다. 응용 프로그램은 최종 응용 프로그램을 생성하기 위해 서로 구축 된 일련의 구성 요소 여야합니다. vue.js는 한 단계 더 나아가서 .Vue 파일의 구성 요소를 정의한 다음 (짧은 시간에 커버 할 빌드 도구)가 해당 파일을 구문 분석 할 수 있음을 제안합니다 (필수는 아니지만). 이 기사의 목적은 VUE와 그 사용법을 완전히 탐색하는 것이기 때문에이 응용 프로그램 에이 컨벤션을 사용할 것입니다.
vue 파일은 다음과 같습니다
설정 프로젝트
이제 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 <🎜
를 사용하도록 지시하십시오
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
<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>
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/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>
<<>
<<> 초기 설정 <🎜 🎜>
각 폴더에 필요한 파일을 추가하십시오
<<> src 폴더의 구조는 이제 다음과 같습니다.
. 곧 올바르게 작성하겠습니다. 새로운 구성 요소를 만들 때 템플릿이 올바르게 연결되어 있는지 확인할 수 있도록 가상 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>
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
그런 다음 앱 구성 요소의 템플릿을 업데이트 할 수 있습니다.
mkdir src touch webpack.config.js src/index.html src/index.js
<code>. ├── package.json ├── package-lock.json ├── src │ ├── index.html │ └── index.js └── webpack.config.js</code>
이제 구성 요소의 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 라우터 인스턴스에서 경로를 정의해야합니다. 그런 다음 "라우터 링크"구성 요소를 사용하여 경로를 탐색하고 "라우터 뷰"구성 요소를 사용하여 현재 라우팅 된 구성 요소를 표시 할 수 있습니다.
<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>
<,> 이런 식으로, 우리의 양식이 완료되고 생성 된 데이터로 무언가를 시작할 수 있습니다.
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
mkdir src touch webpack.config.js src/index.html src/index.js
다시, 이것은 모든 각도 개발자에게 매우 친숙합니다. 우리는 여기에서 트리플 부호 대신 더블 부호를 사용합니다. currentusername이 null 일 때뿐만 아니라 currentusername이 정의되지 않았고 null == 정의되지 않은 경우 조건이 사실이되기를 원하기 때문입니다.
에서 데이터를 가져옵니다
vue.js에는 자체 HTTP 라이브러리가 제공되지 않으므로 그럴만 한 이유가 있습니다. 오늘날 Fetch API는 기본적으로 많은 브라우저에 포함되어 있습니다 (IE11, Safari 또는 iOS Safari를 제외하고는 글을 쓰는 시점에도). 이 튜토리얼을 위해 PolyFill을 사용하지 않지만 필요한 경우 브라우저에서 API에 PolyFill을 쉽게 추가 할 수 있습니다. Fetch API가 마음에 들지 않으면 HTTP를위한 많은 타사 라이브러리가 있으며 VUE 문서에 언급 된 것은 Axios입니다.
이 코드는 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>
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
우리는 분명히 약간의 개선을 할 수 있습니다. 위의 GitHub 데이터를 렌더링하는 HTML 코드는 현재 사용자의 데이터의 작은 부분 만 필요합니다. 이것은 다른 구성 요소의 완벽한 사례입니다. 사용자 데이터를 제공 할 수 있으며이를 렌더링 할 수 있습니다.
다른 구성 요소와 동일한 구조를 가진 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>
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
<:> 찾은 경우 : 데이터가 약간 짧고 마술처럼, 더 긴 V- 바인드 구문을 사용할 수도 있습니다 : <🎜 🎜>
결론 <🎜 🎜> 이런 식으로, 우리의 Github 응용 프로그램은 꽤 좋은 상태입니다! GitHub에서 모든 코드를 찾을 수 있으며 온라인에서 실행되는 응용 프로그램도 볼 수 있습니다.
mkdir src touch webpack.config.js src/index.html src/index.js
vue.js 2.0에서 관찰자를 사용하는 방법은 무엇입니까?
vue.js의 긴급 로딩은 무엇이며 어떻게 사용할 수 있습니까?
vue.js 2.0에서 이벤트를 처리하는 방법?
웹 팩과 함께 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 라우터 인스턴스에서 경로를 정의해야합니다. 그런 다음 "라우터 링크"구성 요소를 사용하여 경로를 탐색하고 "라우터 뷰"구성 요소를 사용하여 현재 라우팅 된 구성 요소를 표시 할 수 있습니다.
Webpack은 Vue.js 구성 요소를 단일 JavaScript 파일에 번들로 번들링하는 데 사용할 수있는 모듈 Bundler입니다. WebPack과 함께 vue.js를 사용하려면 WebPack이 VUE 구성 요소를 이해할 수있는 "vue-loader"패키지를 설치해야합니다. 그런 다음 JavaScript 파일에서 vue 구성 요소를 가져 와서 평소와 같이 사용할 수 있습니다.
vuex는 vue.js의 주 관리 라이브러리로, 중앙 집중식 스토리지에서 응용 프로그램 상태를 관리 할 수 있습니다. vue.js와 함께 vuex를 사용하려면 "vuex"패키지를 설치 한 다음 Vuex 스토리지에서 상태, 돌연변이, 동작 및 게터를 정의해야합니다. 그런 다음 "this. $ store"속성을 사용하여 상태에 액세스하고 VUE 구성 요소에서 작업을 예약 할 수 있습니다.
위 내용은 vue.js 2.0 프레임 워크와 함께 일어나서 달리기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.

이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...
