Use Vue3 for data binding and display list data

Use Vue3 for data binding and display list data

1. Comparison with Vue2

1. New features of Vue3

  • Re-implementation of data response ( ES6 proxy replaces Es5 's Object.defineProperty )
  • The source code is rewritten using ts , with better type inference
  • New Virtual DOM algorithm (faster, smaller)
  • Provides composition api for better logic reuse and code organization
  • Custom renderer ( app , mini program, game development)
  • Fragment , templates can have multiple root elements

2. Comparison of response principles between Vue2 and Vue3

Vue2 uses Object.defineProperty method to implement responsive data

shortcoming:

  • Unable to detect dynamic addition and removal of object properties
  • Unable to detect changes to array subscript and length properties

Solution:

  • Vue2 provides Vue.$set to dynamically add properties to objects
  • Vue.$delete dynamically deletes object properties

3. Rewrite array methods to detect array changes

Vue3 uses proxy to implement responsive data

advantage:

  • Can detect dynamic addition and deletion of proxy object attributes
  • You can see the changes in the subscript and length attributes of the measurement array.

shortcoming:

  • es6 proxy does not support lower version browser IE11
  • A special version will be released to support IE11

The above quotes "[Comparison of Vue2 and Vue3]" (https://www.cnblogs.com/yaxinwang/p/13800734.html)

4. Intuitive experience

At present, Vue2 is still the main one in actual work

Vue3 includes mounted , data , methods , all wrapped up in a setup（）

2. Data binding example using Vue3

In the previous article Vue3 integrated HTTP library axios details, we have realized the return of background data and displayed it on the front page (although it is in the console), but this only means that 90% of it has been completed.

The next step is how we return data from the background interface and how to display it on the page.

1. Use ref to implement data binding

We still need to modify it in home , after all, it is displayed on the page, so we only need to modify Home part of the code. The specific sample code is as follows:

<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <template #title>
                <span>
                  <user-outlined />
                  subnav 1
                </span>
          </template>
          <a-menu-item key="1">option1</a-menu-item>
          <a-menu-item key="2">option2</a-menu-item>
          <a-menu-item key="3">option3</a-menu-item>
          <a-menu-item key="4">option4</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
                <span>
                  <laptop-outlined />
                  subnav 2
                </span>
          </template>
          <a-menu-item key="5">option5</a-menu-item>
          <a-menu-item key="6">option6</a-menu-item>
          <a-menu-item key="7">option7</a-menu-item>
          <a-menu-item key="8">option8</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
                <span>
                  <notification-outlined />
                  subnav 3
                </span>
          </template>
          <a-menu-item key="9">option9</a-menu-item>
          <a-menu-item key="10">option10</a-menu-item>
          <a-menu-item key="11">option11</a-menu-item>
          <a-menu-item key="12">option12</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      {{ebooks}}
      <pre>
{{ebooks}}
      </pre>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'Home',
  setup(){
    console.log('set up');
    const ebooks = ref();
    onMounted(()=>{
      axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
        console.log("onMounted");
        const data=response.data;
        ebooks.value=data.content;
      })
    })
    return {
      eBooks
    }

  }
});
</script>

Knowledge points:

  • const ebooks=ref() ; This is a responsive data, and Vue3 adds ref to define responsive data, which means that ebooks is a real-time data display;
  • The value assigned to ref is value ;
  • Use {{variable}} to get the value;

Recompile, start the service, and see the results as follows:

2. Use reactive to implement data binding

Similarly, modify it in home . The sample code is as follows:

<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <template #title>
                <span>
                  <user-outlined />
                  subnav 1
                </span>
          </template>
          <a-menu-item key="1">option1</a-menu-item>
          <a-menu-item key="2">option2</a-menu-item>
          <a-menu-item key="3">option3</a-menu-item>
          <a-menu-item key="4">option4</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
                <span>
                  <laptop-outlined />
                  subnav 2
                </span>
          </template>
          <a-menu-item key="5">option5</a-menu-item>
          <a-menu-item key="6">option6</a-menu-item>
          <a-menu-item key="7">option7</a-menu-item>
          <a-menu-item key="8">option8</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
                <span>
                  <notification-outlined />
                  subnav 3
                </span>
          </template>
          <a-menu-item key="9">option9</a-menu-item>
          <a-menu-item key="10">option10</a-menu-item>
          <a-menu-item key="11">option11</a-menu-item>
          <a-menu-item key="12">option12</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      <strong>Using ref for data binding results:</strong><p></p>
      {{ebooks1}}
      <p></p>
      <pre>
{{ebooks1}}
      </pre>
      <strong>Using ReactiveF for data binding results:</strong><p></p>{{ebooks2}}
      <p></p>
      <pre>
{{ebooks2}}
      </pre>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'Home',
  setup(){
    console.log('set up');
    //Use ref for data binding const ebooks=ref();
    // Use reactive data binding const ebooks1 = reactive({books:[]})
    onMounted(()=>{
      axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
        console.log("onMounted");
        const data=response.data;
        ebooks.value=data.content;
        ebooks1.books=data.content;
      })
    })
    return {
      ebooks1: ebooks,
      ebooks2:toRef(ebooks1,"books")
    }

  }
});
</script>

Knowledge points:

Need to import reactive and toRef from vue ;
In reactive({books:[]}) , reactive （） must store objects. Here I add an empty collection in books .
toRef(ebooks1,"books") converts books into a responsive variable;
Obviously, using reactive is more troublesome. You must use both reactive and ref in actual project development.
The trouble with using ref is that when using a variable, you need to add value whether you are getting it or using it.

Recompile, start the service, and see the results as follows:

3. Final Thoughts

The sense of accomplishment that front-end development gives people is more direct, because you can see it intuitively, unlike the business logic code in controller or service , where you have to write a lot and you can't understand the meaning. But this does not affect my love for coding .

This is the end of this article about using Vue3 for data binding and displaying list data. For more relevant Vue3 data binding and displaying list data content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue3 list interface data display details

<<:  MySQL password contains special characters & operation of logging in from command line

>>:  How to use docker to deploy dubbo project

Recommend

An example of using Dapr to simplify microservices from scratch

Table of contents Preface 1. Install Docker 2. In...

mysql update case update field value is not fixed operation

When processing batch updates of certain data, if...

A brief discussion on how to cancel requests and prevent duplicate requests in axios

Table of contents Preface Core - CancelToken Prac...

Tutorial analysis of quick installation of mysql5.7 based on centos7

one. wget https://dev.mysql.com/get/mysql57-commu...

You really need to understand the use of CSS variables var()

When a web project gets bigger and bigger, its CS...

Brief analysis of the introduction and basic usage of Promise

Promise is a new solution for asynchronous progra...

Solution to the problem that the page is blank when opening the page with source file in IE7

question: My blog encoding is utf-8. Sometimes whe...

Detailed explanation of persistent storage of redis under docker

In this chapter, we will start to operate redis i...

Analysis of Vue element background authentication process

Preface: Recently, I encountered a management sys...

Interaction in web design: A brief discussion on paging issues

Function: Jump to the previous page or the next p...

How to monitor global variables in WeChat applet

I recently encountered a problem at work. There i...

Detailed explanation of the use of MySQL sql_mode

Table of contents Preface sql_mode explained The ...

Sample code for displaying reminder dots in the upper left or upper right corner using CSS3

Effect picture (if you want a triangle, please cl...

The whole process of installing gogs with pagoda panel and docker

Table of contents 1 Install Docker in Baota Softw...

Detailed explanation of the use of MySQL mysqldump

1. Introduction to mysqldump mysqldump is a logic...