最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容。一、钩子函数在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁出现,也相信给很多初学者带来了困扰。那到底什么是钩子函数呢?按我个人的理解,钩子函数就是一个函数,他最大的特点就是在生命周期执行流程中去执行的。 钩子函数钩子函数,就是挂载一些东西的,我们把需要实现的一些
Vue中key值的作用首先v-for
在列表渲染时,我们可以用v-for基于一个数组来渲染一个列表。v-for指令需要使用item in arr形式的特殊语法来进行渲染列表,arr是源数据,<ul id="example-1">
<li v-for="item in arr" :key="item.id">
{{ item.message }}
</l
转载
2024-04-04 18:45:09
153阅读
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明: 如上图所示, A与B、A与C、B与D、C与E组件
转载
2024-08-14 17:30:13
121阅读
1.props的验证props可以指定类型:string、number、boolean、array、object类型 传递动态和静态的props:title是静态,:age是动态默认值default,必选项required 默认值如果是数组或者对象,必须返回一个function2.插槽:内容分发,同一个内容的不同展示效果1.基础插槽:SlotDemo与Slot2.具名插槽:template中slo
转载
2024-10-19 10:03:10
46阅读
文章目录Vue学习笔记(二)login404总结参考 Vue学习笔记(二)学习vue-admin-templatehttps://github.com/PanJiaChen/vue-admin-template上一篇中分析了vue-admin-template的入口逻辑,包括main.js, App.vue, router。这篇根据router来分析下其他的页面。 下面是一部分路由代码,也是这篇
转载
2024-09-29 11:33:24
113阅读
1class:class="{item:true,selectedT:item.selected==1}
转载
2018-01-08 11:08:45
572阅读
Vue中有2种数据绑定的方式:1. 单向绑定(v-bind): 数据只能从data流向页面。2. 双向绑定(v-model): 数据不仅能从data
原创
2022-12-21 10:28:56
658阅读
v-bind:class=" " 绑定样式 <div id="app">
值是对象形式,字段名是class样式名,值是boolean值,true是引用该样式,false不引用 -->
值是false,只是不引用该样式,并不是就不显示该元素了 -->
<p v-bind:class="{red:true}
转载
2021-05-10 19:25:49
824阅读
2评论
<template>
<div id="app">
<h2>{{msg}}</h2>
<br>
<div v-bind:title="title">鼠标瞄上去看一下</div>
<img src="https://www.load
转载
2021-08-13 09:30:33
483阅读
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用: 完整地触发组件的生命周期钩子 触发过渡 当 text 发生改变时,<span> 会随时被更新,因此会触发过渡。 更新:2019.1.7 对于
转载
2019-01-07 14:45:00
87阅读
2评论
应用实例html js 注意这里要用methods,不要忘记了s。
原创
2021-08-05 16:20:40
1213阅读
上面所说的UI控件一般指的是表单控件。 input:text <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, ini
转载
2020-12-11 15:29:00
789阅读
1.Vue如何处理事件? v-on 指令用法 <input type = 'button' v-on:click = 'num++'/> v-on 简写形式 <input type = 'button' @click = 'num++'/> 2.事件函数的调用方式 直接绑定函数名称 <button ...
转载
2021-09-26 10:45:00
468阅读
2评论
使用textarea {{message}} 使用radio 性别: 男 女 选中了谁: {{message}} 使用select下拉框 value: {{message}} 总结 1.通过双向绑定,得出需要用到 [^ textarea] 进行绑定 [^ texterea]:在文本区域插值 ({{t
原创
2022-06-28 14:08:58
826阅读
# Vue 绑定 Axios 的实现指南
在现代的前端开发中,Vue.js 和 Axios 的结合使用已经成为一种常见的模式。Vue.js 是一个构建用户界面的渐进式框架,而 Axios 是一个基于 Promise 的 HTTP 客户端,它可以用于浏览器和 Node.js 中。本文将带领你通过一系列的步骤实现 Vue.js 中绑定 Axios 的功能,帮助你更好地进行数据请求和处理。
## 流
绑定class样式--字符串写法<div class="basic" :class="mood" @click="changeMood">{{name}}</div>绑定class样式--数组写法<div class="basic" :class="classArr">123</div>绑定class样式--对象写法<div class="ba
原创
2022-12-22 22:31:40
249阅读
单向数据绑定:data流入页面,data一变,页面也变 双向数据绑定:data与页面双向绑定,互相影响,v-model:value="" v-model="" 只有输入dom才有value,v-model会默认收集输入类dom的value,所以可以去掉:value (v-model类似react中的 ...
转载
2021-07-19 23:39:00
381阅读
2评论