vue学习笔记
关注
分享
扫一扫
文章平均质量分 55
vue的学习与分享
洛洛大芳
本人在校大学生一枚,还请多多指教
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue中的按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：这是一个键盘事件,修饰符为enter,按下enter键后会触发这个事件<input v-on:keyup.enter="submit">使用 keyCode attribute 也是允许的：不过已经被淘汰了了解一下就行了<input v-on:keyup.13="submit">你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：V.原创 2021-08-09 21:28:54 · 218 阅读 · 0 评论 -
vue中的created方法
created方法是vue生命周期的created方法,创建vue实例的时候会被调用,接下来我们看一下她的效果吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=原创 2021-08-09 21:20:37 · 13874 阅读 · 0 评论 -
vue中的监视属性watch
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的—>官方说明watch侦听器属性理解起来也不难的,就是用来监视属性的变化,变化之后要发什么动作全凭你自己决定,直接写在watch的方法里面就可以了,官方文档中也有说明侦听器<!DOCTYPE html><html lang="en"><head&g.原创 2021-08-09 21:17:25 · 274 阅读 · 0 评论 -
vue中的计算属性computed
模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。官方是这么阐述的,其实对于我们使涌多了也就不难理解了,就是说你自己定义在vue实例里的属性可以被用来计算然后你再使用,使用的场景也非常多,大多用于你的属性在动态的变化当中会用的很多的,需要计算属性,<!DOCTYPE html><html lang="en">&.原创 2021-08-09 21:10:05 · 196 阅读 · 0 评论 -
vue框架中常用指令v-for等等
v-for我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。下面是我的代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte原创 2021-08-09 21:02:44 · 333 阅读 · 0 评论 -
vue框架绑定class属性的几种方式
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。v-bind:class 一个对象，以动态地切换 class：<div v-bind:class="{ active: isActive }">原创 2021-08-09 20:44:25 · 553 阅读 · 0 评论 -
vue中的插值法
vue实例中的属性值可以赋值给html元素中,这个方法叫做插值法,用起来非常的简单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,.原创 2021-08-09 20:29:59 · 424 阅读 · 0 评论 -
v-model绑定表单元素数据双向绑定
vue里面的v-model指令是用来给表单元素绑定数据的,与v-bind的区别是,v-model只能作用于表单元素,v-bind绑定表单元素会失效,具体用法如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=.原创 2021-08-09 20:04:58 · 432 阅读 · 0 评论 -
vue使用axios时解决跨域请求
我们使用vue脚手架开发项目的时候绝对会遇到跨域的问题,这是无法避免的事情,那么一旦出现对小白来说(比如我)非常的头疼,不过凭借自己的能力解决之后成就感油然而生哈哈哈,废话不多说看教程之后重启服务器就可以看到数据了,我就不展示了,亲承有效...原创 2021-08-08 15:42:23 · 272 阅读 · 0 评论 -
vue中$的作用是什么
我们找到在vue的学习和使用中经常会看到这样的一个符号$(美元符号),那么很多人就可能产生了疑惑,这个符号有什么作用呢,其实也不难理解,这个是为了区分vue中的自带的实例和用户自定义的属性而已代码说明:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge".原创 2021-08-08 12:18:26 · 5176 阅读 · 1 评论 -
vue生命周期
生命周期函数beforeCreatecreatedbeforeMountedmountedbeforeUpdateupdatedbeforeDestorydestoryedbeforeCreate在vue实例创建之前执行created在vue实例创建之后执行beforeMounted在实例被挂载前调用mounted实例被挂载后调用beforeUpdate数据更新时调用updated数据更新完成时调用beforeDestory实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在原创 2021-08-08 11:52:04 · 130 阅读 · 0 评论 -
vue介绍和脚手架的安装教程
vue入门简介什么是vuevue.js安装脚手架的安装什么是vue这是官方的介绍:Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。vue官方链接vue.js安装vue.js的安装非常简单.如果你没有用到vue脚手架的话直接用它就行了,直接在官方网站里下载就可以了脚手原创 2021-08-07 23:07:10 · 260 阅读 · 0 评论