추천 튜토리얼: 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
설치: 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 보조 기능은 저장소의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!