自学前端开发 - VUE 框架 (二)：模板引用、事件处理、表单输入绑定、生命周期、侦听器、组件基础

@[TOC](自学前端开发 - VUE 框架 (二) 事件处理、表单输入绑定、生命周期、侦听器、组件基础)

模板引用

模板引用就是直接访问模板对象实例。最经常使用的例子就是使用元素对象或组件对象的方法。如果使用的是原生 DOM 对象，还可以使用 JS 的方式来获取元素对象(例如使用 getElementById 方法)，对于 VUE 组件对象，就需要使用模板引用了。

设置模板引用

使用模板引用时，需要在元素或组件上设置一个特殊属性 ref，它能够在元素或组件挂载后，获取其直接引用。

<input ref="input">
<el-table ref="table">

访问模板引用

设置了特殊属性 ref 后，可以通过应用对象的 $refs 属性进行访问

<script>
export default {
     
  mounted() {
     
    this.$refs.input.focus()
  }
}
</script>

<template>
  <input ref="input" />
</template>

注意，只可以在组件挂载后才能访问模板引用。

使用数组

当在 v-for 中使用模板引用时，相应的引用中包含的值是一个数组

<script>
export default {
     
  data() {
     
    return {
     
      list: [
        /* ... */
      ]
    }
  },
  mounted() {
     
    console.log(this.$refs.items)
  }
}
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">
      {
  { item }}
    </li>
  </ul>
</template>

需要注意的是，ref 数组并不保证与源数组相同的顺序。

函数模板引用

除了使用字符串值作名字，ref 属性还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数：

<input :ref="el => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">

这样就能够在使用数组时保证顺序正确了

    <li v-for="(item, index) in list" :ref="el => items[index] = el">
      {
  { item }}
    </li>

需要注意的是使用动态的 :ref 绑定才能够传入一个函数。当绑定的元素被卸载时，函数也会被调用一次，此时的 el 参数会是 null。也可以绑定一个组件方法而不是内联函数。

另外，绑定 ref 属性的值可以没有经过定义就进行使用。实际上会将此值作为 this.$refs 这个对象的 key 来保存引用。而使用 :ref 则必须使用函数模板引用，而函数内部使用的变量必须是定义并暴露的，否则将无法正常访问引用。

使用对象

使用函数也可以将模板引用赋值给对象的成员，这样可以将若干组件来分类

<script>
export default {
     
	data() {
     
		return {
     
			inputRefs: ref({
     })
		}
	},
	mounted() {
     
		console.log(this.$refs.inputRefs)
	}
}
</script>

<template>
    <input name='address' :ref="el => inputRefs['address'] = el" />
    <input name='age' :ref="el => inputRefs['age'] = el" />
</template>

直接定义为对象或数组成员

直接将对象成员设置为 ref 的属性是不行的，例如

<input name='age' ref="input['age']" />

vue 会将 input['age'] 看作一个字符串整体而不是一个对象和其属性，调用时就成了 this.$refs."input['age']"。对于数组也是同理。

事件处理

可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。事件处理器的值可以是：

• 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
• 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器

内联事件处理器通常用于简单场景，例如：

data() {
   
  return {
   
    count: 0
  }
}

<button @click="count++">Add 1</button>
<p>Count is: {
  { count }}</p>

方法事件处理器

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

data() {
   
  return {
   
    name: 'Vue.js'
  }
},
methods: {