vue.js 패밀리 버킷이란 무엇입니까?

vue.js 패밀리 버킷은 vue-router, vuex, vue-resource, vue-cli 및 sass 스타일을 포함한 전체 vue 프로젝트의 핵심 구성 요소입니다. vue-cli는 단일 페이지 애플리케이션을 빠르게 구축하기 위한 스캐폴딩입니다.

vue 패밀리 버킷:

에는 vue-router, vuex, vue-resource 및 빌드 도구 vue-cli, sass 스타일이 포함되어 있으며 이는 전체 vue 프로젝트의 핵심 구성 요소입니다.

(학습 동영상 공유: javascript 동영상 튜토리얼)

요약:

1. 프로젝트 구성 도구 3. 상태 관리;

자세한 소개:

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)

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

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

2. Actions

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

예:

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

관련 권장 사항: vue.js tutorial

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