Vue3语法

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) 的值可以是：

1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器

示例：每点击一次数值就加1

事件映射表

自定义模板

1.在创建页面的左下角有一个自定义模板（图1）

2.点击之后会进入自定义模板的文件夹（图2）

3.右键创建一个文本文件更改后缀名（图3）

4.将创建好的文件拖动到HBuilder X写入需要创建模板的内容保存关闭模板就创建好了

                图1                                                                        图2

                   图3                                                                        图4