零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战,开发打包微信小程序、抖音小程序、H5、安卓APP客户端等
总时长 23:40:00 共116P
此文章包含第11p-第p14的内容
文章目录
-
- vue3使用介绍
- 插值表达式例子
- ref响应式数据变量
- [v-bind 绑定](#v-bind 绑定)
-
- 手写一个轮播图
- [绑定 class](#绑定 class)
- 绑定style(内联样式)
vue3使用介绍
进入vue3官方文档
官网
vue3使用的是组合式api
创建vue应用
插值表达式例子


我们使用 3.2版本后的语法糖
时间戳
随机数


输出函数的值
必须加括号 否则如下

加括号之后
ref响应式数据变量
预期是每秒变化一次 这里一直是6
我们使用响应式ref就可以了


使用 变量.value可以得到数据
字符串、数组、对象 都可以定义

可以修改值的内容
这里主要使用ref ref的实现原理也是 reactive
层级较深可以使用reactive,尤其是后续需要用到数据监视的一些数据,推荐使用reactive
v-bind 绑定
v-bind:属性 可以简写成 :属性

手写一个轮播图
使用取余 但是时间长了 会溢出,但是呢,js不会把页面退出去,只会给你返回个undefined,然后继续
不加v-bind的话 false只是个字符串
绑定 class
动态变化class



我们一般使用三目表达式
绑定style(内联样式)
