current position:Home>Vue3 implements hello and counter

Vue3 implements hello and counter

2021-08-25 02:52:47 Flying eagle

The articles before Xiaobian are js and ts Basics , After the foundation is finished , It's time to challenge the mainstream framework of the front end , Next, Xiaobian mainly aims at the popular Vue3 Combined with examples , Let's discuss with you Vue The basic grammar and Vue3 Some new features provided in , I hope Xiaobian can grow up with you , On the way to the front , The farther you go .
Our common html Templates , It's basically like this

<!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>
    
</body>
</html>

According to our previous knowledge , Want to use Vue.js, Be sure to introduce the corresponding js file , Now , Our files become like this

<!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>
    <script src="https://unpkg.com/[email protected]"></script><!--  You can import... According to the actual file path  -->
</head>
<body>
    
</body>
</html>

We can write such code in code , Show it on the page hello world

<!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>
    <script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
Vue.createApp({
  template:'<div>hello world</div>' //  Define templates 
}).mount("#root") //  Set mount point 
</script>
</html>

Of course , We can also write the code more Vue One o'clock , Just like this.

<!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>
    <script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
Vue.createApp({
  data(){
    return {
      content:'hello world'
    }
  },
  template:'<div>{{content}}</div>' //  Define templates 
}).mount("#root") //  Set mount point 
</script>
</html>

Maybe you see such strange code , There will be some circles , But today is just familiar , The follow-up Xiaobian will explain these problems one by one . The following is Counter. The realization is in every second , Add one to the number on the page , With the help of Vue, The code can be written like this

<!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>
    <script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
Vue.createApp({
    data(){
        return {
            content:1
        }
    },
    mounted(){ //  Life cycle function , The follow-up meeting will specifically explain 
        setInterval(() => { // es6 Arrow function in 
            this.content += 1 // this Point to Vue example 
        },1000)
    },
    template:'<div>{{content}}</div>'
}).mount("#root")
</script>
</html>

The above is with the help of Vue.js To achieve two basic functions , You may come into contact with Xiaobian at the beginning Vue Same stupid circle , But it doesn't matter , I believe that after a period of familiarity , There must be a qualitative improvement , Come on together !
You can also scan QR codes , Pay attention to my WeChat official account , Snail stack .

copyright notice
author[Flying eagle],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210825025243847x.html

Random recommended