Vue基础知识学习总结
一、Vue之ref引用
1.1、ref引用之DOM元素
-
【作用】ref用来辅助开发者在不依赖与jQuery的情况下,获取DOM元素或组件的引用。
- 每个vue的组件实例上,都包含一个$refs对象,里面存储着对应的DOM元素或组件的引用。
- 默认情况下:组件的$refs指向一个空对象。
-
【使用】使用步骤如下:
- 第一步:标签上绑定ref属性
<h1 ref="myh1">App根组件</h1>
- 第二步:在需要触发的方法中获取使用
methods:{ showThis(){ //当前的app实例对象 console.log(this.$refs.myh1) //给这个标签元素换颜色 this.$refs.myh1.style.color = 'red' } }
1.2、ref引用之组件实例
-
【作用】可以使用ref引用页面上的组件实例,引用组件实例之后,可以调用组件上的methods中的方法
-
【使用】使用步骤如下:
- 第一步:引入组件,且为组件添加引用的名称
<my-counter ref="counterRef"></my-counter>
- 第二步:触发ref,通过this.$refs.引用名称,可以引用组件实例
methods:{ getRef(){ //引用到组件的实例后,就可以调用组件上的methods中方法 this.$refs.counterRef.add() } }
1.3、ref之this.$nextTick的应用场景
-
【作用】需要获取DOM重新渲染完成后的元素的时候使用
-
【使用】使用方式案例如下:让弹出的文本框自动获取焦点
- 第一步:文本框绑定ref,以及一个触发弹出文本框的按钮
//定义文本框 绑定ref @blur失去焦点触发的事件 <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef"/> //定义一个触发按钮 <button v-else @click="showInput">展示输入框</button>
- 第二步:让展示出来的文本框,自动获取焦点,通过showInput触发
methods:{ //1.点击按钮展示文本框 showInput(){ //1.切换布尔值,使文本框展示出来 this.inputVisible = true //2.让展示出来的文本框,自动获取焦点 this.$nextTick(() => { this.$refs.iptRef.focus() }) }, //2.失去焦点触发方法 showButton(){ this.inputVisible = false } }
-
【小结】组件$nextTick(cb)方法,会把cb回调推迟到下一个DOM更新周期之后执行。
- 通俗的理解是:等组件DOM更新完成之后,再执行cb回调函数。从而能保证cb回调函数可以操作到最新的DOM元素。
二、Vue之数组
2.1、数组遍历第一种forEach
- 【案例】在数组中查找一个元素,会遍历所有元素
const arr = ['你好','我是','苏大强','爹']
arr.forEach((item,index) => {
if(item === '苏大强'){
console.log(index)
})
2.2、数据遍历第二种some
- 【案例】在数组中查找一个元素,找到后即可会停止遍历
const arr = ['你好','我是','苏大强','爹']
arr.some((item,index) => {
if(item === '苏大强'){
//找到对应值后,可以通过return true 固定语法,终止some循环遍历
return true
}
})
2.3、数组遍历判断之every
- 【案例】循环遍历数据值,判断某个属性的所有值是否是true
const arr = [
{id:1,name:'西瓜',state:true},
{id:2,name:'芒果',state:true},
{id:3,name:'草莓',state:true}
]
//判断数组中,state的值是否都为true,每一项都满足则为true,否则为false
const result = arr.every(item => item.state)
2.4、数组之reduce方法
- 【原始案例】计算数组state:true的数据单价之和
const arr = [
{id:1,name:'西瓜',state:true,price:10,count:1},
{id:2,name:'芒果',state:true,price:20,count:2},
{id:3,name:'草莓',state:true,price:30,count:3}
]
//需求:把购物车数组中,已经勾选的水果,总价计算出来
arr.filter(item => item.state).forEach(item => {amt += item.price * item.count})
console.log(amt)
//arr.filter(item => item.state).reduce((累加的结果,当前循环的对象) => {},初始值)
const result = arr.filter(item => item.state).reduce((amt,item) => {
return amt += item.price * item.count
},0)
//简介版写法
const result = arr.filter(item => item.state).reduce((amt,item) => amt += item.price * item.price,0)