Vue.js 프레임 워 크 가 무엇 입 니까?왜 선택 하 셨 습 니까?제 1 과
그러나 html,css,javascript 의 프로젝트 경험 을 개발 한 적 이 있 기 를 바 랍 니 다.만약 에 프로젝트 경험 이 전혀 없 거나 Vue.js 의 지식 을 이미 알 고 있 었 다 면 이 시 리 즈 는 현재 학습 단계 에 적합 하지 않 습 니 다.
1 학습 목표
이 절 을 통 해 당신 은 배 울 수 있 습 니 다.
1.현재 전단 기술 사용 추세
2.MVVM 이란 무엇 인가
3.Vue.js 의 장점
4.Vue.js 의 양 대 핵심
5.Vue.js 의 적용 장면
2 탄생 배경
최근 몇 년 동안 모 바 일 기기 의 보급 과 성능 향상 에 힘 입 어 모 바 일 기기 의 웹 수요 가 대량으로 증가 하여 웹 앱 이라는 것 이 생 겼 다.즉,모 바 일 기기 의 웹 애플 리 케 이 션 이다.
이들 의 기능 은 점점 복잡 해 지고 상호작용 도 점점 멋 져 지 며 기능 과 효 과 는 원생 의 앱 에 점점 가깝다.예 를 들 어 다음 과 같은 것들:
(효과 가 네 이 티 브 앱 에 육박)
이러한 웹 앱 은 h5 마 케 팅 웹 페이지 처럼 멋 진 효과 가 있 을 뿐만 아니 라 복잡 한 클릭,입력,드 롭 다운 선택,보기 전환 등 복잡 한 상호작용 도 있다.이러한 업무 수요 하에 서 우 리 는 여전히 PC 측의 개발 방안 을 계속 사용 하기 때문에 그다지 적합 하지 않 을 수 밖 에 없다.보기 전환
PC 쪽 에서 보기 전환 은태그 로 페이지 를 돌 립 니 다.하지만 이동 단 에 있 으 면 쉬 겠 습 니 다.이런 화면 을 만 날 수 있 습 니 다. (꽃 이 다 떨 어 질 때 까지 기 다 렸 다가)이 럴 때 사용 자 는..................................................................................그 밖 에 사용자 의 입력 을 받 는 동시에 보 기 를 신속하게 업데이트 해 야 할 수도 있다.예 를 들 어 사용자 가 서로 다른 내용 을 입력 하면 페이지 는 상대 적 으로 업 데 이 트 를 해 야 하고 서로 다른 옵션 을 클릭 하면 서로 다른 상태 등 상호작용 효 과 를 나 타 낼 수 있다.일단 이러한 상호작용 이 많아 지면 수 동 으로 조작 해 야 한다.코드 는 복잡 하고 유지 하기 어렵다.웹 앱 의 이러한 체험 과 개발 상의 부족 을 해결 하기 위해 우 리 는 MVVM 프레임 워 크 인 Vue.js 를 배우 고 사용 하기 로 결정 했다.3.MVVM 이란 무엇 인가MVVM 은 View-ViewModel-Model 세 부분 으로 나 눌 수 있 습 니 다.아래 보 기 를 보십시오. 그렇다면 MVVM 을 어떻게 이해 할 수 있 을 까?위의 그림 에서 왼쪽 의 View 는 우리 의 DOM 내용 에 해당 합 니 다.우리 가 본 페이지 보기,오른쪽 모델 은 우리 의 데이터 대상 에 해당 합 니 다.예 를 들 어 한 대상 의 정보: { name:"장삼", age:21, } 중간 에 있 는 감시 자 는 양쪽 의 데 이 터 를 감시 하고 상대 적 으로 다른 쪽 에 수정 을 통지 해 야 한다.예 를 들 어 Model 층 에서 name 의 값 을'이사'로 수정 하면 View 보기 층 에 표 시 된'장삼'도 자동 으로'이사'가 됩 니 다.이 과정 은 ViewModel 이 조작 하 는 것 입 니 다.코드 를 수 동 으로 쓸 필요 가 없습니다(DOM 을 수 동 으로 조작 하지 않 아 도 됩 니 다).복잡 한 DOM 작업 을 쓴 적 이 있다 면 편리 함 을 느 낄 수 있 을 것 이다.이것 이 바로 MVVM 프레임 워 크 로 MVVM 에 속 하 는 JS 프레임 워 크 는 Vue.js 외 에 React.js,Angular.js 도 있다.여기 서 우 리 는 이 세 가지 구조 중 어느 것 이 더 좋 은 지 분석 하지 않 고 기술 선택 에 대해 모든 개발 팀 의 상황 이 다 르 고 고려 하 는 요소 도 다 르 기 때문에 자신 에 게 맞 으 면 된다.여기 서 Vue.js 의 장점 만 말씀 드 리 겠 습 니 다.1.Vue.js 가 더 가 볍 고 빠 름2.손 쉽게 배우 기4 Vue 의 핵심이렇게 많아그럼 Vue.js 를 만 나 보 겠 습 니 다.여기 서 홈 페이지 에 대한 소 개 를 따 겠 습 니 다.가능 한 한 간단 한 API 를 통 해 응답 하 는 데이터 바 인 딩 과 조합 을 실현 하 는 보기 구성 요소이 말 은 두 가지 키워드 가 있 습 니 다.데이터 바 인 딩 과 보기 구성 요소 입 니 다.Vue 의 데이터 구동:데 이 터 는 보기 의 자동 업 데 이 트 를 구동 합 니 다.전통 적 인 방법 은 DOM 을 수 동 으로 바 꾸 어 보 기 를 바 꿔 야 합 니 다.vuess 는 데 이 터 를 바 꾸 기만 하면 보 기 를 자동 으로 바 꿉 니 다.한 글자:시원 합 니 다.더 이상 DOM 업데이트 에 신경 쓰 지 마 세 요.이것 이 바로 MVM 사상의 실현 입 니 다.보기 구성 요소 화:전체 웹 페이지 를 하나의 블록 으로 나 누 면 모든 블록 을 하나의 구성 요소 로 볼 수 있 습 니 다.웹 페이지 는 여러 개의 구성 요소 가 연결 되 거나 끼 워 넣 는 것 으로 구성 되 어 있다.다음 그림 보기: 구체 적 으로 개발 과정 에서 하나의 구성 요 소 를 어떻게 실현 하 는 지,도대체 어떤 블록 이 하나의 구성 요소 로 나 눌 수 있 는 지,뒤의 장 에서 우 리 는 다시 한 번 소개 합 니 다.여 기 는 Vue.js 에서 웹 페이지 는 여러 개의 구성 요소 로 구성 되 어 있다 는 것 만 알 면 됩 니 다.5 필드 적용만약 당신 이 아직도 jquery 로 자주 당신 의 DOM 을 조작 하여 페이지 를 업데이트 하고 있다 면,당신 은 Vue.js 로 당신 의 DOM 조작 을 해방 시 킬 수 있 습 니 다.프로젝트 의 여러 부분 이 같 고 구성 요소 로 포 장 될 수 있다 면 Vue.js 를 사용 해 보 세 요.또한 Vue.js 의 핵심 구현 에는 ES5 의 Object.defineProperty 특성 이 사용 되 어 있 으 며,IE8 및 이하 버 전의 브 라 우 저 는 호 환 되 지 않 기 때문에 프로젝트 가 낮은 버 전의 브 라 우 저 를 호 환 해 야 한다 면 Vue.js 는 적용 되 지 않 습 니 다.한 프로젝트 를 개발 하 는 목적 은 어떤 프레임 워 크 를 사용 하기 위 한 것 이 아니 기 때문이다.6 절 소결현재 모 바 일 웹 앱 프로젝트 의 개발 수 요 를 잘 만족 시 키 기 위해 MVVM 프레임 워 크 가 탄생 했 고 Vue.js 는 바로 이러한 js 프레임 워 크 로 그 두 가지 핵심 은 데이터 구동 과 구성 요소 화 이다.출처:공중 번호:웹 전단 튜 토리 얼이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
