Vue快速入门[初入门易犯错的点都做了标注]
准备
1. 引入Vue模块（官方提供）
<script type="module">//module module module module module module
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';//creatApp外有大括号
</script>
2. 创建Vue程序的应用实例，控制视图的元素
createApp({ }).mount("#app");//#app外是双引号
3. 准备元素(div)，被Vue控制
<div id="app">
</div>
数据驱动视图
1. 准备数据
data() {//data后有括号()
return {//别忘了return
message: "Hello Vue"
}
}
2. 通过插值表达式渲染页面
<h1>{{message}}</h1>//别忘了加div和id标志
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-快速入门</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h1>{{count}}</h1>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data() {
return {
message: 'Hello Vue',//字符串要用单引号引起来（js语法习惯） 后面别忘了逗号‘，’
count: 100
}
}
}).mount('#app');//注意引号也要把#引起来
</script>
</body>
</html>
浙公网安备 33010602011771号