Vue3脚手架和指令
什么是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单文件
1.
vue推荐采⽤
.vue
的⽂件来开发项⽬
2.
⼀个vue⽂件通常有3部分组成，
script(JS) + template(HTML) + style(CSS)，比如：
3.
⼀个vue⽂件是 独⽴的模块，作⽤域互不影响
4.
style配合
scoped
属性，保证样式只针对当前 template 内的标签⽣效
5.
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指令的内容