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插件
-
Vue Offical 语法高亮
-
Vue3 snippets 提供Vue代码片段
vbase
-
Path Intellisense 路径自动补全
-
Auto Import 自动导入模块
-
Auto Close Tag 自动闭合HTML标签
-
Auto Rename Tag 自动重命名HTML标签
1. setup函数和插值表达式
Vue:一套构建用户界面的渐进式JavaScript的框架
-
构建用户界面:基于数据生成标签结构,配合CSS样式,可以渲染出漂亮的用户界面
-
渐进式:循序渐进的学习,学多少可以用多少
-
框架:一种需要遵守的规则
1.1 setup函数
-
setup函数vue3的入口函数
-
在标签中用到的数据或者函数,需要在setup中声明并放在对象中返回
-
setup中this不指向Vue实例,在setup函数中不会用到this
1.1.1 完整写法
<srcipt>export default {setup() {return {}}}
</script>
1.1.2 简写
<script setup></script>
1.2 插值表达式
将表达式结果展示在双标签中
{{}}
前端中常见的表达式:
-
字面量以及变量
-
对象.属性名
-
算数运算和三元表达式
-
方法调用
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个入口文件的作用
-
main.js
项目打包的入口文件 -
App.vue
Vue代码的入口文件也称Vue的根组件 -
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属性后:
-
组件内的所有标签都被添加data-v-8位hash值的自定义属性
-
在当前Vue文件style标签下写的所有选择器都会添加[data-v-8位hash值]的属性选择器。从而保证样式只能作用当前组件