Vue.js 간이 설치 및 빠 른 입문(제2 과)
1 간이 설치
Vue.js 를 사용 하려 면 우 리 는 먼저 그것 을 우리 프로젝트 에 설치 하고 간단 한 설 치 를 설명 해 야 한다.우리 가 설명 하 는 것 은 가장 간단 한 방법 일 것 이다.먼저 높 은 시간 을 들 이 는 설치 방법 에 관 계 없 이 js 파일 을 직접 도입 하고 코드 를 두 드 리 고 나 서 다시 이야기 하 자.
<head>
<meta charset="UTF-8">
<title> Vue.js</title>
<script src="vue.js"></script>
</head>
로 컬 에 다운로드 하지 않 으 려 면 CDN 방식 으로 인터넷 자원 을 직접 도입 할 수 있 습 니 다.
<script src="https://xx/vue.js"></script>
2 데이터 구동 보기
도입 한 후에 우 리 는 그것 을 사용 할 수 있다.듣자니 그것 이 가장 강 한 곳 은 데이터 구동 보기 라 고 한다.DOM 조작 을 해방 시 켜 복잡 하고 성능 을 소모 하 는 DOM 조작 을 하지 않도록 한다.그럼 어떻게 노 는 지 봅 시다!
만약 에 우리 가 지금 js 대상 중의 특정한 변수의 값 을 페이지 에 나타 내 려 고 한다 면 전통 적 인 방법 은 getElement ById 로 DOM 노드 대상 을 얻 은 다음 에 innerHTML 로 그 내용 을 설정 하 는 것 이다.
지금 Vue.js 에서 이렇게 해 야 합 니 다.
<div id="app">
：{{ name }}
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
name:"web ",
}
});
</script>
DOM 노드 에서 우 리 는 두 개의 큰 괄호{{를 사용 할 수 있 습 니 다. }}Vue 인 스 턴 스 대상 data 에 존재 하 는 속성 값 을 보 여 주 는 문법 입 니 다.예 를 들 어 상기 사례 의 name 속성의 값 인'웹 전단 튜 토리 얼'은 페이지 에 보 여 집 니 다.{{name}을 바 꾸 면 효 과 는'웹 전단 튜 토리 얼'입 니 다.
이 과정 에서 저 희 는 DOM 노드 를 조작 하 는 코드 를 쓴 적 이 없습니다.그리고 지난 절 에 말씀 드 렸 듯 이 MVVM 모드 의 view Model 은 모니터 의 역할 을 합 니 다.만약 에 model 데이터 가 변화 하 는 것 을 감시 하면 view 보기 에 업 데 이 트 를 알 릴 것 입 니 다.이 과정 은 당신 이 참여 할 필요 가 없습니다.
(mvvm 복습)
name 의 값 을"hello word"로 바 꾸 고 코드 를 추가 하지 않 은 상태 에서 페이지 보기 가 자동 으로 업데이트 되 는 지 시험 해 보 겠 습 니 다.
아래 gif 동 도 를 보 세 요.chrome 브 라 우 저 를 통 해 보 여 드 리 겠 습 니 다.
(천천히,gif 그림 이 다 불 러 오 면)
위의 그림 에서 보 듯 이 name 의 값 이 바 뀌 면 페이지 에 바로 변화 가 생 깁 니 다.innerHTML 을 써 서 보 기 를 업데이트 할 필요 가 없습니다.
이것 이 바로 Vue.js 의 데이터 구동 보기 입 니 다.
3 쌍방 향 귀속
더욱 편리 한 것 은 Vue.js 는 보기 와 데이터 의 양 방향 연결 을 실현 하 는 편리 한 문법 명령 도 제공 했다.즉,데이터 가 변화 하여 보 기 를 구동 할 수 있 을 뿐만 아니 라 사용자 가 페이지 에서 조작 을 했 을 뿐만 아니 라 model 층 의 데 이 터 를 업데이트 하 는 데 도 편리 하 다 는 것 이다.
예:사용자 가 페이지 입력 상자 에 입력 한 내용 을 감청 한 후 실시 간 으로 페이지 에 업데이트 합 니 다.
Vue 에서 우 리 는 v-model 명령 을 사용 하면 쉽게 실현 할 수 있 습 니 다.(v-model 이 무엇 인지 상관 하지 마 세 요.뒤에 장절 이 자세히 소개 되 어 있 습 니 다.
<div id="app">
<input v-model="number">
<p> :{{ number }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
number:"",
}
});
</script>
(천천히,gif 그림 이 다 불 러 오 면)
사례 에서 저 희 는 코드 를 써 서 input 컨트롤 의 내용 변 화 를 감청 할 필요 가 없습니다.사용자 가 입력 한 내용 은 vm 인 스 턴 스 의 data 속성 number 의 값 을 실시 간 으로 업데이트 합 니 다.number 가 업데이트 되면 보기 도 이에 따라 업 데 이 트 됩 니 다.이 모든 것 을 Vue.js 가 도와 주 었 기 때 문 입 니 다.
4 구성 요소
위의 우 리 는 Vu.jse 의 데이터 구동 을 보 여 주 었 습 니 다.잊 지 마 세 요.지난 절 에 우 리 는 Vue.js 에 대해 언급 한 중요 한 핵심 은 바로 구성 요소 화 입 니 다.
구성 요소 화 는 페이지 의 특정한 블록 을 독립 적 으로 추출 하고 재 활용 이 편리 한 구성 요소 로 밀봉 하 는 것 이다.
예:페이지 에 똑 같은 카드 가 여러 개 있다 고 가정 합 니 다.
전통 적 인 방법 으로 우 리 는 똑 같은 HTML 레이아웃 세 부 를 쓸 수 있다.
<div id="app">
<!-- 1 -->
<div class="card">
<img src="logo.png" alt="">
<h2>web </h2>
<p> ， </p>
<button> </button>
</div>
<!-- 2 -->
<div class="card">
<img src="logo.png" alt="">
<h2>web </h2>
<p> ， </p>
<button> </button>
</div>
<!-- 3 -->
<div class="card">
<img src="logo.png" alt="">
<h2>web </h2>
<p> ， </p>
<button> </button>
</div>
</div>
Vue.js 에서 우 리 는 카드 를 구성 요소 로 포장 해 보 았 다.
<div id="app">
<card></card>
<card></card>
<card></card>
</div>
<script>
// card
Vue.component('card',{
template:`<div>
<img src="logo.png" alt="">
<h2>web </h2>
<p> ， </p>
<button> </button>
</div>`
});
new Vue({
el:"#app"
});
</script>
구성 요소 에 표 시 된 내용 이 모두 같 을 수 는 없다 고 말 할 수 있 습 니 다.안심 하 세 요.Vue 는 구성 요소 에 props 속성 을 제공 하여 전 달 된 인 자 를 받 아들 입 니 다.그 다음 에 저 희 는 구성 요소 의 상세 한 용법 을 소개 할 것 입 니 다.
5 절 소결
이 를 보고 Vue.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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
