vue.js 패밀리 버킷에는 무엇이 포함되어 있나요?

vue.js 제품군 버킷 패키지에는 1. [vue + vuex] 상태 관리, 2. [vue-router] 라우팅, 4. axios,

【추천 관련 기사: vue.js】

vue.js 패밀리 버킷 패키지에는 다음이 포함됩니다:

vue 패밀리 버킷: vue + vuex(상태 관리) + vue-router(라우팅) + vue-resource +axios +UI 프레임워크(iview, vant, elementUI 등)

Vue에는 vue-router(http://router.vuejs.org), vuex(http:/ /vuex.vuejs.org), vue-resource (https://github.com/pagekit/vue-resource). 빌드 도구 vue-cli 및 sass 스타일과 결합되어 전체 vue 프로젝트의 핵심 구성 요소입니다.

요약하면 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

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

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

첫 번째 방법:

store.getters['getRateUserInfo']

두 번째 방법:

...mapGetters({
        UserInfo: 'login/UserInfo', // 用户信息
        menuList: 'getMenuList', // approve 运价审批
        RateUserInfo: 'getRateUserInfo' // Rate用户信息
   })

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

2. Actions

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

예:

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

Action 함수는 저장소 인스턴스와 동일한 메서드 및 속성을 가진 컨텍스트 개체를 허용하므로 context.commit을 호출하여 변형을 제출하거나 context.state 및 context를 통해 상태 및 getter를 얻을 수 있습니다. 게터.

실제로는 코드를 단순화하기 위해 ES2015 매개변수 구조 분해를 자주 사용합니다(특히 커밋을 여러 번 호출해야 하는 경우).

actions:{
  increment ({ commit }){
    commit('increment')
  }
}

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);
});

5.

iview는 Vue 기반의 고품질 UI 구성 요소 라이브러리 세트입니다(애플릿, PC 등 다양한 버전으로 구분됨).

vant는 Vue 기반의 오픈 소스 세트인 가볍고 안정적인 모바일 Vue 구성 요소 라이브러리입니다. Vue 2.0 모바일 구성 요소 라이브러리는 Vue를 기반으로 아름답고 사용하기 쉬운 모바일 사이트를 더 빠르고 쉽게 개발할 수 있도록 설계되었습니다.

Ant Design Vue는 엔터프라이즈급 백엔드 제품을 개발하고 서비스하는 Ant Design의 Vue 구현입니다.

elementUI는 Vue 2.0 데스크톱 미들 및 백엔드 구성 요소 라이브러리를 기반으로 합니다.

관련 무료 학습 권장 사항: JavaScript(동영상)

위 내용은 vue.js 패밀리 버킷에는 무엇이 포함되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!