什么是Vue？
简单来说，vue就是可以让有写代码很爽的体验。
概念：Vue是一套构建用户界面的渐进式JavaScript框架。
什么是构建用户界面？
基于数据渲染出用户可以看到的界面
什么是渐进式？
渐进式就是循序渐进的学习，不必把Vue中的所有API都学完才能开发Vue，可以学一点开发一点。
Vue工程化项目
如何创建Vue工程化项目就不讲了，大家可以去搜一下。
认识脚手架目录及文件
主要的文件：
- node_modules------第三方模块包
- package_json------项目管理文件
- src/mainjs------整个项目打包入口
- src/App.vue------Vue代码的入口
- index.html------项目的入口网页
Vue代码会写在src ⽬录下, src下的所有代码会被 vite 打包 成 css/js/img，然后 交给index.html ，最终通过浏览器呈现在⽤⼾眼前
三个入口文件的关系
App.vue(Vue ⼊⼝ ) => main.js( 项⽬打包⼊⼝ ) => index.html( 浏览器⼊⼝ )
Vue单文件
- vue推荐采⽤ .vue 的⽂件来开发项⽬
- ⼀个vue⽂件通常有3部分组成， script(JS) + template(HTML) + style(CSS)，比如：
- ⼀个vue⽂件是 独⽴的模块，作⽤域互不影响
- style配合 scoped 属性，保证样式只针对当前 template 内的标签⽣效
- vue⽂件会被 vite 打包成 js 、 css 等，最终交给index.html 通过浏览器呈现效果
Vue单文件的好处：就是一个Vue单文件就是独立的作用域，不用担心JS变量名或者css选择器名称冲突。
指令
指令是Vue提供的带有特有v-前缀的特殊标签属性，用于提高标签数据渲染的能力.
内容渲染指令
用来辅助开发者渲染DOM元素的文本内容
• v-text（类似innerText）
◦ 使⽤语法： <p v-text=" 表达式 "></p> ，意思是将表达式的值渲染到双标签中
作用：不解析双标签
• v-html（类似 innerHTML）
◦ 使⽤语法： <p v-html=" 表达式 "></p> ，意思是将 表达式的 值渲染到双标签中
作用：解析双标签
他们各自呈现的结果
属性绑定指令
把表达式的结果与标签的属性动态绑定
语法：
- v-bind:属性名="表达式"
- 可以简写为 :属性名="表达式"
代码示例
网页展示
事件绑定指令
给元素绑定事件
语法：
- v-on: 事件名 = " 内联语句 "
- v-on: 事件名 = "处理函数 "
- v-on: 事件名 = "处理函数(实参列表) "
- v-on可以简写为@
代码示例
页面展示
还有其他重要指令，这里就不一一展示，主要是为了认识一下vue指令的内容