vue的侦听器、表单输入绑定、模版引用
一、侦听器
一般用于侦听数据变化。(只能监听动态数据)
watch:{
search(newvalue,oldvalue){
this.$emit("searchEvent",newvalue)
}
}
二、表单输入绑定
<template>
<input type="text" v-model="message ">
<p>{{message }}</p></template>
<script>
export default {
data() {
return {
message : ""
}}
}
</script>
修饰符:.lazy 、 .number 、 .trim
三、模版引用
虽然Vue的声明性渲染模型为你抽象了大部分对DOM的直接操作,但在某些情况下,我们仍然需要直接访问底层DOM元素。要实现这一点,我们可以使用特殊的ref 属性。
挂载结束后引用都会被暴露在this.$refs之上
<template>
<h3>表单输入绑定</h3>
<form action="">
<input type="text" v-model="message">
<p>{{ message }}</p>
</form>
</template>
<script>
export default {
data(){
return {
message: ""
}
}
}
</script>