[front end notes] v. getting to know VUE

1, Introduction

vue is a progressive framework for building user interfaces:

Build user interface: as the name suggests, it is the framework that can be used to write the interface
Progressive: you can either transform a small part of a page or build a complex website from scratch

The core idea of vue framework is data driven: vue framework will monitor the changes of data. Whenever the data changes, vue framework will re render the page with new data without manual DOM operation

2, Vue instance

Create instance

First+ Tab creates an html instance, and then introduces vue source code into the body

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">hello world</div>
    <!-- introduce vue Source code -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./sch_ran_vue.js"></script>
</body>

</html>

sch_ran_vue.js file:

// Create a vue instance
const vm = new Vue({
  el: '#app',
  data: {
    name: 'hello world'
  }
})

alert(vm.name);

The above code introduces the source code of Vue through the script tag, so that Vue's constructor Vue can be used in the global environment
Then, in the js code, the new operator is used to create a vue instance
When creating a Vue instance, an object is also passed into the Vue constructor, which has two properties: el and data:

Data: Vue's core idea is data driven. Here, data refers to the data in the data attribute. Vue framework will monitor the changes of this data and re render the page

The vue instance will automatically map the data in the data attribute to the VM instance itself. Both vm.name and vm.$data.name can get the name value of the instance

el: the el attribute is the link between vue instances and html

The lifecycle of the instance

Like the el and data attributes described above, the life cycle is actually some attributes passed when initializing vue instances, but these attributes are functions. There are two most commonly used life cycles:

created
mounted

// Create a vue instance
const vm = new Vue({
  el: '#app',
  data: {
    name: 'hello world'
  },
  // Specify the created lifecycle function
  created() {
    alert('created');
  },
  // Specifies the mounted lifecycle function
  mounted() {
    alert('mounted');
  },
})

The following figure describes the complete life cycle and the time point at which each life cycle is triggered

Three. Template syntax

interpolation

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">{{name}}</div>
	<!-- introduce vue Source code -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./sch_ran_vue.js"></script>
</body>
</html>

// Create a vue instance
const vm = new Vue({
  el: '#app',
  data: {
    name: 'hello world'
  }
})

The {{name}} on the run discovery page is replaced by hello world. This {}} double brace syntax is called template syntax. The content contained in the middle is interpolation, which will be parsed into variables or single expressions

// Create a vue instance
const vm = new Vue({
  el: '#app',
  data: {
    name: 'hello world'
  }
})


// Change the name attribute every 500ms
setInterval(function() {
  vm.name = Math.random();
}, 500);

When running, you can see that a bunch of numbers change around. This is because the setInterval function periodically changes the name in the data

If you do not use the vue framework to realize this function, you need to find the element node with id app through DOM operation and change its innerText

After using the vue framework, the focus level only needs to focus on the data level - data, and there is no need to write repetitive DOM operations

reference resources:
Getting started with the front end: https://www.zhihu.com/question/32314049/answer/713711753
Natural code: https://www.qsxqd.com/

Posted by Skawn on Tue, 07 Sep 2021 17:53:04 -0700

Programmer Group