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:

Learn the key knowledge that must be mastered in the Vue framework
In-depth study of the usage and principles of Vue nextTick
Learn Vue component examples
Learn Vue.js conditional rendering
Learn Vue.js calculated properties
Simple learning vue directive

<<: Which is faster among MySQL full-text index, joint index, like query, and json query?

>>: Installation steps of Ubuntu 20.04 double pinyin input method

The National Day is coming. Use JS to implement a small tool to generate a National Day style avatar. Detailed explanation of the implementation process

Blog

Two ways to specify the character set of the html page

Detailed explanation of the functions of -I (uppercase i), -L (uppercase l), and -l (lowercase l) when compiling programs with g++ under Linux

As an entry-level Linux user, I have used simple ...

Study notes to write the first program of Vue

Table of contents

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

Summary of JavaScript Timer Types

Tomcat class loader implementation method and example code

Diagram of the Hyperledger Fabric 1.4 environment construction process under Windows 10

Vue implements card flip carousel display

The National Day is coming. Use JS to implement a small tool to generate a National Day style avatar. Detailed explanation of the implementation process

Two ways to specify the character set of the html page

Detailed explanation of the background-position percentage principle

Solutions to the problem of table nesting and border merging

Two ways to clear float in HTML

How to parse the attribute interface of adding file system in Linux or Android

Recommend

Detailed explanation of the three major front-end technologies of React, Angular and Vue

Several ways to easily traverse object properties in JS

Detailed explanation of MySQL precompilation function

hr horizontal line style example code

JavaScript web form function communication full of practical information

JavaScript to implement slider verification code

A brief discussion on front-end production: Is IE6 still necessary for compatibility?

CSS3 changes the browser scroll bar style

Sample code on how to implement page caching in vue mobile project

How to connect to a remote server and transfer files via a jump server in Linux

Detailed explanation of the functions of -I (uppercase i), -L (uppercase l), and -l (lowercase l) when compiling programs with g++ under Linux

Mysql multiplication and division precision inconsistency problem (four decimal places after division)

Nginx http health check configuration process analysis

When catalina.bat is set to UTF-8 in Tomcat, garbled characters appear on the console

Detailed explanation of Linux curl form login or submission and cookie usage