当前位置：首页 > news >正文

VUE的创建

news 来源：原创 2025/4/24 8:01:49

Vue

- Vue的创建
- 脚手架创建
- Vue的解析
- - setup函数:
  - 插值表达式
  - 数据响应式
- ⽬录和⽂件解读
- - 指令

Vue的创建

下载VScode
https://code.visualstudio.com/download
加入拓展包
点击
在这里插入图片描述

在这里插入图片描述

然后输入代码

<!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><!-- 1. 引入 vue3 源代码 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><!-- 2. 准备容器 --><div id="app"></div><script>// 3. 创建 vue3 应用并提供数据console.log(Vue)</script>
</body></html>

run后，点击F12，查看console
在这里插入图片描述
点击Object以后就可以看到vue的类，那么vue就是导入成功了

脚手架创建

安装Nodejs
Node.js
一路next即可
然后打开命令行查看是否安装成功

node -v
npm -v

然后进行换源

npm config set registry https://registry.npmmirror.com

windows系统
npm install yarn -g
npm install pnpm -g
yarn -v
pnpm -v
#然后执行命令
npm create vue@latest
create-vue
#进⼊项⽬根⽬录: 
cd 项⽬名称
npm i
npm run dev
http://localhost:5173

出现下属界面就说明对了在这里插入图片描述

Vue的解析

setup函数:

1.vue3特有的，也是vue3代码编写的入口/起点
2.在标签中用到的数据或函数，需要在setup函数中声明并返回
3.setup 中的 this 不指向Vue实例，并且在 setup 中也不会用到 this

插值表达式

{{ 表达式 }}

前端中常⻅的表达式有：
◦ 所有的字⾯量
◦ 对象.属性名
◦ 算术运算或三元运算
◦ ⽅法的调⽤

数据响应式

响应式函数 reactive
在 setup 函数中，使⽤ reactive 函数，传⼊⼀个普通对象，返回⼀个响应式数据对象

<div id="app">
<p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
// 解构出 reactive 响应式函数
const { createApp, reactive } = Vue
createApp({
setup() {
// 接收⼀个对象作为参数
// 返回⼀个响应式对象(当对象的属性值变了, 视图会跟着变)
const obj = reactive({
name: '⼩vue',
age: 9
})
return {
obj
}
}
}).mount('#app')
</script>

响应式函数ref
通常使⽤ ref 函数定义响应式数据，不限类型; 但如果是对象，推荐使⽤ reactive

<div id="app">
<!-- ref数据: 在 template 中使⽤不⽤ .value -->
<h3>{{ msg }}</h3>
<p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p>
<button @click="onClick">修改ref数据</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
// 解构出 createApp, ref 函数
const { createApp, ref } = Vue
createApp({
setup () {
// ref 定义⼀个响应式字符串
const msg = ref('Hello Vue3')
// ref 定义⼀个响应式对象
const obj = ref({
name: '⼩vue',
age: 9
})
// 点击事件
const onClick = () => {
// 修改 msg
msg.value = '你好, Vue3'
// 修改 obj 的 name 和 age 属性
obj.value.name = 'Vue3'
obj.value.age = 10
}
return {
msg,
obj,
onClick
}
}
}).mount('#app')
</script>

⽬录和⽂件解读

在这里插入图片描述
vue⽂件的组成是什么？
三部分组成 = script(JS)+template(HTML)+style(CSS)

指令

vue3 中的指令按照不同的⽤途可以分为如下 6 ⼤类：
• 内容渲染指令（v-html、v-text）

v-text（类似innerText）
◦ 使⽤语法： <p v-text="表达式"></p> ，意思是将 表达式的 值渲染到 p 标签中
◦ 类似 innerText，使⽤该语法，会覆盖 p 标签原有内容
• v-html（类似 innerHTML）
◦ 使⽤语法： <p v-html="表达式"></p> ，意思是将 表达式的 值渲染到 p 标签中
◦ 类似 innerHTML，使⽤该语法，会覆盖 p 标签原有内容
◦ 类似 innerHTML，使⽤该语法，能够将HTML标签的样式呈现出来。

• 属性绑定指令（v-bind）

v-bind:属性名="表达式"
◦ 可简写成: :属性名="表达式"

• 事件绑定指令（v-on）
作用：与DOM进行事件绑定

//语法：
<button v-on:事件名="内联语句">按钮</button>
<button v-on:事件名="处理函数">按钮</button>
<button v-on:事件名="处理函数(实参列表)">按钮</button>
//简写
v-on: 可以简写为 @

• 条件渲染指令（v-show、v-if、v-else、v-else-if）

v-show
作⽤： 控制元素显⽰隐藏
语法： v-show = "布尔表达式" 表达式值为 true 显⽰， false 隐藏
原理： 切换 display:none 控制显⽰隐藏
场景：频繁切换显⽰隐藏的场景
v-if
作⽤： 控制元素显⽰隐藏（条件渲染）
语法： v-if= "布尔表达式" 表达式值 true显⽰， false 隐藏
原理： 基于条件判断， 创建 或 移除 元素
场景： 要么显⽰，要么隐藏，不频繁切换的场景
v-else 和 v-else-if
作⽤：辅助v-if进⾏判断渲染
语法：v-else v-else-if="表达式"
需要紧接着v-if使⽤

• 列表渲染指令（v-for）
v-for 指令需要使⽤ (item, index) in ⽬标结构形式的特殊语法，其中：
item: 数组中的每⼀项
index: 每⼀项的索引，不需要可以省略
⽬标结构: 被遍历的数组/对象/数字
• 双向绑定指令（v-model）
数据变了 -> 视图的变化
视图变了 -> 数据的变化
指令是 vue 开发中最基础、最常⽤、最简单的知识点。
v-model=“响应式数据”
在这里插入图片描述