Author| Jeskson

Source|Dada Front End Bistro

Paging Component

First create the project:

Paging components, do projects do not write manual code, to think about business logic, how to write, how to write is the best way to present, do the project is not in a hurry, first think about the overall framework, from the bottom of what you want to start.

Start with code and think while you're doing it will cause problems, but it will also jam your way out of the house.

Paging component, what do you want, a page?If you don't understand how to look at other people's pages, think about business logic and think about the problem as a whole.Otherwise, I will go to Baidu to see the paging effect of others.

It doesn't matter if you can't do it after reading it. How about us?

Start from the bottom, start with the smallest logic, think about what you need to think about when you do this, do a good job of local functions step by step, do a good job of this function before you do another function or page oh~

What fields do we need for the paging component?

If you think about the current page, curpage current page, size of each page, page size, total number of pages, etc., you can't think about it. It's OK to see what other people have and write code after you think about it.

Not to mention uselessness, create a project first:

Written Paging Component

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

Can I only think about that much?Then write that much before you think about what you need:

Total page number = Math.ceil (total records / records per page)

Total number of pages, 7 pages, or 6 pages, currently rounded up, 10 pages of records per page, total number of records, total number of pages.If 80 divided by 10 pages, 8 pages.

math.ceil(x) returns the smallest integer greater than or equal to the parameter x, which integrates the floating point number up.

Click Events to toggle the effects of different pages.

<div id="app">
<h1>Paging Component</h1>
//father
<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="#" class="page-link" @click.prevent="page=p">
  {{p}}
  </a>
  </li>
 </ul>
 </template>

@click.stop to prevent event bubbles

@click.prevent blocks the default behavior of events,

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

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

Paging is roughly the same.

Shopping cart components

Shopping cart components are indispensable for making a project, and interviews are also indispensable. Call me on the computer to write a shopping cart component, write it as you like. Shopping cart components are indispensable for making a shopping cart project. Writing shopping cart components is convenient and the simple book code is repetitive.

So what do you think about the shopping cart components?

Shopping cart, are there: name of goods, unit price, increase or decrease the number of items?And the total order amount?These are essential!!!

Shopping cart components do not know what is there and can go to see others first to see what is there. Shopping cart components generally contain the name of the display item, unit price, quantity purchased and the total amount of the order, by increasing or reducing the purchase data of the item, and synchronously changing the total amount of the order.

Total amount synchronization, what we can think of is what instruction, is it a v-model

Binding of v-model directives in both directions

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

Events in vue that listen for input input value changes, native events;

this.$emit(), is a trigger for passing values from parent and child components.

This. $emit (event, value)

Parent component:

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

Sub-components:

<template>
    <div>
        <div class="group">
            <label>{{title}}</label>
            <input type="text" placeholder="Please enter" @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>

When the quantity purchased changes, the total order amount changes.

At this point you should think of the computed property:

// Under the definition of the computed property:

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

The v-model two-way binding is actually an input event that is sent through the $emit method in the child component. The parent component listens for the value passed in the input event and stores it in the parent component data. The parent component then passes the value to the child component via prop, binding the value property of the Input in the child component.

Code:

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

:value = "value"

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

Use $on(eventName) to listen for events Use $emit(eventName) to trigger events

Shopping cart final code:

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

<div>
//Total Order Amount: {{amount}}Yuan
</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>
// Define Components
const CartComponent = {
 name: 'Cart',
 template: '#cart-component',
 // props data cannot be modified directly in components
 props: ['value'],
 data: function() {
  return {
   count: this.value
  };
 },
 methods: {
  // v-model directive bidirectional binding, modifying parent component content
  updateCount: function() {
   // Trigger input Event
   this.$emit('input',this.count);
  }
 }
};

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

vue:In custom components v-model And bi-directional binding of parent and child components

<div id="app">
    <p>{{message}}</p>
    <input type="text" v-model='message'>
</div>
<script>
    var vueApp = new Vue({
        el:'#app',
        data:{
            message:"I'm actually a grammatical sugar"
        }
    })
</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: "I'm actually a grammatical sugar"
        }
    })
</script>

The following two types are approximately equal to:

<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: 'test data'
        },
    })
</script>

This is the end of the actual application development of vue. Please look forward to it!!!

Don't forget to leave a footprint of your study [compliment + collection + comment]

Author Info:

Big Front End Development, Locate Front End Development Technology Stack Blog, PHP Background Knowledge Point, web Full Stack Technology Field, Data Structure and Algorithms, Network Principles and other understandable presentations to small partners.Thank you for your support and love!!!

If there are inadequacies in this number (e.g. copyright or other issues), please contact us in time to make corrections, which will be dealt with at the first time.

Please compliment!Because your approval/encouragement is my greatest motivation to write!

Welcome to your attention Dada CSDN!

This is a quality, attitudinal blog