Vue Family 버킷이란 무엇입니까?

추천 튜토리얼: VUE.JS 튜토리얼#🎜🎜 #

Vue에는 전체 Vue 프로젝트의 핵심 구성 요소인

스타일을 포함하는 유명한 Family Bucket 시리즈가 있습니다. vue-router，vuex， vue-resource。再加上构建工具vue-cli，sass

요약하자면:

1. 프로젝트 구축 도구

2. 라우팅# 🎜 🎜#

　3.상태 관리

　4.HTTP 요청 도구.

아래에 별도로 소개됨

머리말:

Vue의 두 가지 핵심 아이디어: 구성요소화 및 데이터 중심#🎜 🎜 #. 구성 요소화: 전체를 재사용 가능한 개별 항목으로 분할하고, 데이터 기반: DOM 작업을 피하면서 데이터 변경을 통해 BOM 표시에 직접 영향을 줍니다.

1. Vue-cli는 이 단일 페이지 애플리케이션을 빠르게 구축하기 위한 스캐폴딩입니다.

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ 
cd my-project
$ npm install
$ npm run dev

#🎜 🎜#2.vue-router

설치: npm installvue-router 모듈식으로 사용하는 경우 프로젝트에서 라우팅 기능은 Vue.use()를 통해 명시적으로 설치되어야 합니다.

import Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)

또한 사용 중에 vue의 전환 속성을 사용하여 페이지 전환 효과를 렌더링할 수 있습니다.

3. vuex

vuex는 vue.js 애플리케이션을 위해 특별히 개발된 상태 관리라는 것은 이해할 수 있습니다. 글로벌 데이터 관리를 위해. Vuex는 크게 State Action, Mutle, Getter, Mudle의 5가지 부분으로 구성됩니다. 사용 과정은 다음과 같습니다. 위의 네 부분은 mudle을 제외한 컴포넌트에서 직접 호출할 수 있습니다.

1, state

#🎜🎜 # Vue 객체 데이터와 유사하며 데이터 및 상태를 저장하는 데 사용됩니다. 저장된 데이터는 반응합니다. 데이터가 변경되면 데이터에 의존하는 구성 요소도 그에 따라 변경됩니다.

상태를 가져오는 두 가지 방법의 예:

1.store.getters['getRateUserInfo']

2.

UserInfo: 'login/UserInfo', // 사용자 정보

menuList: 'getMenuList', // 승인 RateUserInfo: 'getRateUserInfo' // 사용자 정보 평가#🎜🎜 #

})

참고: 전역 상태 및 getter는 mapState를 통해 현재 구성 요소의 계산된 속성에 매핑될 수 있습니다.

2, actions

작업은 store.dispatch 메서드에 의해 트리거됩니다. 작업은 비동기 호출을 지원합니다(API 호출 가능), 변형만 지원 동기 작업을 지원하며 작업은 상태를 직접 변경하는 대신 변형을 제출합니다.

예:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 함수는 저장소 인스턴스와 동일한 메서드 및 속성을 가진 컨텍스트 개체를 허용하므로 context.commit을 호출하여 변형을 제출할 수 있습니다. 또는 context와 context.getters를 전달하여 상태와 getter를 얻습니다. 실제로는 코드를 단순화하기 위해 ES2015 매개변수 구조 분해를 자주 사용합니다(특히 커밋을 여러 번 호출해야 하는 경우).

3, mutation#🎜 🎜#

각 돌연변이에는 문자열 이벤트 유형(유형)과 콜백 함수(핸들러)가 있습니다. 이 콜백 함수는 실제로 상태를 변경하는 곳이며 상태를 첫 번째 매개변수로 받아들입니다.

4, getters

Vuex를 사용하면 상점에서 "getters"를 정의할 수 있습니다(상점의 계산된 속성으로 간주될 수 있음). . 계산된 속성과 마찬가지로 getter의 반환 값은 종속성에 따라 캐시되며 종속성 값이 변경될 때만 다시 계산됩니다

const getters = {
  getRateInitData: state => state.rateInitData,
  getchooseRateObj: state => state.chooseRateObj,
  getSearchRateParams: state => state.searchRateParams,
  getSearchRateResult: state => state.searchRateResult,
  getRateUserInfo: state => state.RateUserInfo,
  getMenuList: state => state.menuList,
  getRateQueryParams: state => state.rateQueryParams,
  getRateQueryResult: state => state.rateQueryResult,
  getCheckRateDetailParams: state => state.checkRateDetailParams,
  getReferenceCondition: state => state.referenceCondition,
  getWaitApprovalParams: state => state.waitApprovalParams
}

　mapGetters 도우미 함수

# 🎜🎜# mapGetters 보조 기능은 저장소의 getter를 로컬 계산 속성에 매핑합니다.

4. axios

#🎜🎜 #

Axios는 http 요청 패키지입니다. Vue 공식 웹사이트에서는 http 호출에 axios 사용을 권장합니다.

설치:

npm install axios --save

예:

1 GET 요청 보내기

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });
//以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});
2、发送一个POST请求
axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

위 내용은 Vue Family 버킷이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!