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
설치: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7366
15
1628
14
1354
52
1266
25
1214
29
vue에서 echart를 사용하는 방법
May 09, 2024 pm 04:24 PM
Vue에서 ECharts를 사용하면 애플리케이션에 데이터 시각화 기능을 쉽게 추가할 수 있습니다. 특정 단계에는 ECharts 및 Vue ECharts 패키지 설치, ECharts 소개, 차트 구성 요소 생성, 옵션 구성, 차트 구성 요소 사용, Vue 데이터에 반응하는 차트 만들기, 대화형 기능 추가 및 고급 사용법이 포함됩니다.
vue에서 내보내기 기본값의 역할
May 09, 2024 pm 06:48 PM
질문: Vue에서 내보내기 기본값의 역할은 무엇입니까? 자세한 설명: 내보내기 기본값은 구성 요소의 기본 내보내기를 정의합니다. 가져올 때 구성 요소를 자동으로 가져옵니다. 가져오기 프로세스를 단순화하고 명확성을 높이며 충돌을 방지합니다. 개별 구성 요소를 내보내고, 명명된 내보내기와 기본 내보내기를 모두 사용하고, 전역 구성 요소를 등록하는 데 일반적으로 사용됩니다.
Vue에서 지도 기능을 사용하는 방법
May 09, 2024 pm 06:54 PM
Vue.js 맵 함수는 각 요소가 원래 배열의 각 요소를 변환한 결과인 새 배열을 생성하는 내장된 고차 함수입니다. 구문은 map(callbackFn)입니다. 여기서 callbackFn은 배열의 각 요소를 첫 번째 인수로 받고 선택적으로 인덱스를 두 번째 인수로 받아 값을 반환합니다. map 함수는 원래 배열을 변경하지 않습니다.
vue에서 onmounted의 역할
May 09, 2024 pm 02:51 PM
onMounted는 Vue의 구성 요소 마운팅 라이프 사이클 후크입니다. 해당 기능은 DOM 요소에 대한 참조 가져오기, 데이터 설정, HTTP 요청 전송, 이벤트 리스너 등록 등과 같은 구성 요소가 DOM에 마운트된 후 초기화 작업을 수행하는 것입니다. 구성 요소가 마운트될 때 한 번만 호출됩니다. 구성 요소가 업데이트된 후 또는 삭제되기 전에 작업을 수행해야 하는 경우 다른 수명 주기 후크를 사용할 수 있습니다.
Vue의 후크는 무엇입니까
May 09, 2024 pm 06:33 PM
Vue 후크는 특정 이벤트 또는 수명 주기 단계에서 작업을 수행하는 콜백 함수입니다. 여기에는 수명 주기 후크(예: beforeCreate, 마운트, beforeDestroy), 이벤트 처리 후크(예: 클릭, 입력, 키다운) 및 사용자 정의 후크가 포함됩니다. 후크는 구성 요소 제어를 강화하고 구성 요소 수명 주기에 응답하며 사용자 상호 작용을 처리하고 구성 요소 재사용성을 향상시킵니다. 후크를 사용하려면 후크 함수를 정의하고 로직을 실행한 후 선택적 값을 반환하면 됩니다.
vue의 이벤트 수정자를 어떤 시나리오에 사용할 수 있나요?
May 09, 2024 pm 02:33 PM
Vue.js 이벤트 수정자는 다음을 포함한 특정 동작을 추가하는 데 사용됩니다. 기본 동작 방지(.prevent) 이벤트 버블링 중지(.stop) 일회성 이벤트(.once) 이벤트 캡처(.capture) 수동 이벤트 수신(.passive) 적응형 수정자(.self)키 수정자(.key)
Vue에서의 사용 약속
May 09, 2024 pm 03:27 PM
Promise를 사용하여 Vue.js에서 비동기 작업을 처리할 수 있습니다. 단계에는 Promise 객체 생성, 비동기 작업 수행, 결과에 따라 해결 또는 거부 호출, Promise 결과 처리(성공 처리를 위해 .then() 사용)이 포함됩니다. , 오류를 처리하기 위한 .catch()). Promise의 장점에는 가독성, 디버깅 용이성 및 구성 가능성이 포함됩니다.
vue에서 연결 유지의 역할
May 09, 2024 pm 02:42 PM
Vue의 keep-alive 지시문은 경로를 전환할 때 구성 요소가 파괴되고 다시 생성되는 것을 방지하기 위해 구성 요소를 캐시하는 데 사용됩니다. 구성 요소를 캐싱함으로써 연결 유지는 성능을 향상시키고 구성 요소 상태를 유지하며 사용자 경험을 최적화할 수 있습니다. 적용 가능한 시나리오에는 데이터를 캐시해야 하는 구성 요소, 대화형 상태를 유지해야 하는 구성 요소, 빈번한 다시 렌더링으로 인한 성능 저하를 방지해야 하는 구성 요소가 포함됩니다. 사용 시 반응형 속성과 메서드는 유지되어야 하며 비동기식 또는 기능적 구성 요소는 캐시할 수 없습니다.
