vue入门（三）事件（方法）处理、侦听器、模板引用

上一章：vue入门（二）export default常用代理，method和data，created、computed
下一章：vue入门（四）组件基础，$emits简单用法

1.基本用法
vue提供了两种用法，一种是直接把需要执行的语句写在html元素上：

<button @click="count++">Add 1</button>

这种适合比较简单的场景，需要执行的动作需要封装成方法时，就用第二种用法：
在export default里定义greet方法：

methods: {
  greet(event) {
    // 方法中的 `this` 指向当前活跃的组件实例
    alert(`Hello ${this.name}!`)
    // `event` 是 DOM 原生事件
    if (event) {
      alert(event.target.tagName)
    }
  }
}

在html中绑定：

<button @click="greet">Greet</button>

解释一下event，可以看到，这个参数并不是传进来的，是vue自己生成的一个对象，代表了当前的点击事件，很多场景下我们需要拿到点击的元素的id，内容或者什么的，那么就可以用到event.target，后面点出你想要的属性

2.加入参数：

methods:{
	alertCount(count){
		//这时就不需要声明event参数，直接用$使用：
		alert($event.target.innerText);
	    count++;
	    alert(count);
    }
}

<button @click="alertCount(count)">{{count}}</button>

这里有一个问题，count是我在data里定义的一个变量，初始值为0；在我重复点击这个button的时候，count没有一直增加，而是每次都是0，这是因为button上的count值并没有变化，为什么呢？答案就在上一讲里，因为alertCount里面的count并不是data里面的count，而是重新定义出来的，如果不传参直接使用，就会报错：找不到count

如果要在methods中使用count，正确的写法是this.count
3.侦听器
侦听器就是在每次响应式属性发生变化时，触发的方法，响应式属性就是在data()里的某一个定义的属性值，代码如下：

export default(){
	data(){
		return{
			msg:''
		}
	},
	watch:{
		msg(newValue,oldValue){	//这两个参数名可以自定义
			alert('我从'+oldValue+'变成了'+newValue);			
		}
	}	

这样你在其他地方，比如点击鼠标时会改变msg的值，同时就会触发msg的侦听器
下面还有一个深层侦听器，是可以侦听嵌套属性的，也就是vue自己改变了属性的值，而不是用户交互改变的，这种开销较大，暂不介绍
侦听器的其他选项：

watch: {
    question: {
      handler(newQuestion) {
        // 在组件实例创建时会立即调用
      },
      immediate: true	// 强制立即执行回调
      flush: 'post'	//在回调中能访问被Vue更新后的dom
    }
  }

4.模板引用
vue提供了ref的基础用法，我在这里再写一遍：

mounted(){
    this.$refs.input.focus();	//facous你用ref标记的input
    this.$refs.input.style.border = 0; 		//修改dom元素样式
  }

html:

<input ref="input">

然后vue又举了第二个在v-for里的例子：

mounted(){
    console.log(this.$refs.res);
  }

html:

<ul>
    <li ref="res" v-for="mes in items2" :key="mes">{{ mes }}</li>
  </ul>

这个测试的时候发现控制台并没有输出任何东西，卡了我一天，也没有发现原因。本来我一直以为是ref的问题，怎么调都不好用。第二天我才想起来测试一些其他地方的console，发现仍然没有打印出任何内容。
原来是因为我的浏览器没有显示

选中这个info，就能看到打印出的东西了。

上一章：vue入门（二）export default常用代理，method和data，created、computed
下一章：vue入门（四）组件基础，$emits简单用法