一、v-on与v-bind的区别
v-bind指令用于设置HTML属性:v-bind:href 缩写为 :href
<a :href="{{url}}">aa</a>
v-on 指令用于绑定HTML事件 :v-on:click 缩写为 @click
<a @click="get()">aa</a>
最好不要用@,因为asp.net mvc页面识别@ 不太好
<a v-on:click="get()">aa</a>
二、v-on。将原生事件绑定到组件
如果想要在一个组件的根元素上直接监听一个原生事件。这时,你可以使用 v-on
的 .native
修饰符:
|
在有的时候这是很有用的,不过在你尝试监听一个类似 <input>
的非常特定的元素时,这并不是个好主意。比如上述 <base-input>
组件可能做了如下重构,所以根元素实际上是一个 <label>
元素:
|
这时,父级的 .native
监听器将静默失败。它不会产生任何报错,但是 onFocus
处理函数不会如你预期地被调用。
为了解决这个问题,Vue 提供了一个 $listeners
属性,它是一个对象,里面包含了作用在这个组件上的所有监听器。例如:
|
有了这个 $listeners
属性,你就可以配合 v-on="$listeners"
将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 <input>
的你希望它也可以配合 v-model
工作的组件来说,为这些监听器创建一个类似下述 inputListeners
的计算属性通常是非常有用的:
|
现在 <base-input>
组件是一个完全透明的包裹器了,也就是说它可以完全像一个普通的 <input>
元素一样使用了:所有跟它相同的特性和监听器的都可以工作。