Vue3脚手架和指令

embedded/2024/10/22 19:20:17/

什么是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指令的内容