QWERTY55555的专栏

点击更新shallowReactive对象属性car.price和id++，car.price和id属性都加1，并且shallowReactive视图更新。shallowReactive 和shallowRef 浅层响应式对象: 只会修改第一层对象，修改此对象第一层属性，视图会有同步变化，非第一层，数值会变，视图不会变。点击更新shallowReactive对象属性car.price++，car.price属性加1，视图不更新。点击更新ref对象数据car.price++，car.price属性加1。

点击新增数据，会修改age ,user对象里面的id、name字符、hobbies数组里面的值。ref声明的数字、字符、对象、数组类型的值都在refImpl 的value属性里面。所以，如果要改变ref 声明的变量的值，要加上.value。

ps：interface关键字要 加上lang="ts"不然会报错。一、vite项目中 : lang="ts" 是表明支持ts校验。不能将类型“string”分配给类型“number”。二、使用接口声明数据类型 interface，如果声明类型和设置值类型不一致会有提示，如图。

加了setup ，export default 、setup() return{***} 不需要写了。vue做特殊编译处理。一、使用 之后，就不需要手动写以下代码，只要写逻辑代码。未加setup，vite 工程要加上下面代码。* //只要写逻辑代码。

-原始对象不是响应式对象，修改了原始对象模版中不会更新，要修改proxy代理对象。* - 不支持普通（原始）类型：string、boolean、number类型等。* - 支持声明对象（对象，Map/Set集合）和数组类型，点击点击工资+1按钮，工资加1。* - 用来声明响应式状态，

ps: 如果vite 里面有多个.vue 文件，想运行其中一个，可以通过修改main.ts文件里面import App from './App.vue' ，单引号的值。点击说一说，staff 数组里面hobbies会增加一个篮球，并且改变msg 的值为msg。运行npm run dev。p.vue,内容如下。

-- package-lock.json: 用于记录实际安装的各个包的具体来源和版本号等,其他人在 npm install 项目时大家的 依赖能保证一致。|-- tsconfig.config.json: TypeScript 相关配置文件（在tsconfig.json中被引用了）| |-- extensions.json |-- node_modules: 存放下载依赖的文件夹。| |-- assets: 静态文件，会进行编译压缩，如css/js/图标等。| |-- App.vue: 应用根主组件。

提高渲染能力，接收的一个数组，上次数组值和本次获取的数组值不变情况下，直接复用缓存中的进行渲染，如果数组不相同，则会重新渲染。一、v-pre 使用了该指令的元素和子元素会被编译忽略，也就是不进行编译，其中包含的所有vue模版语法都会原样显示，作用加快vue的编译。运行效果：点击更新状态，渲染状态为false 的耗时为平均为18.51416015625 ms。加了v-memo ，在大数据时，可以有效减少前段渲染耗时。二、v-memo vue3.2+新增命令。

key 的作用： 是为了给 Vue 一个提示， 以便它可以跟踪每个节点的唯一标识，它会 基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素==因为vue3和vue2执行的顺序不相同，不推荐v-if和v-for同时作用到同一元素上。第{{index+1}} 个属性为：{{key}} ={{value}}vue2: 会先执行v-for,再执行v-if。vue3: 会先执行v-if,再执行v-for。不推荐v-if和v-for同时作用到同一元素上。三、v-if和v-for同时使用时（注意）

v-else-if="布尔类型条件":必须与v-if搭配使用，出现n次。v-else：必须和v-if搭配使用，只能出现1次。使用css的display来切换显示和隐藏。v-if="布尔类型条件"：能出现n次。一、用于真正的隐藏和显示，显示时才会渲染dom元素。显示和隐藏时都会渲染dom元素。二、v-show="布尔类型条件"

