VUE的创建

Vue

下载VScode

https://code.visualstudio.com/download

加入拓展包

点击

然后输入代码

java 复制代码

<!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即可

然后打开命令行查看是否安装成功

java 复制代码

node -v
npm -v

然后进行换源

java 复制代码

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

java 复制代码

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

插值表达式

java 复制代码

{{ 表达式 }}

前端中常⻅的表达式有：

◦ 所有的字⾯量

◦ 对象.属性名

◦ 算术运算或三元运算

◦ ⽅法的调⽤

数据响应式

响应式函数 reactive

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

java 复制代码

<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

java 复制代码

<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）

java 复制代码

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

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

java 复制代码

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

• 事件绑定指令（v-on）

作用：与DOM进行事件绑定

java 复制代码

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

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

java 复制代码

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="响应式数据"