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

A brief discussion on how to elegantly delete large tables in MySQL

Table of contents 1. Truncate operation 1.1 What ...

Summary of SQL query optimization knowledge points for MySQL tens of millions of big data

1. To optimize the query, try to avoid full table...

Example code for using @media in CSS3 to achieve web page adaptation

Nowadays, the screen resolution of computer monit...

Vant uploader implements the drag-and-drop function for uploading pictures (set as cover)

The effect diagram is as follows: <!DOCTYPE ht...

JS implements Baidu search box

This article example shares the specific code of ...

How to solve the problem of blurry small icons on mobile devices

Preface Previously, I talked about the problem of...

Analysis of the situation where js determines and informs the support of CSS attributes (values)

When we want to use a new CSS feature, we always ...

Design Tips: We think you will like it

<br />Looking at this title, you may find it...

Summary of some small issues about MySQL auto-increment ID

The following questions are all based on the Inno...

Sample code for separating the front-end and back-end using FastApi+Vue+LayUI

Table of contents Preface Project Design rear end...

Detailed explanation of JavaScript animation function encapsulation

Table of contents 1. Principle of animation funct...

Overview of time configuration under Linux system

1. Time types are divided into: 1. Network time (...

Workerman writes the example code of mysql connection pool

First of all, you need to understand why you use ...

Take you to a thorough understanding of the prototype object in JavaScript

Table of contents 1. What is a prototype? 1.1 Fun...

Using keras to judge SQL injection attacks (example explanation)

This article uses the deep learning framework ker...