Vue3的模板语法与插值表达式
插值表达式
Vue3插入表达式语法:{{ 值 }}.
插入表达式可以直接进行运算,还能生存当前时间{{ Date.now() }}用来生成当前时间、或者获取随机数{{ Math.random() }}等等。调用函数时要加括号。
示例
ref定义响应式
从import引入ref 语法:import {ref} from "vue";
赋值方式 :let 变量名 = ref(值);
取值方式:
变量取值: {{ 变量名.value }}
字符取值:{{ 变量名 }}
数组取值:{{ 数组名[下标] }},注意下标从0开始。
对象取值:{{ 对象名{属性名 }},或者 {{ 对象名.属性名 }} 注意对象属性修改值时需要使用value 列如:obj.value.name=" 张三";
示例
Attribute绑定
在标签属性中提供变量时会报错,想直接使用变量就需要使用到 v-bind:属性。注意v-bind可以用简写代替 :属性;
样式
class类样式
vue3中class类名可以有多个使用空格隔开
或者使用 v-bind ,使用时需要用单引号 ' ' 括起来
布尔类型决定是否引用
style内链样式
事件处理
监听事件
我们可以使用 v-on
指令 (简写为 @
) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。用法:v-on:click="handler"
或 @click="handler"
。v-on的方法可以有()也可以没有,但需要传递值时就需要添加括号。
事件处理器 (handler) 的值可以是:
-
内联事件处理器:事件被触发时执行的内联 JavaScript 语句 (与
onclick
类似)。 -
方法事件处理器:一个指向组件上定义的方法的属性名或是路径。
内联事件处理器
示例:每点击一次数值就加1
事件映射表
自定义模板
1.在创建页面的左下角有一个自定义模板(图1)
2.点击之后会进入自定义模板的文件夹(图2)
3.右键创建一个文本文件更改后缀名(图3)
4.将创建好的文件拖动到HBuilder X写入需要创建模板的内容保存关闭模板就创建好了
图1 图2
图3 图4