Vue 페 이 징 효과 및 카 트 기능

페이지 구성 요소
우선 항목 만 들 기:
페이지 구성 요소,프로젝트 를 할 때 손 으로 쓴 코드 를 쓰 지 말고 업무 논리,어떻게 쓰 는 지,어떻게 쓰 는 것 이 가장 좋 은 표현 방식 인지 생각해 야 합 니 다.프로젝트 를 하 는 것 이 급 하지 않 습 니 다.먼저 전체적인 구 조 를 잘 생각해 야 합 니 다.밑바닥 에서 가장 원 하 는 것 이 무엇 인지 부터 시작 해 야 합 니 다.
코드 를 먼저 움 직 이면 서 생각 하 는 것 은 문제 가 될 뿐만 아니 라,케이스 도 걸 려 서 중도 에 출가 하 게 할 것 이다.
페이지 구성 요소,어떤 내용 을 원 하 십 니까?페이지 입 니까?모 르 면 다른 사람의 페이지 가 어떻게 되 는 지 보고 업무 논 리 를 고려 해 전체적으로 문 제 를 생각 할 수 있다.그렇지 않 으 면 내 가 바 이 두 에 가서 다른 사람의 페이지 효 과 를 볼 것 이다.

보고 못 해도 상관 없어 요.우 리 는 요?
밑 에서 출발 하여 가장 작은 논리 부터 시작 할 수 있 습 니 다.이것 을 하려 면 무엇 을 고려 해 야 하 는 지,한 걸음 한 걸음 씩 부분 적 인 기능 을 해 야 합 니 다.이 기능 이 잘 되 어야 다른 기능 이나 페이지 를 할 수 있 습 니 다.
페이지 구성 요소 에 필요 한 필드 는 어떤 것 이 있 습 니까?
생각해 보 세 요.현재 페이지,있 는 지,curpage 현재 페이지,각 페이지 의 크기,pagesize,총 페이지 수,totalk,등등.고려 할 수 없 는 것 은 괜 찮 습 니 다.다른 사람의 것 이 무엇 인지 보고 생각 한 후에 코드 를 쓰 는 것 이 빠 릅 니 다.
무용 하 다 고 말 하지 않 고 먼저 항목 을 만 듭 니 다:

페이지 구성 요소

props: ['total'],
data: function() {
 return {
 page: 1, //     
 pagesize: 10 //        
 });
},

그렇게 밖 에 생각 이 안 나 지 않 아 요?그럼 그렇게 많이 쓰 고 필요 한 게 뭔 지 생각해 보 세 요.
총 페이지=Math.ceil(총 기록 수/각 페이지 기록 수)
총 페이지 수,7 페이지 또는 6 페이지,현 재 는 위로 올 라 가 고 한 페이지 당 10 페이지,총 기록 수,총 몇 페이지 입 니까?예 를 들 어 80 을 10 페이지,8 페이지 로 나눈다.
math.ceil(x)은 매개 변수 x 와 같은 최소 정수,즉 부동 소수점 을 위로 올 리 는 것 을 되 돌려 줍 니 다.
이 벤트 를 누 르 면 다른 페이지 의 효 과 를 전환 합 니 다.

<div id="app">
<h1>    </h1>
// 
<page-component :total="total"></page-component>
</div>

<template id="page-component">
 <ul class="pagination">
 <li :class="p == page ? 'page-item active' : 'page-item'"
 v-for="p in pagecount">
 <a href="#" rel="external nofollow" class="page-link" @click.prevent="page=p">
 {{p}}
 </a>
 </li>
 </ul>
 </template>

@click.stop 이벤트 거품 방지
@click.prevent 이벤트 의 기본 행동 을 막 습 니 다.

<script src="vue.js"> </script>
<script>
//     
const PageComponent = {
 name: 'PageComponent',
 template: '#page-component',
 props: ['total'],
 
 data: function() {
 return {
 page: 1, //     
 pagesize: 10 //        
 };
 },
 
 computed: {
 pagecount: function() {
 //    
 return Math.ceil(this.total / this.pagesize);
 }
 }
 
};

//   Vue    
const app = new Vue({
 el: '#app',
 data: {
 total: 35
 },
 
 components: {
 PageComponent
 }
 
});
</script>

페이지 별 효 과 는 대체로 이렇다.
카 트 구성 요소
카 트 구성 요 소 는 프로젝트 를 하 는 데 없어 서 는 안 되 는 것 입 니 다.면접 도 마찬가지 입 니 다.걸핏하면 저 에 게 카 트 의 구성 요 소 를 쓰 라 고 했 습 니 다.쓰 면 쓰 겠 습 니 다.카 트 를 할 때 쇼핑 몰 프로젝트 를 하 는 데 없어 서 는 안 됩 니 다.카 트 구성 요 소 를 잘 쓰 면 편리 하고 간단 한 책 코드 의 중복 성 입 니 다.
그렇다면 카 트 구성 요 소 는 어떤 내용 이 있 는 지 생각해 보 세 요.
카 트,상품 명,단가,아 이 템 삭제 수량 증가?그리고 주문 총 금 액 수 는 요?이것들 은 없어 서 는 안 될 것 이다!!!

