Study notes to write the first program of Vue

1. Write an HTML, the first Vue program
Note the view template and data

Decision loop
event

787 Principle

el attribute
data attribute
template attribute
Methods Attribute
Render Properties
computed properties
watch property

Here we use the official document CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

1. Write an HTML, the first Vue program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title> 
</head>
<body>
<!--view layer template-->
<div id="app">
    {{message}}
</div>
 <!--Import vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
    var vm = new Vue({
        el:"#app",
        //model: data:{
            message:"hello,vue"
        }
    });
 </script>
 </body>
</html>

Note the view template and data

View

Model

ViewModel: Two-way binding means that if your front-end data changes, the data in your data will also change.

You can change the data without refreshing the page and then synchronize it to the front-end display

Decision loop

if
for

event

on

787 Principle

To learn Vue, we must know its 7 properties, 8 methods, and 7 instructions

el attribute

It is used to instruct the Vue compiler where to start parsing the Vue syntax, which can be said to be a placeholder.

data attribute

It is used to organize the attributes abstracted from the view. It can be said that the view data is abstracted and stored in the data.

template attribute

Used to set the template, which will replace page elements, including placeholders.

Methods Attribute

Place the business logic in the page. JS methods are generally placed in methods.

Render Properties

Creating a real Virtual Dom

computed properties

Used to calculate

watch property

watch:function(new,old){}

Monitor changes in data

Two parameters, one returns the new value, one returns the old value

The above is the detailed content of the first program of the study note vue. For more information about vue programs, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: