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
