qq_51856496的博客

（加冒号的，说明后面的是一个变量或者表达式；虽然Vue的声明性渲染模板为我们抽象了大部分对DOM的直接操作，但在某些情况下，我们任然需要直接访问底层DOM元素。1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素。（ref值） 获取到的是组件实例，可以使用组件的所有方法。

在前端处理表单时，我们常常需要将表单输入框的内容同步给Javascript中相应的变量。手动连接绑定和更改事件监听器可能会很麻，默认情况下，v-model 会在每次input事件后更新数据。可以添加lazy修饰符来改为在每次change事件后更新数据。v-model 也提供了修饰符：.lazy ,.number , .trim。单一的复选框，绑定布尔类型值。指令帮我们简化了这一步骤。

侦听器侦听数据变化，我们可以使用watch 选项在每次响应式属性变化时触发一个函数。监听数据的变化，当数据发生变化时，会自动执行对应的函数。函数名必须与侦听器的数据对象名保持一致。

将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且容易出错的。因此，Vue 专门为class 的。用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是数组或对象。是attribute（属性），我们可以和其他attribute一样使用。数据绑定的一个常见需求场景是操作CSS class列表，因为。如果你想在数组中渲染某个class,你可以使用三元表达式。数组和对象的嵌套过程中，只能数组嵌套对象，不能反其道而行。

模板语法的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。计算属性computed的方法调用不需要添加小括号，method里面的方法可加小括号也可不加。：计算属性值会基于其响应式依赖被缓存，一个计算属性仅会在其响应式依赖更新时才会查询计算。可能你会发现在表达式中调用一个函数也会获取和计算属性一样的结果。：方法调用总是会在重渲染发生时再次执行函数。来描述依赖响应式状态的复杂逻辑。

变更方法，顾名思义，就是会对调用他们的原数组进行更变。相对地，也有一些不可变方法，例如 filter(),concat()和slice(),这些不会改变原数组，而是返回一个新数组。当遇到非变更方法时，我们需要将会旧的数组替换为新的数组。vue能够侦听响应式数组的变更方法，并在他们被调用时触发相关更新。

是很常见的，尽管我们可以直接在方法内调用，但如果方法能更专注与于数据逻辑而不用去处理DOM事件的细节会共更好。可知div标签的事件并未触发。解决这一问题，vue为。可知点击后页面并不跳转。

对象和通过事件传递数据。目的：点击事件进行传参。

指令（简写@）来监听DOM事件，并在事件触发时执行对应的Javascript。该处理器是通过函数实现。简单场景：常用处理器。

当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的。的值，我们要确保每一条数据的唯一索引不会发生变化。Vue 默认按照“就地更新”的策略来更新，通过。

大多数情况，我们渲染的都是来源于网络请求，也就是json格式。也支持使用第二关参数表示当前项的位置索引。可以使用v-for遍历一个对象的所有属性。指令基于数组渲染一个列表。形式的特殊语法，其中。

v-bind 指令指示Vue将元素id attribute 与组件的dyid属性保持一致。如果绑定值是null或者undefined，那么该attribute将会从渲染的元素上移除。双大括号不能在HTML attributes 中使用。想要响应式地绑定一个attribute，应该使用。

vue使用一种基于HTML的模板语法，使我们能够声明式的将其组件实例的数据绑定到呈现的DOM上，所有的vue模板都是语法层面的HTML，可以被符合规范的浏览器和HTML解释器解析。每一个绑定仅支持单一表达式，也就是一段能被求值的JavaScript的代码，一个简单的判断方法是是否可以合法的写在。双大括号将会将数据插值为纯文本，而不是HTML,需要使用。无效情况，原因是不满足单一表达式。

node_modules - - - vue项目的运行依赖文件夹。.vscode - - -vscode工具的配置文件夹。vite.config.js - - -vue配置文件。public - - -资源文件夹（浏览器图标）index.html - - -入口html文件。package.json - - -信息描述文件。.gitignore - - -git忽略文件。README.md - - -注释文件。src- - -源码文件夹。

iframe实现全屏