Vue3基础知识

Vue3基础知识

vue中使用到的命令

npm install package (-g)     # npm下载包
npm uninstall package (-g)   # npm 删除包
yarn add package             # yarn 下载包
yarn remove package          # yarn 删除包
npm create vue@latest        # 创建vue脚手架
npm run dev                  # 启动项目     

0. Vue必备插件

VSCODE插件

1. Vue Offical 语法高亮

2. Vue3 snippets 提供Vue代码片段 vbase

3. Path Intellisense 路径自动补全

4. Auto Import 自动导入模块

5. Auto Close Tag 自动闭合HTML标签

6. Auto Rename Tag 自动重命名HTML标签

1. setup函数和插值表达式

Vue：一套构建用户界面的渐进式JavaScript的框架

• 构建用户界面：基于数据生成标签结构，配合CSS样式，可以渲染出漂亮的用户界面

• 渐进式：循序渐进的学习，学多少可以用多少

• 框架：一种需要遵守的规则

1.1 setup函数

1. setup函数vue3的入口函数

2. 在标签中用到的数据或者函数，需要在setup中声明并放在对象中返回

3. setup中this不指向Vue实例，在setup函数中不会用到this

1.1.1 完整写法

<srcipt>export default {setup() {return {}}}
</script>

1.1.2 简写

<script setup></script>

1.2 插值表达式

将表达式结果展示在双标签中

{{}}

前端中常见的表达式：

1. 字面量以及变量

2. 对象.属性名

3. 算数运算和三元表达式

4. 方法调用

2. Vue中的数据响应式

数据响应式：数据驱动视图，当数据发生改变时，视图会根据数据的改变而改变。（JS当中，数据变了需要操作DOM将视图改变）

2.1 reactive

从Vue中解构出reactive函数，在setup中使用reactive函数，传入普通对象，返回结果是一个响应式对象。

setup() {const obj = reactive({}) // 参数只能是对象
}

2.1 ref

使用ref定义响应式数据，不限类型。ref本质返回的是一个响应式数据对象。

<div id="app">{{ msg }}</div>
setup() {const msg = ref("hello world")const obj = ref({name: 'vue'})// js中操作ref数据，需要先.valueconst operate = () => {msg.value = "world hello"obj.value.name = "vue3" }return {msg,obj}
}

注意：操作ref中创建的数据，在js中需要先.value，template不可.value。

reactive与ref选择：如果数据是对象并且字段名也确定，推荐使用reactive，其他都使用ref。

3. 3个入口文件的作用

1. main.js 项目打包的入口文件

2. App.vue Vue代码的入口文件也称Vue的根组件

3. index.html 项目的入口网页

三者的关系：

App.vue -> main.js -> index.html

main.js是 Vue 代码通向网页代码的桥梁，非常关键。

4. 指令

• 内容渲染指令（v-html、v-text）

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

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

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

• 列表渲染指令（v-for）

• 双向绑定指令（v-model）

4.1 内容渲染指令

v-text类似innerText，将表达式的值渲染到p标签中，会覆盖p标签原有的内容。

<p v-text="表达式"></p>

v-html类似innerHTML，能够解析HTML标签，会覆盖p标签原有的内容。

<p v-html="表达式"></p>

4.2 属性绑定指令

v-bind把表达式的结果与标签的属性动态绑定。

<img v-bind:src="表达式" />
<img :src="表达式" />        #简写 

4.3 事件绑定指令

v-on:事件名，给元素绑定事件。

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

4.4 条件渲染指令

v-show控制元素的显示与隐藏，表达式值为true显示，false隐藏。原理基于display:none控制。

<div v-show="表达式"></div>

v-if、v-else-if、v-else控制的元素显示与隐藏，表达式值为true显示，false隐藏。原理基于操作DOM创建或移除控制。

<div v-if="表达式"></div>
# 注意：v-else-if和v-else需要紧接v-if使用
<div v-else-if="表达式"></div>    
<div v-else="表达式"></div>

v-show：频繁切换隐藏的场景使用；v-if：不频繁切换隐藏的场景使用

4.5 列表渲染指令

v-for遍历数组

<div v-for="(item , index) in array"></div>

v-for遍历对象

<div v-for="(value , key , index) in obj"></div>

v-for中key，给列表添加唯一表示，提升Vue更新DOM的性能，当key没有变化的时候，Vue则复用其DOM元素，不会更新DOM。

<div v-for="(item , index) in array" :key="item.id"></div>

4.6 双向绑定指令

v-model双向绑定：数据驱动视图改变，同时视图也会驱动数据的变化。

