簡述
本文使用cdn方式安裝vue,主要介紹vue3的简单案例,期望能对读者起到启发作用。
快速入门
demo
<!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>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
//創建應用
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/5c5b499d4e9456b5b47e167009cdc969.png)
案例流程
指定容器
<div id="app">{{ message }}</div>
创建Vue实例
vue使用前必须先创建应用,创建应用前必须绑定唯一的id,实例的绑定有两种语法,直接嵌入实例内部,一种灵活地使用mount绑定id
//创建应用 createApp
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
//绑定Vue实例方法
new Vue({
el:'#t1',
data:{
name:'lin',
address:'惠州'
}
})
引用
每个dom元素在vue认为都是一个容器,容器地id与vue实例id相同时候,可以绑定到容器上