reactive和ref函数
1.reactive()的作用:
接受对象型数据的传入并返回一个响应式的数据(可以通过交互影响视图的变化)
2. reactive()的使用步骤:
从vue包中导入reactive函数
在setup中执行reactive函数
3. 示例(计时器):
4.ref()的作用
接受简单数据类型和对象型数据的传入并返回一个响应式的数据(可以通过交互影响视图的变化)
5. ref()的使用步骤:
从vue包中导入ref函数
在setup中执行ref函数
6. 示例(计时器):
reactive和ref函数函数总结
computed计算属性函数
1.computed函数的作用
2.computed函数的核心步骤
导入computed函数
执行函数在回调参数中return基于响应式数据做计算的值,用于变量接收
3.示例
computed函数总结
watch函数
1.watch函数监听单个数据的变化--作用
侦听一个数据的变化,数据变化时回调函数的两个额外参数:
1.immediate(立即执行)
2.deep(深度监听)
2.watch函数监听单个数据的变化--核心步骤
1.导入watch参数
2.执行watch函数传入的要侦听的响应式数据(ref对象)和回调函数
3.watch函数监听单个数据的变化--实例
4.watch函数监听多个数据的变化--作用
侦听多个数据的变化,无论是哪一个数据变化时都要回调函数的两个额外参数:
1.immediate(立即执行)
2.deep(深度监听)
5.watch函数监听多个数据的变化--核心步骤
1.导入watch参数
2.执行watch函数传入的要侦听的响应式数据(ref对象)和回调函数
6.watch函数监听多个数据的变化--实例
7.immediate立即执行参数 -- 说明
在侦听器创建时立即触发回调,响应式数据变化之后继续执行回调
8.immediate立即执行参数 -- 实例
7.deep深度监听(对象)参数 -- 说明
通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行
8.deep深度监听(对象)参数 -- 分别一个对象的元素
9.deep深度监听(对象)参数 -- 总结
插值
最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法 (即双大括号)
Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式
v指令
Vue指令是Vue.js的一项核心功能,他们可以在HTML模板中以-v开头的特殊属性形式使用,用于将响应式数据绑定到dom元素上,或在dom元素上进行一些操作为指令是带有前缀微杠的特殊HTML属性,它赋予了HTML额外的功能与传统的js方法。相比使用voe创造响应式页面更容要容易的多,并且使用的代码更少,下面是常用的指令
v-text指令 用于输出纯文本内容,v-html指令 用于输出网页内容
v-model指令 用于双向选择
v-bind指令 把vue实例的数据绑定到html元素的属性上
1.v-bind指令作用于文本空间
2.v-bind指令作用于图片
3.v-bind指令作用于样式
v-if指令 判断是否为true然后决定是否执行代码
v-on指令 监听dom事件
vue的样式
数据绑定的一个常见需求场景是操作元素的CSS class 列表和内联样式。我们可以使用v-bind将他们和动态的字符串绑定。除了字符串外,表达式的值也可以是对象和数组。
可以看到,ts向class传递了一个参数,决定了该class是否在该盒子发挥作用。
我们可以在对象中写一个或多个字段来操作一个或多个class。此外,:class指令也可以和一般的class指令共存。
绑定的对象并非是一定要写成内联字样的模式,亦可以直接绑定一个对象或者绑定一个返回对象的计算属性
绑定数组
可以给:class绑定一个数组来渲染多个css class 就是包含多个样式的数组, 这些对象会合并后渲染到同一元素上。
vue的表单
vue表单的应用是指v-model指令在表单《input》《text area》 及《select》等元素上创建双向数据绑定。
v-model会根据控件类型自动选取正确的方法来更新元素
- text 和 textarea 元素使用
value属性和input事件; - checkbox 和 radio 使用
checked属性和change事件; - select 字段将
value作为属性并将change作为事件。