https://v1-cn.vuejs.org/guide/installation.html
加入下载界面之后选择独立安装
1:常用插件
Vue 3 Snippets 是一个专门为 Vue 3 开发者设计的代码片段扩展，可以快速生成 Vue 3 的常见代码结构（如组件模板、Composition API 等
Auto Close Tag 标签自动补全插件
open in browser 快速在默认浏览器中打开 HTML 文件
Live Server 快速启动一个本地开发服务器，并具有实时重载功能，非常适合前端开发工作
HTML CSS Support 它为HTML文件中的CSS类名和 id 提供智能提示和自动补全功能
JavaScript (ES6) code snippets 它是一个内置的代码片段扩展，它提供了一系列常用的ES6语法片段，帮助你快速生成代码。
在JavaScript文件中，输入特定的前缀，然后按 Tab 键，VSCode会自动生成对应的代码片段
第一个案例 手写一个最简单的页面，使用浏览器打开
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="aa">
我是谁
</div>
</body></html>
安装完 上面的插件之后在在新页面空文件中输入! 然后回车可以直接生成一段模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title></head>
</body>
</html>
Live Server 安装完成之后,通过服务气的方式打开页面 默认端口是 5500
http://127.0.0.1:5500/02.html 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title></head>
<div></div></body>
</html>
2:vue 准备工作
下载vue
https://v1-cn.vuejs.org/guide/installation.html 进入该网站，滑动到独立版本 可以看到一个开发版本一个生产版本
下载下来之后放到我们vscode 的工作目录下就可以了
编写代码并引入 开发=版本的 vue 写一个简单的案例(插值语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue学习</title>
<script src="../vue/vue.js"></script></head>
<body>
<!DOCTYPE html>
<!-- <div id="app">{{ message }}</div> -->
<!--
1:只会匹配第一个 存在多个id相同的后面的不生效
2: 自動匹配選擇器下面的屬性相同的節點
-->
<!--
<div id="app">
<p> {{ message }}</p>
</div>
-->
<div id="app">
<p>
<h1> {{ message }}</h1>
</p>
</div></body>
<script>
//插值语法
var vm = new Vue({ //创建一个Vue对象
el: "#app", //el 是element的缩写，这句表示使用id选择器讲id为app的元素绑定到VUE对象
data: { //data 表示绑定的数据
message: 111
}
})
console.log(vm);</script>
</html>
============================================================
简单的数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue/vue.js"></script></head>
<body>
<p>修改输入框的值，查看效果：</p><div id="app">
<p>{{ message }}</p>
<!-- 简写方式 -->
<input v-model="message">
</div>
<script>
//验证数的双向绑定
var vm = new Vue({
el:"#app",
data: {
message : 1
}
})</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。