Vue学习基础版V4

 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)
//简介版写法