VUE笔记
前言：前面期末周突然加了一个项目作业，感觉不是开发能力而是vibecoding能力，想写一个工具与vue有关的，但之前没有系统学习过，在微信公众号里面看了几篇好文章，然后真自己实际上手起来的话还是挺困难的，因此本篇作为一个按照官方给的一个快速上手教程来，默认是
.vue结尾的设置，在官方基础上进行的一些个人的尝试和思考
开始
在教程最开始的时候给出了一段代码：
这里的h1好理解，就是html里面的一级标题，然后有一个template：
在 Vue.js 中， 它不是原生 HTML 标签：虽然原生 HTML5 也有一个 并且不会被渲染到 DOM 中：Vue 编译后， 那么在此基础上可以增加多级标题或具体内容，可以自行尝试： 教程中直接给出了相应的解释： Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新 能在改变时触发更新的状态被称作是响应式的，这里可以看官方教程或者我下面的代码： 代码的细节放到后面再做解释，先继续跟着教程往下走，可以看到一句话： Proxy 是 然后 这些基本类型就是通过 JavaScript 的 基本类型是按值传递的，无法被 Proxy 拦截。 ref() 就是把基本类型装进去，让它变成可以被 Vue 监控的对象。 下面的是对象类型【引用】： 了解了 将教程中的语言结合起来构造出的结果就是这样： Count is: {{ counter.count }} 首先这里的const即常量，在 Vue 3 State is: {{ state.isOnline}} This is second paragraph 然后在写的过程中其实遇到了一点问题，首先我刚开始是这么写的： 解决方法有三种： 还有一个是之前提到的 那么最终结果就是这样显示： 这个在快速入门里面讲的不是很详细，然后参考了网上别的师傅写的文章，首先得是理解这个标题是什么意思： 这里其实更常用的是数组，对象等等，但是因为是初学所以就先不拓展了，样例给出的结果： {{ message }} 就类似于HTML DOM事件，在快速入门中给出的案例就是点击按钮计数增加： 快速入门中在文本中已经给出了相应答案，我们可以在此基础上添加相应变种： 或者更换任意鼠标事件： 表单绑定指的是：将表单元素 是组件的模板容器，用于包裹该组件所有的 HTML 结构：
标签（用于存放客户端不渲染的惰性内容），但在 Vue 的单文件组件（.vue）中，它是 Vue 编译器专属的语法标记
标签本身会消失，只有里面的内容（如 Hello World!
声明式渲染
reactive和ref// 普通对象：改了数据，页面不动
let user = { name: 'Shorekiten' }
user.name = 'New Name' // 页面无变化，需操作DOM
// 响应式对象：改了数据，页面自动刷新
import { reactive } from 'vue'
const user = reactive({ name: 'Shorekiten' })
user.name = 'New Name' // 页面上显示的名字自动变成 "New Name"
由 reactive() 创建的对象都是 JavaScript ProxyJavaScript ES6 的原生特性，相当于给对象加了一层"拦截器/代理"。当访问或修改对象的属性时，Proxy 会先拦截这个操作，然后执行额外的逻辑（比如通知 Vue 更新页面），最后再把操作传递给原始对象。reactive调用的是对象类型（Object、Array、Map、Set），刚开始看到这个很懵，那就先来了解一下基本类型，即单个的、不可再分的值，直接存在内存栈里：
ref来进行调用，ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。
直接这么说有点抽象，那就分开来，首先得知道什么是包裹对象：// 基本类型无法被监听
let count = 0
count = 1 // Vue 根本感知不到这个赋值操作
// 必须包一层对象，才能用 .value 的 setter 来触发更新
const count = ref(0)
// 内部等价于: { _value: 0, get value(){...}, set value(v){...} }
而.value就是访问的入口，然后在模板中会自动解包所以无需再加value
类型
说明
示例
Object
普通对象/字面量对象
{ name: 'Shorekiten', age: 0 }
Array
数组（本质上是特殊的对象）
['apple', 'banana']
Map
键值对集合（key 可以是任意类型）
new Map([['name', 'Shorekiten']])
Set
不重复值的集合
new Set([1, 2, 3])reactive ref之后就是动态渲染文本，即双花括号语法动态渲染文本结合
{{ message }}
{{ message }}
{{ title }}
JS 认为字符串在 ShoreKiten 后就结束了
const message = ref('ShoreKiten's cottage')
//用反引号，里面可以随意包含单引号和双引号，无需转义：
const message = ref(`ShoreKiten's cottage`)
//使用双引号包裹
const message = ref("ShoreKiten's cottage")
//使用转义字符 \
const message = ref('ShoreKiten\'s cottage')
.value的问题，在模板中是不需要加的，但是在模板外可以加上这个对原本的内容进行相应的修改，就比如：const message = ref(`ShoreKiten's cottage`)
message.value = `Tom's house`
Attribute 绑定
属性绑定（Attribute Binding）是 Vue 提供的一种将组件数据与 HTML 元素属性建立关联的方式。通过属性绑定，我们可以让元素的属性值随着数据的变化而自动更新，实现数据驱动视图的核心思想，基础语法如下：<元素 v-bind:属性名="数据">
//一般进行简写,即快速入门中描述的
常见使用场景
动态图片/链接
访问博客
动态控制 disabled / readonly 等布尔属性
class 和 style
Make me red
Attribute 绑定 vs 文本插值 {{ }} 的区别
特性
{{ }} 文本插值:attr 属性绑定
用在哪里
标签内部的文本内容
标签上的 HTML 属性
示例
能否混用
❌ 不能写在属性里
❌ 不能写在文本位置
事件监听
//简写
Vue 写法
对应原生事件
触发时机
@mouseenteronmouseenter鼠标进入元素边界（不冒泡）
@mouseleaveonmouseleave鼠标离开元素边界（不冒泡）
@mouseoveronmouseover鼠标移入元素（会冒泡）
@mouseoutonmouseout鼠标移出元素（会冒泡）
@mousemoveonmousemove鼠标在元素内移动（高频触发⚠️）
@mousedownonmousedown鼠标按键按下
@mouseuponmouseup鼠标按键抬起
@dblclickondblclick双击
@contextmenuoncontextmenu右键菜单
表单绑定
（、
原文地址: https://www.cveoy.top/t/topic/qHgT 著作权归作者所有。请勿转载和采集!