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简单用法

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值