导图社区 vue 基础
前一阵子看了很多关于vue的知识点,自己理解着整理一下,再加深一下印象。也希望可以帮助到有需要的同学。
编辑于2022-06-26 11:21:07在资料分析中,平均数问题频繁出现,是考试的重点考察内容。该模板全面且系统地梳理了平均数问题的各个考点,为考生构建起清晰的知识体系。现期平均数是基础考点,模板中不仅给出了其公式定义“平均数 = 总数/个数”,还详细列举了常见的考察形式,如直接求平均数、求总数、求个数,同时提供了速算技巧——截位直除,帮助考生快速准确地得出答案。基期平均数的讲解同样细致,明确公式定义后,指出其速算技巧类似于基期比重的计算,让考生能够触类旁通,提高解题效率。两期平均数比较是考生容易出错的地方,模板通过清晰的升降判断规则“a > b 上升,a < b 下降”,帮助考生准确判断平均数的变化趋势,避免失误。平均数增长率和平均数增长量这两个考点也有深入剖析。借助万兴脑图制作的这一思维导图模板,考生可以在备考过程中快速梳理知识点,查漏补缺,加深对平均数问题考点的理解和记忆。在考试时,能够迅速调用相关知识,运用速算技巧,提高答题速度和准确率。它是考生提升资料分析成绩、实现考试突破的得力助手,助力考生在竞争激烈的考试中脱颖而出。
大学计划和规划,大学四年,是人生中一个充满无限可能与挑战的宝贵阶段。为即将或正在经历这一阶段的学子们提供一份详尽而实用的指南,帮助大家从入学之初就树立明确的目标,制定合理的计划,逐步构建起扎实的专业知识体系。
经济学基础(2025中级经济师),涵盖广泛的经济学基础知识,内容结构清晰,分为多个部分或章节,针对考试的重点和难点,进行有针对性的学习和练习,提高解题能力和应试技巧。
社区模板帮助中心,点此进入>>
在资料分析中,平均数问题频繁出现,是考试的重点考察内容。该模板全面且系统地梳理了平均数问题的各个考点,为考生构建起清晰的知识体系。现期平均数是基础考点,模板中不仅给出了其公式定义“平均数 = 总数/个数”,还详细列举了常见的考察形式,如直接求平均数、求总数、求个数,同时提供了速算技巧——截位直除,帮助考生快速准确地得出答案。基期平均数的讲解同样细致,明确公式定义后,指出其速算技巧类似于基期比重的计算,让考生能够触类旁通,提高解题效率。两期平均数比较是考生容易出错的地方,模板通过清晰的升降判断规则“a > b 上升,a < b 下降”,帮助考生准确判断平均数的变化趋势,避免失误。平均数增长率和平均数增长量这两个考点也有深入剖析。借助万兴脑图制作的这一思维导图模板,考生可以在备考过程中快速梳理知识点,查漏补缺,加深对平均数问题考点的理解和记忆。在考试时,能够迅速调用相关知识,运用速算技巧,提高答题速度和准确率。它是考生提升资料分析成绩、实现考试突破的得力助手,助力考生在竞争激烈的考试中脱颖而出。
大学计划和规划,大学四年,是人生中一个充满无限可能与挑战的宝贵阶段。为即将或正在经历这一阶段的学子们提供一份详尽而实用的指南,帮助大家从入学之初就树立明确的目标,制定合理的计划,逐步构建起扎实的专业知识体系。
经济学基础(2025中级经济师),涵盖广泛的经济学基础知识,内容结构清晰,分为多个部分或章节,针对考试的重点和难点,进行有针对性的学习和练习,提高解题能力和应试技巧。
vue 基础
day1
指令
内容渲染指令
v-text
缺点:覆盖元素中的默认内容
{{ }}
插值只能用在元素的内容节点,无法用在属性节点
v-html
用处:把带有 HTML 标签的字符串,渲染为真正的 DOM 元素
属性绑定指令
v-bind:
简写 :
事件绑定指令
v-on:
简写 @
@click="show" 和 @click="show(传参)"
内置的变量 $event
@click="show(3, $event)"
事件修饰符
.prevent
.stop
按键修饰符
.esc
.enter
双向数据绑定指令
v-model
只能用在表单元素上
修饰符
.number
.trim
.lazy
循环渲染指令
v-for="(item, index) in 数组"
:key="item.id"
拿索引当 key 没有意义
条件渲染指令
v-if
动态创建和移除元素
v-else-if
v-else
v-show
动态添加和移除 display: none 样式
过滤器
全局过滤器
Vue.filter('名字', function(过滤器前面的值) { return 结果 })
私有过滤器
定义到组件的 filters 节点之下
调用
{{ message | dateFormat }}
day2
watch
两种格式
方法格式
简单
username(newVal, oldVal) {}
对象格式
username: {
handler(newVal, oldVal) {}, deep: true, immediate: true
computed
在定义的时候,要定义为 function
在使用的时候,当作普通属性使用即可
在 template 模板结构中可以使用
在 methods 方法中,也可以使用
this.计算属性的名字
要 return 一个计算的结果
只要任何一个依赖的数据项发生了变化,计算属性就会重新旧值
vue-cli
全局安装
npm install @vue/cli -g
创建项目
vue create 项目的名称
组件的构成
template
只能有唯一的根节点
script
export default {}
.vue 中的 data 必须是方法
style
启用 less 语法
lang="less"
防止组件之间样式冲突
scoped
/deep/ 深度选择器
在需要覆盖第三方组件样式的时候,会用到
day3
props
极大的提高组件的复用性!
定义 props 有两种格式
数组格式
简单
props: ['init']
对象格式
定义的时候稍微复杂
props: {
init: { type: Number, default: 0, required: true } }
props 是只读的,因此在项目开发中,不要直接修改它的值。
把 props 的值,“转存”到 data 中,就可以进行读写操作。
生命周期
概念:每个组件从创建 -> 运行 -> 销毁的一个过程,强调的是一个时间段!
生命周期函数
概念:在生命周期的不同阶段,会按次序、自动依次执行的函数,叫做生命周期函数。强调的是时间点。
三个阶段
创建阶段
beforeCreate
created
发起 Ajax 最早的时机,请求数据
beforeMount
mounted
组件第一次被渲染到浏览器中
操作 DOM 的最早的时机
运行阶段
beforeUpdate
updated
能够操作到最新的 DOM 元素
销毁阶段
beforeDestroy
destroyed
组件之间的数据共享
父 -> 子
自定义属性
子组件中,通过 props 来自定义属性
父组件中,负责把数据,通过 v-bind: 绑定给子组件
子 -> 父
自定义事件
在子组件中调用 this.$emit() 来触发自定义事件
参数1:字符串,表示自定义事件的名称
参数2:值,要发送给父组件的数据
在父组件中,通过 v-on: 来绑定自定义事件,并提供一个事件处理函数。通过事件处理函数的形参,接收到子组件传递过来的数据。
兄弟组件共享数据
EventBus
数据发送方
导入 eventBus.js
import bus from './eventBus.js'
bus.$emit('要触发的事件的名字', 要发送的数据)
EventBus 模块
创建 vue 的实例对象 new Vue()
向外导出 Vue 的实例对象
export default new Vue()
数据接收方
导入 eventBus.js
import bus from './eventBus.js'
bus.$on('要声明的自定义事件的名字', 事件的处理函数)
通过事件处理函数的形参,可以接收到发送过来的数据
在数据接收方的 created 生命周期函数中,调用 bus.$on() 方法