vite+vue工具使用和一些简单的小实践| 青训营笔记

51 阅读4分钟
reactive和ref函数

1.reactive()的作用:

接受对象型数据的传入并返回一个响应式的数据(可以通过交互影响视图的变化)

2. reactive()的使用步骤:

从vue包中导入reactive函数

在setup中执行reactive函数

3. 示例(计时器):

image.png

image.png

4.ref()的作用

接受简单数据类型和对象型数据的传入并返回一个响应式的数据(可以通过交互影响视图的变化)

5. ref()的使用步骤:

从vue包中导入ref函数

在setup中执行ref函数

6. 示例(计时器):

image.png

reactive和ref函数函数总结

image.png

computed计算属性函数

1.computed函数的作用

2.computed函数的核心步骤

导入computed函数

执行函数在回调参数中return基于响应式数据做计算的值,用于变量接收

3.示例

image.png

image.png

computed函数总结

image.png

watch函数

1.watch函数监听单个数据的变化--作用

侦听一个数据的变化,数据变化时回调函数的两个额外参数:

1.immediate(立即执行)

2.deep(深度监听)

2.watch函数监听单个数据的变化--核心步骤

1.导入watch参数

2.执行watch函数传入的要侦听的响应式数据(ref对象)和回调函数

3.watch函数监听单个数据的变化--实例

image.png

image.png

4.watch函数监听多个数据的变化--作用

侦听多个数据的变化,无论是哪一个数据变化时都要回调函数的两个额外参数:

1.immediate(立即执行)

2.deep(深度监听)

5.watch函数监听多个数据的变化--核心步骤

1.导入watch参数

2.执行watch函数传入的要侦听的响应式数据(ref对象)和回调函数

6.watch函数监听多个数据的变化--实例

image.png

image.png

7.immediate立即执行参数 -- 说明

在侦听器创建时立即触发回调,响应式数据变化之后继续执行回调

8.immediate立即执行参数 -- 实例

image.png

image.png

7.deep深度监听(对象)参数 -- 说明

通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行

8.deep深度监听(对象)参数 -- 分别一个对象的元素

image.png

image.png

9.deep深度监听(对象)参数 -- 总结

image.png

插值

最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法 (即双大括号)

Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式

v指令

Vue指令是Vue.js的一项核心功能,他们可以在HTML模板中以-v开头的特殊属性形式使用,用于将响应式数据绑定到dom元素上,或在dom元素上进行一些操作为指令是带有前缀微杠的特殊HTML属性,它赋予了HTML额外的功能与传统的js方法。相比使用voe创造响应式页面更容要容易的多,并且使用的代码更少,下面是常用的指令

v-text指令 用于输出纯文本内容,v-html指令 用于输出网页内容

image.png

image.png

v-model指令 用于双向选择

image.png

image.png

image.png

v-bind指令 把vue实例的数据绑定到html元素的属性上

1.v-bind指令作用于文本空间

image.png

image.png

2.v-bind指令作用于图片

image.png

image.png

3.v-bind指令作用于样式

image.png

image.png

v-if指令 判断是否为true然后决定是否执行代码

image.png

image.png

v-on指令 监听dom事件

image.png

image.png

vue的样式

数据绑定的一个常见需求场景是操作元素的CSS class 列表和内联样式。我们可以使用v-bind将他们和动态的字符串绑定。除了字符串外,表达式的值也可以是对象和数组。

image.png

可以看到,ts向class传递了一个参数,决定了该class是否在该盒子发挥作用。

我们可以在对象中写一个或多个字段来操作一个或多个class。此外,:class指令也可以和一般的class指令共存。

image.png

绑定的对象并非是一定要写成内联字样的模式,亦可以直接绑定一个对象或者绑定一个返回对象的计算属性

image.png

绑定数组

可以给:class绑定一个数组来渲染多个css class 就是包含多个样式的数组, 这些对象会合并后渲染到同一元素上。

image.png

vue的表单

vue表单的应用是指v-model指令在表单《input》《text area》 及《select》等元素上创建双向数据绑定。

v-model会根据控件类型自动选取正确的方法来更新元素

  • text 和 textarea 元素使用 value 属性和 input 事件;
  • checkbox 和 radio 使用 checked 属性和 change 事件;
  • select 字段将 value 作为属性并将 change 作为事件。

image.png

image.png

image.png