카 트 구성 요 소 는 무엇이 있 는 지 모 르 지만 다른 사람의 것 을 먼저 볼 수 있 습 니 다.무엇이 있 는 지 보 세 요.카 트 구성 요 소 는 일반적으로 상품 의 이름,단가,구 매 수량 과 주문 총 금액 을 표시 하고 상품 의 구 매 데 이 터 를 증가 하거나 감소 시 키 며 주문 의 총 금액 을 동시에 변경 합 니 다.
총 금액 동기 화,우리 가 생각 할 수 있 는 것 은 어떤 명령 을 사용 하 는 것 입 니까?v-model 입 니까?
v-model 명령 의 양 방향 연결

// v-model      
updateCount: function() {
 //   input  
 this.$emit('input', this.count);
}

vue 에서 input 입력 값 변 화 를 감청 하 는 이벤트,원생 이벤트;
this.$emit()는 트리거 로 부자 구성 요소 의 전송 값 입 니 다.
this.$emit(이벤트,값)
부모 구성 요소:

<Group title="   " v-model="username"></Group>

하위 구성 요소:

<template>
 <div>
  <div class="group">
   <label>{{title}}</label>
   <input type="text" placeholder="   " @input="changeData()" v-model="val">
  </div>
 </div>
</template>

<script>
export default {
 props:["title"],
 data () {
  return {
   val:""
  }
 },
 methods:{
  changeData:function(){
   this.$emit('input',this.val);
  }
 }
}
</script>

상품 의 구 매 수량 이 변 할 때 주문 총 금액 도 다시 바뀐다.
이 럴 때 computed 속성 을 생각해 야 합 니 다:
//coptute d 속성 정의:

amount: function() {
 var money = 0;
 this.goodslist.forEach(goods => {
 money += parseInt(goods.count) * parseInt(goods.price);
 });
 return money;
}

v-model 양 방향 바 인 딩 은 실제 하위 구성 요소 에서$emit 방법 으로 보 내 는 input 이벤트 입 니 다.부모 구성 요소 감청 input 이벤트 에서 전달 하 는 value 값 을 부모 구성 요소 data 에 저장 한 다음 부모 구성 요 소 는 prop 형식 으로 하위 구성 요소 value 값 을 전달 하고 하위 구성 요소 에서 Input 의 value 속성 을 연결 합 니 다.
코드:

//    
<myDa :value="value" @input="value=$event"></my-comp>

:value = "value"

<input type="text" @input="$emit('input', $event.target.value)" :value="value">

하위 구성 요소 감청 이벤트 사용
emit(eventName)트리거 이벤트
카 트 최종 코드:

<div id="app">
<div v-for="goods in goodslist">
<p>    ：{{goods.name}}</p>
<p>  :{{goods.price}}</p>
<cart-component v-model="goods.count">
</cart-component>
<hr>
</div>

<div>

주문 총 금액:{{amount}원

</div>
</div>

<template id="cart-component">
<div class="cart">
<button @click="count--; updateCount();">
-
</button>

<input type="text" v-model="count" 
@input=updateCount()">

<button @click="count++; updateCount();"> 
+ 
</button>
</div>
</template>

<script>
//     
const CartComponent = {
 name: 'Cart',
 template: '#cart-component',
 //           props  
 props: ['value'],
 data: function() {
 return {
 count: this.value
 };
 },
 methods: {
 // v-model      ,       
 updateCount: function() {
 //   input  
 this.$emit('input',this.count);
 }
 }
};

//   vue    
const app = new Vue({
 el: '#app',
 data: {
 goodslist; [{
 name: 'apple',
 price: 2,
 count: 2
 },{
 name: 'dada'，
 price: 222222222222,
 count: 0
 }]
 },
 
 computed: {
 //        
 amount: function(){
 var money=0
 this.goodslist.forEach(goods=>{
 money += pareseInt(goods.count) * parseInt(goods.price);
 });
 return money;
 }
 },
 components: {
 CartComponent
 }
});
</script>

vue:사용자 정의 구성 요소 중 v-model 및 부자 구성 요소 의 양 방향 연결

<div id="app">
 <p>{{message}}</p>
 <input type="text" v-model='message'>
</div>
<script>
 var vueApp = new Vue({
  el:'#app',
  data:{
   message:"         "
  }
 })
</script>
<div id="app">
 <p>{{message}}</p>
 <input type="text" v-bind:value='message' @input='message = $event.target.value'>
</div>
<script>
 var vueApp = new Vue({
  el: '#app',
  data: {
   message: "         "
  }
 })
</script>

다음 두 가지 약 은 다음 과 같다.

<custom v-model='something'></custom>
<custom :value="something" @input="value => { something = value }"></custom>
<div id="app">
 <h1>{{message}}</h1>
 <test-model v-model='message'></test-model>
</div>
<script>
 Vue.component('test-model', {
  template: ` <input v-bind:value='value'
     v-on:input="$emit('input', $event.target.value)">`,
 })
 var vueApp = new Vue({
  el: '#app',
  data: {
   message: '    '
  },
 })
</script>

vue 실제 응용 개발 은 여기 서 끝 났 습 니 다.앞으로 기대 하 세 요!!!
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 페이지 효과 와 카 트 기능 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!