在Vue3中有两种分别为选项式和组合式的操作,现在一般用组合式,很少用选项式的操作;
1.计算,与变量;
直接这样写的话,他不会进行计算,需要添加两个大括号;比如 {{1+1}}
变量的话我们可以不用script中的因为里面是 Vue2 的我们可以改成
如果不使用 {{}} 的话 他显示的则会变成 a+b;
2.方法
2.1.1对象
我们可以使用一些对象的方法,比如说获取当前时间和生成随机数;
2.1.2方法
这个是无参的,当然它也可以是有参的;
无参:
有参:
3.响应
3.1 响应数据变量
setInterval 定时器,后面的1000代表着1秒之后执行异次,页面上的不能改变,console.log()代表着在控制台输出;
3.1.2响应式
输出两个,因为使用响应的话,num2=ref(10);它的value为10,它会变成一个对象,所以我们需要使用num2.value才能看到他的值,在浏览器上可以直接使用num2 就可以直接显示值了;
我们在使用 定时器的时候就不能直接使用num2++了,因为他是一个对象,我们需要使用 nun2.values++;
这样页面上也会跟着动起来了,也就是说在响应器中存的值,获取和修改都需要使用" 变量名.value "
这个不单单可以定义 int 整数类型也可以定义String 字符串,以及Array 数组,对象,等一些列的东西
比如字符串与数组:绿色字符串,灰色数组;
当数组只想要一个值的时候可以直接使用,数组名[下标],下标从0开始计算:
对象的也是,对象与数组有一点点像
想修改对象的值与数组的值的时候可以这样写;可以使用一些事件什么对他进行操作;
reactive()这个方法是官网给对象属性用的,但是我们也可以使用ref,因为ref比较常用;