有什么网站可以做名片,WordPress 布局 企业网站,网站seo关键词优化技巧,wordpress 登录失败1、ref可以定义一个简单的属性#xff0c;也可以是一个复杂的列表、数组等等。
2、为什么要使用 ref#xff1f;简单的let个变量不行吗#xff1f;const个变量不行吗#xff1f; 其实这个跟vue的响应式的系统有关#xff0c;官方的说明如下#xff1a; 3、为 ref() 标注…1、ref可以定义一个简单的属性也可以是一个复杂的列表、数组等等。
2、为什么要使用 ref简单的let个变量不行吗const个变量不行吗 其实这个跟vue的响应式的系统有关官方的说明如下 3、为 ref() 标注类型 一般我们直接赋string的时候会自动推导出是string但是我们在开发的过程中会经常遇到可能要赋个日期型的比如 dayjs然后我们传到服务器的时候是一个string类型这样我们就要指导类型让系统知道我们的编写是正确的。 4、深层响应性 5、click
绑定到一个方法/函数。 这个 click 语法是 v-on:click 的简写。也就是可以直接clickfunc名也可以v-on:clickfunc名。
6、简单的官方事例
https://cn.vuejs.org/examples/#handling-input
!--
这个示例展示了如何通过 v-on 指令处理用户输入。
--script setup
import { ref } from vueconst message ref(Hello World!)function reverseMessage() {// 通过其 .value 属性// 访问/修改一个 ref 的值。message.value message.value.split().reverse().join()
}function notify() {alert(navigation was prevented.)
}
/scripttemplate!--注意我们不需要在模板中写 .value因为在模板中 ref 会自动“解包”。--h1{{ message }}/h1!--绑定到一个方法/函数。这个 click 语法是 v-on:click 的简写。--button clickreverseMessageReverse Message/button!-- 也可以写成一个内联表达式语句 --button clickmessage !Append !/button!--Vue 也为一些像 e.preventDefault() 和 e.stopPropagation()这样的常见任务提供了修饰符。--a hrefhttps://vuejs.org click.preventnotifyA link with e.preventDefault()/a
/templatestyle
button, a {display: block;margin-bottom: 1em;
}
/style
7、运行结果 8、总结
ref可以定义类型也可以不指定通过类型推导出来ref是响应式的也就是说你修改了会自动去更新UI而普通的变量不会ref在template中引用的时候不需要.vaue会自动解包。
在script中引用的时候一定要加上.value或者unref(变量否则是要报错的。
