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 .
