Vue学习基础版V4.0.0

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)