作⽤在表单元素（input、select、radio、checkbox）上，实现数据双向绑定, 从⽽可以快速获取或设置表单元素的值。

let username = ref("")
<div v-model="username"></div> 

5. 指令补充

5.1 指令修饰符

指令修饰符：让指令功能更强大，书写更便捷。

5.1.1 按键修饰符

<input type="text" @keydown.enter="onKeyDown" />    # 当按下enter按键时触发onkeyDown事件

5.1.2 事件修饰符

<div @click.stop="handler1"></div>             # 阻止冒泡
<div @click.prevent="handler2"></div>          # 组织默认行为
<div @click.stop.prevent="handler3"></div>     # 可以连用

5.1.3 v-model修饰符

<div v-model.trim="content"></div>             # 去除首尾空格
<div v-model.number="content"></div>           # 尝试使用parseFloat()转数字
<div v-model.lazy="content"></div>             # 失去焦点时同步数据，而不是输入时同步数据

5.2 v-model用在其他表单元素上

常见的表单元素都可以使用v-model绑定关联，作用是快速获取或设置表单元素的值。

<input type="text" v-model="variable"/>            # v-model关联的是value<textarea v-model="var"></textarea>                # v-model关联的是value<select v-model="variable">                        # v-model关联的是option的value值，v-model需要添加到select上<option value="BJ">北京</option><option value="SH">上海</option>
</select><input type="radio" v-model="variable" value="male"/>   # v-model关联是value，单选需要手动添加value属性     
<input type="radio" v-model="variable" value="female"/><input type="checkbox" v-model="variable"/>         # 多选框只有一个时，关联是checked属性，用布尔值来关联<input type="checkbox" v-model="variable" value="option1"/>option1  # 多选框有多个时，关联的是value属性，用数组来关联
<input type="checkbox" v-model="variable" value="option2"/>option2
<input type="checkbox" v-model="variable" value="option3"/>option3

6. 样式绑定

为了方便开发者进行样式控制，Vue扩展了v-bind语法，可以针对class类名和style行内样式两个属性控制，进而通过数据控制元素的样式。

6.1 三元表达式

<p :class="条件 ? '类名1' : '类名2'"></p>

6.2 对象语法

当class动态绑定的是对象时，键（key）就是类名，值（value）就是布尔值，如果是true，就添加找个类，否则删除这个类。

<div :class="{ 类名1：布尔值1 , 类名2：布尔值2 }"></div>

静态class与动态class可以共存，二者会合并

6.3 style绑定的语法

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

7. 计算属性

7.1 语法和特性

基于已有的数据，计算出新的数据，当已有数据发生变化时，会自动重新计算。

const 新数据 = computed(() => { # 简易写法// ...return ...
})

计算属性必须有返回值。

计算属性和ref/reactive一样，可以使用插值。

js中获取计算属性：和ref一样也需.value。

7.2 计算属性vs函数

函数：有几个地方调用函数就会执行几次函数体中的代码。

计算属性：有多个地方使用计算属性，但如果计算属性依赖的数据没有变，计算属性中的函数只会执行一次。计算属性会对计算出来的结果缓存，再次使用直接读取缓存，只有当计算属性依赖的数据改变，才会自动重新计算，并刷新缓存数据。

7.3 计算属性的完整写法

完整写法的场景：需要修改计算属性的时候。

1.简易写法：

const 计算属性 = computed( ()=> {} )

2.完整写法：

const 计算属性 = computed( {get() { return 计算结果 }    # 如果没有set相当于简易写法set(val) {  codeing... }     # 修改计算属性自动触发 set，val参数表示给计算属性赋予的新
} )

8. 侦听器

监视响应式数据（ref/reactive）的变化，当数据变了，可以针对性做DOM操作或异步操作。

const keyword = ref('')
# keyword的值变化，就会执行回调函数
watch(keyword , (newval , oldval) => {})# 简直reactive的数据时，obj === newval === oldval
const obj = reactive({username: '',password: ''
})watch(obj , (newval , oldval) => {console.log(newval === oldval) # trueconsole.log(obj == newval) # true
})

监视数组时，应使用深度监视器。

watch(array , (newval , oldval) => {} , { deep: true })

9. scoped

9.1 语法

写在Vue文件中的样式默认会全局生效，因为很容易造成多个组件之间的样式冲突问题。我们可以使用scoped属性，可以让样式只作用于当前Vue文件下。

<style scoped></style>

9.2 原理

style标签添加scoped属性后：

1. 组件内的所有标签都被添加data-v-8位hash值的自定义属性

2. 在当前Vue文件style标签下写的所有选择器都会添加[data-v-8位hash值]的属性选择器。从而保证样式只能作用当前组件