它会自动将输入的值自动转成number 类型（可以通过parseFloat转成数值，则会自动转，转不成功的返回原始：asdf123）使用 .lazy 修饰符后，当改变数据失去焦点-触发change事件来进行更新数据。默认情况下，v-model它是在每次输入数据时触发input事件来更新数据的。比如: 123aaaa123,转成的值为123。如果输入的值是数字开头，会舍弃非数字后面的值。会自动开启 type=number 类型。3、v-model.trim 去除左右空格。

ps: v-model 绑定一般为 name属性。name 属性可以删除。

一、单向绑定就是：修改视图，数据不变；修改数据（app.name="1234"），视图会变。二、双向绑定：修改视图，数据会变；

meta:mac针对的是command键盘，windows针对的windows键盘（田）.delete(针对delete和backspace两个按键)按键修饰符：主要用于监听键盘上的按钮被按下时，可触发对应的事件函数。v-on:keyup.修饰符.修饰符】、系统修饰符必须按下才触发。

.once修饰符，点击事件只触发一次{{num}}

console.log('输入框失去焦点',event.target.value);//this 代表app对象。2、简写方式`@事件名=“函数/方法”，注意@符号不能加冒号“：”`oninput、onclick、onchange、onblur等。say(event){//event 事件对象。1、 完整方式`v-on:事件名=“函数/方法”`ps:methods 可以定义多个方法选项，用逗号分隔。},//多个必须加逗号。一、v-on 给元素（标签）绑定事件监听器。

v-bind简写动态绑定多个属性</a><a :="{id : id,href:to}" id="8888">v-bind简写动态绑定多个属性</a><a id="9999" :="{id : id,href:to}">v-bind简写动态绑定多个属性

链接：https://pan.baidu.com/s/1tEyZJUCEK_PHPGhU_cu_MQ?二、打开开发者模式，将vue-devtools.crx 拖入页面，点击添加扩展程序。一、打开谷歌浏览器，点击扩展程序-管理扩展程序。

Vue模版语法 - Google Chrome 2023-10-06 09-36-48。MVVM 是 Model-View-ViewModel 的缩写，它是一种软件架构风格。ViewModel：视图模型，其实本质上就是 Vue 实例，例如app实例。Model：模型， 数据对象（data 函数），如下图。View：视图，模板页面（用于渲染数据）一、什么事MVVM 模型。

一、新建工程目录E:\vue\projectCode\npm-demo用Visual Studio Code 打开目录。四、初始化项目，输入npm init 一直敲回车直到创建成功如下图。二、点击新建文件夹按钮，新建vue3-01-core文件夹。三、右键vue3-01-core文件夹点击在集成终端中打开。

windows系统的快速下载地址：https://vscode.cdn.azure.cn/stable/441438abd1ac652551dbe4d408dfcec8a499b8bf/VSCodeUserSetup-x64-1.75.1.exe。macOS系统的快速下载地址：https://vscode.cdn.azure.cn/stable/441438abd1ac652551dbe4d408dfcec8a499b8bf/VSCode-darwin-universal.zip。

插入号 + 指定版本号：比如 ^3.5.2 ，安装 3.x.x 的最新版本（不低于 3.5.2），但是不安装 4.x.x， 也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这 是因为此时处于开发阶段，即使是次要版本号变动，也可能带来 程序的不兼容。npm install jquery~ 波浪号 + 指定版本号：比如 ~3.5.2 ，安装 3.5.x 的最新版本（不低于 3.5.2），但是不安装 3.6.x， 也就是说安装时不改变大版本号和次要版本号。

vue3 教程

注意：v-html 遇到标签和vue语法代码会被忽略，直接显示，防止xss攻击。1、定义样式：将带有 v-cloak 指令的标签属性。2、{{js表达式}}:可以直接进行js表达式处理。1、 {{变量名}}:data中返回对象的变量名。2、在需要被解决闪烁问的元素加上v-cloak。1、为了解决双大括号渲染数据出现闪烁问题。3、注意：双大括号中不要写等式书写。原理：先隐藏，编译完成后再显示。