Vue 입문 학습 노트[기본 개념,대상,필터,명령 등]

본 논문 의 사례 는 Vue 입문 의 기본 개념 과 사용 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
1.Vue.js 는 무엇 입 니까?
1).중국 계 구 글 엔지니어(유 우 계)가 개발 한 전단 js 라 이브 러 리
2).역할:동적 사용자 인터페이스 구축
3).특징:
*MVVM 모드 를 따른다
*인 코딩 이 간결 하고 부피 가 작 으 며 운행 효율 이 높 으 며 이동/PC 단 개발
*UI 에 만 관심 을 가지 고 vue 플러그 인과 다른 세 번 째 라 이브 러 리 개발 프로젝트 를 쉽게 도입 할 수 있 습 니 다.
4).다른 프레임 워 크 와 의 연결:
*angular 의 템 플 릿 과 데이터 바 인 딩 기술 참고
*react 의 구성 요소 화 와 가상 DOM 기술 참조
5).vue 는 일련의 확장 플러그 인(라 이브 러 리)을 포함 합 니 다.
*vue-cli:vue 비계
*vue-resource(axios):ajax 요청
*vue-router:경로
*vuex:상태 관리
*vue-lazyload:그림 게 으 름 불 러 오기
*vue-scroller:페이지 슬라이딩 관련
*mint-ui:vue 기반 구성 요소 라 이브 러 리(이동 단)
*element-ui:vue 기반 구성 요소 라 이브 러 리(PC 엔 드)
2.기본 사용
1).vue.js 도입
2).Vue 인 스 턴 스 대상(vm)을 만 들 고 옵션(설정)대상 을 지정 합 니 다.
el:dom 태그 용기 선택 기 지정
data:상태 데 이 터 를 초기 화 할 대상/함 수 를 지정 합 니 다.(대상 을 되 돌려 줍 니 다)
3).페이지 템 플 릿 에{{}또는 vue 명령 을 사용 합 니 다.
3.Vue 대상 의 옵션
1). el
dom 태그 용기 선택 기 지정
Vue 는 대응 하 는 탭 과 하위 탭 을 관리 합 니 다.
2). data
대상 또는 함수 형식
상태 속성 데이터 초기 화 대상 지정
vm 도 data 의 모든 속성 을 자동 으로 보유 합 니 다.
페이지 에 직접 접근 하여 사용 할 수 있 습 니 다.
데이터 에이전트:vm 대상 이 data 의 모든 속성 을 대리 합 니 다(읽 기/쓰기)
3). methods
여러 가지 방법 을 포함 하 는 대상
페이지 의 이벤트 명령 으로 리 셋 을 연결 합 니 다.
리 셋 함수 에는 기본적으로 이벤트 인자 가 있 지만,자신의 인자 도 지정 할 수 있 습 니 다.
모든 방법 은 vue 대상 에서 호출 되 며,data 의 속성 을 직접 사용 합 니 다this.xxx4). computed
여러 가지 방법 을 포함 하 는 대상
상태 속성 을 계산 하여 페이지 에 표 시 를 가 져 올 수 있 도록 새로운 데 이 터 를 되 돌려 줍 니 다.
일반적으로 읽 기 전용 속성 에 해당 합 니 다.
set/get 방법 을 이용 하여 속성 데이터 의 계산 읽 기 를 실현 하고 속성 데이터 의 변 화 를 감시 합 니 다.
대상 에 게 get/set 속성 을 정의 하 는 방법
대상 을 만 들 때 지정:

get name () {return xxx} / set name (value) {}

대상 생 성 후 지정:

Object.defineProperty(obj, age, {get(){}, set(value){}})

5). watch
여러 속성 감시 대상 포함
일반 감시 와 심층 감시 로 나 뉜 다.

'xxx' : {
    deep : true,
    handler : fun(value)
}

다른 감시 방식 추가:

vm.$watch('xxx', funn)

4.과도 애니메이션
vue 를 이용 하여 css 의 transition/animation 애니메이션 을 조작 합 니 다.
템 플 릿:애니메이션 라벨 포함<transition name='xxx'>사용 하기
css 스타일
.fade-enter-active:진입 과정,지 정 된 transition
.fade-leve-active:떠 나 는 과정,떠 나 는 transition 지정
.xxx-enter,.xxx-leve-to:숨겨 진 스타일 지정
인 코딩 예

  .xxx-enter-active, .xxx-leave-active {
   transition: opacity .5s
  }
  .xxx-enter, .xxx-leave-to {
   opacity: 0
  }

  <transition name="xxx">
   <p v-if="show">hello</p>
  </transition>

5.라 이 프 사이클
vm/구성 요소 대상
생명주기 도
주요 생명주기 함수(갈고리)created()/mounted():비동기 작업 시작(타이머 시작,ajax 요청 발송,바 인 딩 감청)beforeDestroy():마무리 작업 을 좀 하 세 요.
6.사용자 정의 필터
1)이해
표시 할 데 이 터 를 포맷 한 후 표시 합 니 다.
2).인 코딩
1).필터 정의

Vue.filter(filterName, function(value[,arg1,arg2,...]){
 //          
 return newValue
})

2).필터 사용

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

7.vue 내장 명령
v-text/v-html:지정 한 탭 체
        * 텍스트
        * v-html:value 를 html 태그 로 해석 합 니 다.
v-if v-else v-show:요소 표시/숨 기기
        * v-if:vlue 가 true 라면 현재 탭 은 페이지 에 출력 됩 니 다.
        * v-else:v-if 와 함께 사용 합 니 다.value 가 false 라면 현재 탭 을 페이지 에 출력 합 니 다.
        * v-show:탭 에 display 스타일 을 추가 합 니 다.vlue 가 true 라면 display=block,그렇지 않 으 면 none 입 니 다.
v-for:옮 겨 다 니 기
        * 배열 옮 겨 다 니 기:v-for="(person,index)in persons"  
        * 대상 옮 겨 다 니 기:v-for="value in person"   $key
v-on:귀속 이벤트 감청
       * 이벤트 이름
        * 구체 적 인 버튼 감시:@keyup.keyCode   @keyup.enter
        * 이벤트 의 거품 을 멈 추고 이벤트 의 기본 동작 을 막 습 니 다:@click.stop   @click.prevent
        * 함 축 대상:$event
v-bind:강제 바 인 딩 해석 식  
        * html 태그 속성 은 표현 식 을 지원 하지 않 으 면 v-bind 를 사용 할 수 있 습 니 다.
        * 줄 임 말:  :id='name'
        * :class
          * :class="a"
                * :class="{classA : isA, classB : isB}"
                * :class="[classA, classB]"
        * :style
                :style="{color : color}"
v-model
        * 양 방향 데이터 바 인 딩
        * 사용자 입력 데이터 자동 수집
ref:어떤 라벨 을 표시 합 니 다.
        * ref='xxx'
        * 태그 대상 읽 기:this.$refs.xxx
8.사용자 정의 명령
1).전역 명령 등록

Vue.directive('my-directive', function(el, binding){
 el.innerHTML = binding.value.toUpperCase()
})

2).부분 명령 등록

directives : {
 'my-directive' : function(el, binding) {
   el.innerHTML = binding.value.toUpperCase()
 }
}

3).명령 사용

<div v-my-directive='xxx'>

본 고 에서 말 한 것 이 여러분 vue.js 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.