![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue 学习
文章平均质量分 96
百锦再@新空间代码工作室
百锦再,毕业于某985大学,本科,学士。【新空间代码软件开发工作室】成员。黑龙江省一线公司全栈开发十年经验。熟悉C#、MySQL、Redis、Html、Css、JavaScript、Java、Python等语言。精通webApi服务端接口,Winform桌面应用,web应用、微信小程序,2D小游戏等开发。
展开
-
20 VUE学习:插件
插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。/* 可选的选项 */})一个插件可以是一个拥有install()方法的对象,也可以直接是一个安装函数本身。安装函数会接收到安装它的[应用实例]和传递给app.use()// 配置此应用通过 []和 []注册一到多个全局组件或自定义指令。通过 []使一个资源[可被注入]进整个应用。向 []中添加一些全局实例属性或方法一个可能上述三种都包含了的功能库 (例如 [vue-router])。原创 2024-05-29 17:10:32 · 69861 阅读 · 68 评论 -
19 VUE学习:自定义指令
除了 Vue 内置的一系列指令 (比如v-model或v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。我们已经介绍了两种在 Vue 中重用代码的方式:[组件]和。组件是主要的构建模块,而组合式函数则侧重于有状态的逻辑。另一方面,自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。原创 2024-05-28 15:35:29 · 69789 阅读 · 22 评论 -
18 VUE学习:组合式函数
在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。当构建前端应用时,我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间,我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑:它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多,比如你可能已经用过的 [lodash]或是 [date-fns]。相比之下,有状态逻辑负责管理会随时间而变化的状态。原创 2024-05-28 14:16:14 · 69488 阅读 · 10 评论 -
17 VUE学习:异步组件
如果提供了一个加载组件,它将在内部组件加载时先行显示。在加载组件显示之前有一个默认的 200ms 延迟——这是因为在网络状况较好时,加载完成得很快,加载组件和最终组件之间的替换太快可能产生闪烁,反而影响用户感受。是一个外层包装过的组件,仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将接收到的 props 和插槽传给内部组件,所以你可以使用这个异步的包装组件无缝地替换原始组件,同时实现延迟加载。如果提供了一个报错组件,则它会在加载器函数返回的 Promise 抛错时被渲染。异步组件可以搭配内置的。原创 2024-05-27 14:44:52 · 69201 阅读 · 32 评论 -
16 VUE学习:依赖注入
想象一下这样的结构:有一些多层级嵌套的组件,形成了一棵巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。但如果你正在构建大型的应用,包含非常多的依赖提供,或者你正在编写提供给其他开发者使用的组件库,建议最好使用 Symbol 来作为注入名以避免潜在的冲突。如果组件链路非常长,可能会影响到更多这条路上的组件。在应用级别提供的数据在该应用内的所有组件中都可以注入。有的时候,我们可能需要在注入方组件中更改数据。最后,如果你想确保提供的数据不能被注入方的组件更改,你可以使用 [原创 2024-05-27 10:39:31 · 68891 阅读 · 6 评论 -
15 VUE学习:插槽slot
如果我们将这个概念拓展一下,可以想象的是,一些组件可能只包括了逻辑而不需要自己渲染内容,视图输出通过作用域插槽全权交给了消费者组件。Vue 组件的插槽机制是受[原生 Web Component `` 元素]的启发而诞生,同时还做了一些功能拓展,这些拓展的功能我们后面会学习到。现在组件可以用在不同的地方渲染各异的内容,但同时还保证都具有相同的样式。插槽内容可以访问到父组件的数据作用域,因为插槽内容本身是在父组件模板中定义的。在上面的[渲染作用域]中我们讨论到,插槽的内容无法访问到子组件的状态。原创 2024-05-23 11:01:45 · 72318 阅读 · 72 评论 -
14 vue学习:透传Attributes
对象总是反映为最新的透传 attribute,但它并不是响应式的 (考虑到性能因素)。“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 [props]或 [emits]的 attribute 或者。最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。当一个组件以单个元素为根作渲染时,透传的 attribute 会自动被添加到根元素上。和单根节点组件有所不同,有着多个根节点的组件没有自动 attribute 透传行为。原创 2024-05-21 09:43:07 · 72377 阅读 · 16 评论 -
13 VUE学习:组件v-model
这两个选项在从模型引用中读取或设置值时会接收到当前的值,并且它们都应该返回一个经过处理的新值。返回的值是一个 ref。值且父组件没有为该 prop 提供任何值,会导致父组件与子组件之间不同步。在下面的示例中,父组件的。参数]小节中学到的指定参数与事件名的技巧,我们可以在单个组件实例上创建多个。把这个 ref 绑定到一个原生 input 元素上,在提供相同的。这里是另一个例子,展示了如何在使用多个不同参数的。在某些场景下,你可能想要一个自定义组件的。的返回值,可以在子组件中访问添加到组件。原创 2024-05-21 09:04:28 · 72638 阅读 · 7 评论 -
12 VUE学习:事件
注意这里我们触发了一个以 camelCase 形式命名的事件,但在父组件中可以使用 kebab-case 形式来监听。尽管事件声明是可选的,我们还是推荐你完整地声明所有要触发的事件,以此在代码中作为文档记录组件的用法。同时,事件声明能让 Vue 更好地将事件和[透传 attribute]作出区分,从而避免一些由第三方代码触发的自定义 DOM 事件所导致的边界情况。平级组件或是跨越多层嵌套的组件间通信,应使用一个外部的事件总线,或是使用一个[全局状态管理方案]。和原生 DOM 事件不一样,组件触发的事件。原创 2024-05-20 10:51:51 · 72538 阅读 · 16 评论 -
11 VUE学习:注册和props
因为在编译时整个表达式都会被移到外部的函数中。原创 2024-05-20 10:21:35 · 72015 阅读 · 4 评论 -
10 VUE学习:模板和组件基础
当使用构建步骤时,我们一般会将 Vue 组件定义在一个单独的.vuesetup() {},`// 也可以针对一个 DOM 内联模板:这里的模板是一个内联的 JavaScript 字符串,Vue 将会在运行时编译它。你也可以使用 ID 选择器来指向一个元素 (通常是原生的元素),Vue 将会使用其内容作为模板来源。上面的例子中定义了一个组件,并在一个.js。原创 2024-05-20 01:02:42 · 71954 阅读 · 8 评论 -
09 VUE学习:生命期钩子和侦听器
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。但在某些场景中,我们希望在创建侦听器时,立即执行一遍回调。然而在有些情况下,我们需要在状态变化时执行一些“副作用”:例如更改 DOM,或是根据异步操作的结果去修改另一处的状态。中用同步语句创建的侦听器,会自动绑定到宿主组件实例上,并且会在宿主组件卸载时自动停止。可能会比深度侦听器更有效,因为它将只跟踪回调中被使用到的属性,而不是递归地跟踪所有的属性。原创 2024-05-20 00:16:12 · 71801 阅读 · 2 评论 -
08 vue学习:表单输入绑定
元素会渲染成一个“未选择”的状态。因此,我们建议提供一个空值的禁用选项,如上面的例子所示。attribute,因为浏览器在表单提交时,并不会包含未选择的复选框。为了保证这两个值 (例如:“yes”和“no”) 的其中之一被表单提交,请使用单选按钮作为替代。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。幸运的是,我们可以使用 Vue 构建具有自定义行为的可复用输入组件,并且这些输入组件也支持。在前端处理表单时,我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。原创 2024-05-17 16:56:34 · 73168 阅读 · 11 评论 -
07 VUE学习:事件处理
在某些键盘上,特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘,如 Knight 键盘,space-cadet 键盘,meta 都被标记为“META”。尽管我们可以直接在方法内调用,但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。使用修饰符时需要注意调用顺序,因为相关代码是以相同的顺序生成的。原创 2024-05-17 16:37:28 · 72312 阅读 · 3 评论 -
06 VUE学习:条件渲染和列表渲染
Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用,因此用另一个包含部分重叠对象的数组来做替换,仍会是一种非常高效的操作。当数据项的顺序改变时,Vue 不会随之移动 DOM 元素的顺序,而是就地更新每个元素,确保它们在原本指定的索引位置上渲染。为了给 Vue 一个提示,以便它可以跟踪每个节点的标识,从而重用和重新排序现有的元素,你需要为每个元素对应的块提供一个唯一的。是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建。来遍历一个对象的所有属性。原创 2024-05-17 15:54:48 · 72032 阅读 · 2 评论 -
05 VUE学习:类与样式绑定
中使用了需要[浏览器特殊前缀]的 CSS 属性时,Vue 会自动为他们加上相应的前缀。如果浏览器不支持某个属性,那么将尝试加上各个浏览器特殊前缀,以找到哪一个是被支持的。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。除了字符串外,表达式的值也可以是对象或数组。同样的,如果样式对象需要更复杂的逻辑,也可以使用返回样式对象的计算属性。支持绑定 JavaScript 对象值,对应的是 HTML 元素的。原创 2024-05-17 14:50:56 · 71898 阅读 · 2 评论 -
04 VUE学习:计算属性
更改快照是没有意义的,因此计算属性的返回值应该被视为只读的,并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。一个计算属性的声明中描述的是如何根据其他值派生一个值。模板中的表达式虽然方便,但也只能用来做简单的操作。若我们将同样的函数定义为一个方法而不是计算属性,两种方式在结果上确实是完全相同的,然而,不同之处在于。计算属性的 getter 应只做计算而没有任何其他的副作用,这一点非常重要,请务必牢记。更重要的是,如果在模板中需要不止一次这样的计算,我们可不想将这样的代码在模板里重复好多遍。原创 2024-05-17 14:16:18 · 70670 阅读 · 2 评论 -
02 VUE学习:模板语法
Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。在底层机制中,Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统,当应用状态变更时,Vue 能够智能地推导出需要重新渲染的组件的最少数量,并应用最少的 DOM 操作。原创 2024-05-16 11:55:22 · 69736 阅读 · 0 评论 -
01 VUE学习:开始
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。原创 2024-05-16 10:35:31 · 69655 阅读 · 0 评论 -
Vue学习:webpack-dev-server和nginx问答
这在大多数情况下是可行的,但如果你的后端服务器对请求的 Origin 属性有严格的检查,或者你需要代理到不同的域,那么你就需要设置 changeOrigin 为 true。当 changeOrigin 设置为 true 时,如果原始请求中的 Origin 是 http://localhost:8080,那么在代理请求中,Origin 会被修改为 https://api.example.com。需要注意的是,pathRewrite 的配置应该根据你的实际后端API路径和你想要的前端请求路径来设置。原创 2024-04-22 09:35:58 · 60938 阅读 · 4 评论