vue快速入门
程序员文章站
2022-06-06 19:26:00
...
下载安装VScode
安装三个插件
live server
vetur
Vue.js with Typ…
配置setting
{
"editor.formatOnType": true,
"editor.formatOnSave": true,
"editor.fontSize": 18,
"liveServer.settings.donotShowInfoMsg": true,
}
新建项目
在app.js 实例化vue
// 实例化vue
new Vue({
el: "#vue-app",
data() {
return {
name: "aaaa",
qq: "123"
}
}
});
index.html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue cdn</title>
</head>
<body>
<div id="vue-app">
<h1>hello, {{name}}</h1>
<h1>你的QQ， {{qq}}</h1>
</div>
</body>
<script src="app.js"></script>
</html>```