Vue 3

🌈莫玄忆纸🎐(互)

Vue是一个用于构建用户界面的渐进式JavaScript框架[尤雨溪].

适用场景丰富的 Web 前端框架.

Vue.js能够自动追踪数据的变化,并实时更新DOM.

import=导入

ref→包装响应式数据的方法

const→定义变量关键字

@click 监听点击事件

'值++' 让值加1

import {ref}from 'vue'→导入

const 常量名= ref(值);

<=脚本→中引入[src="网址"]

message:" "=消息;指令

<div=分区→定义

{createApp}=创建

alert()=提醒;通知

⭐setup=组织;调整[组合式vue3]

[ref创建的引用需要通过.value访问其值.]

export=出口

data(){=数据;材料;统计资料

return{→返回

const { createApp } = Vue;→CDN引入Vue

const 实例名 = createApp({});→创建实例

实例名.mount('#元素名');→挂载元素名

=document.getElementById('元素名');→记录元素id

mount=安装

reactive=反应;有回应

import { reactive } from 'vue'→响应式对象

const 实例名= reactive({

message: '指示内容'

});→实例名响应

console.log();→控制台输出

increment=增加

const increment = () => {

量名.value++; // 增加量名的值

};→使用箭头函数方式定义方法

increment();→调用增加值数

双大括号→插值表达式

v-bind指令用于动态绑定一个或多个特性,或一个组件 prop 到表达式.

@是v-on的缩写形式

⭐src=源代码[Source code]

v-bind:属性名→ :→绑定属性v-on:事件名→ @ →绑定事件

<template=模板

⚠️v-text="元素名"→显示html内容

=ref('<span=范围

style=" "=样式→闭合后加入文本

click=点击

v-once=→让元素或组件只渲染一次

cloak=披风;掩盖

样式style中展示[v-cloak] {

display: none;

}和div中展示v-cloak→避免插值闪烁→页面编译

:class="{ active: isActive }"→大括号绑定类中的对象[v-bind]

submit=提交

v-on:submit.prevent="量名"=提交

.stop→阻止事件冒泡

.prevent→阻止默认事件

使用修饰符时,多个修饰符可串联使用.如@click.stop.prevent。

v-if="量名"→量名要求ref(true)

v-else→新行闭合紧跟if[if管对错,else管方法()]

如果if的量名是false,就展现else行的内容

v-show="量名"→显示和隐藏

量名=!量名→显示与不显示的表达式[方法中]

v-for="数组 in 数组元素"，

import { ref } from 'vue';→遍历

v-for="(value, key) in object"→遍历对象

v-for优先级比v-if高

计算属性computed→函数

import {computed,ref} from 'vue'

= computed(()=>{

return msg.value.split('').reverse().join('');→反转

get: () => {

return `${量名1} ${量名2}`;→组合

计算属性默认只有getter,不过也能自定义setter.

function 方法名() {反应

调用方法需要+()括号

{{计算属性代名}}→也可直接使用计算属性

import { ref, watch } from 'vue';

const 量名 = ref(数);

watch(量名, (newValue, oldValue) => { →监听量名值

const 对象名 = ref({ 属性名: '值', 属性名: 值 });→监听对象

deep=深邃;深的

{ deep: true });→深度监听消耗性能

directive=指令;指导方针

=焦点;中心

app.directive('focus', {→自定义指令

mounted()在元素挂载到DOM后调用→钩子函数

updated()在组件更新时调用

v-model只能用在表单元素上，像input,textarea等→绑定模型

.lazy→重要的优化方法→表单失去焦点才更新数据

get(){ return ref代名.value.toUpperCase(); },

set(newValue) { 代名.value=newValue; }→计算属性中，转换大写

v-for循环渲染选项时,要给每个选项添加:key,保证渲染效率.

option=选择权

v-model在change事件发生时同步数据→用lazy修饰符

表单提交前用trim修饰符→可避免因空格导致的验证失败.

@→监听事件

模板里传递字符串参数,需用单引号包裹参数.

事件stop修饰符→阻止事件冒泡

子元素事件不会触发父元素的相同事件↑

capture修饰符→事件按从外向内的捕获顺序传播.

Outer=外部的

Inner=内部的

handle=处理;操纵

self修饰符仅对点击目标是绑定元素本身时生效

once修饰符→只会让事件触发一次,后续再触发该事件就无效了.

.prevent修饰符阻止链接跳转

🍵Scroll=滚动

passive修饰符用于事件监听器,它能提升性能.特别是在处理滚动等频繁触发的事件时.

监听器内调用preventDefault()无效↑

.enter 修饰符可监听回车键事件.

.tab 修饰符,用于监听Tab键事件

.ctrl 可监听Ctrl键

.alt 修饰符,用于监听Alt键

Ctrl修饰符,可多选

Shift→大小写切换