Vue 학습의 6(전역 가져오기 패키지, 그림 게으름 불러오기, 제3자 jq 모듈 가져오기, 루트, 렌더링 프로젝트에 적용)

글로벌 타사 패키지 가져오기 방법

1.jq전역new webpack.ProvidePlugin({$:"jquery",jQuery:"jquery","window.jQuery":"jquery"})

2.axios 발송 요청의 전역axios.defaults.baseURL="" Vue.prototype.$axios=axios

3.common.js 파일의 export default {axioHost: "}, import axios from'common.js'

제품 목록 렌더링

1.axios 발송 요청

2.v-for 렌더링

그림 불러오기 게으름 실현vue-lazyload

설치

import xx from ‘vue-lazyload’

Vue.use(‘xx’,{require:’./xxx/xxx’})

src를 v-lazy

로 교체
상품 상세 정보(template, style scoped,script=>export default{})
상품 리스트

상품 목록에서 클릭하면router-link를 통해 터치

man.js에서 루트 규칙 설정 import goodsInfo{parth:'/site/goodsinfo:goodsID',component:..}

상품 기본 정보 표시

data(){ return {goodsInfo:{}}}

getGoodsInfo(){res={this.goodsInfo=res.data.message},err=>console.log(err)}

상품 이미지, 확대 기능(jq22 상품 상세 검색)

style scnoped=>@import “xx.css”

script=> import “xx.js”

정적 구조 html 데이터=>goodsCount

업데이트 생명주기 갈고리에 초기화

클릭하여 상품 추천 전환

watch에서 $route를 감시하고 리셋 함수를 자동으로 실행하여 리셋 함수에 네트워크 요청을 보냅니다

상품 소개와 상품 평론

동적 전환 상품 소개와 상품 평론

디스플레이 내용 전환v-show="isShowContent=!isShowContent"v-show 디스플레이:none 원리 이용

류명:class="{selected:isShowContent}"

대상점 내용undefined 처리 방안이 자주 나타납니다

//content is no defined; 
//        v-if="goodsInfo.goodsinfo"        
// undefined.content    ,  axios            ;
<div v-if="goodsInfo.goodsinfo" v-show='isShowContent' class="tab-content entry" style="display: block;">
        <div v-html="goodsInfo.goodsinfo.content">div>
div> 

iview의 압정 모듈을 사용하여 고정 전환 표시줄을 굴림

설치 iview

설치 패키지 babel-plugin-import 필요에 따라 불러오기

생성.babelrc 파일

필요에 따라 가져오기import { Affix } from "iview";;export default{components:{Affix}}

패키지는...탭

에 있음

element-ui로 페이지 구성 요소 구현

데이터 페이지 번호 페이지Index:1, 페이지Size:5

html에서 페이지 구성 요소 찾기

methods에 클릭 이벤트handleSizeChange,handleCurrentChange

추가

바인딩pageIndex 및 pageSize

@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageIndex"
:page-sizes="[1, 2, 5, 10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="goodsComment.totalcount">
</el-pagination>

의견 제출

평론 내용 v-모델,ref 속성 가져오기ref="commentRef" this.$refs.commentRef.value

클릭 이벤트로 제출 요청

평론이 성공한 후에 json 데이터가 입력한 내용을 비우고 입력한 내용을 발휘하여 사용자의 입력에 성공했음을 알립니다. 첫 페이지의 데이터를 다시 불러올 때 입력한 내용을 비공판단this.commenttxt.trim().length == 0하고 요소-ui 알림 상자

로

오늘 설치한 패키지

첫 번째 설치: 가방: vue-lazyload 응용 장면: 쇼핑몰 이미지 분류 기능을 실현하는 이미지 게으름 마운트 설치 방식: cnpm install vue-lazyload –save/-S

두 번째 설치: 패키지: iview 응용 장면: 압정 효과 사용 시 설치 방식: cnpm install iview –save/-S

세 번째 설치: 패키지:babel-plugin-import 응용 장면: 필요에 따라 iview 구성 요소를 가져오는 설치 방식:cnpm install babel-plugin-import –save/-S