vue中v-on和v-bind的特点与区别

1.v-on

• 缩写：@

• 写法，比如v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click，更多示例如下：

  <!-- 方法处理器 -->
  <button v-on:click="doThis"></button>
  
  <!-- 动态事件 -->
  <button v-on:[event]="doThis"></button>
  
  <!-- 内联语句 -->
  <button v-on:click="doThat('hello', $event)"></button>
  
  <!-- 缩写 -->
  <button @click="doThis"></button>
  
  <!-- 动态事件缩写 -->
  <button @[event]="doThis"></button>
  
  <!-- 停止冒泡 -->
  <button @click.stop="doThis"></button>
  
  <!-- 阻止默认行为 -->
  <button @click.prevent="doThis"></button>

2、v-bind

缩写：: 或 .

v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

 v-bind 主要用于属性绑定，Vue官方提供了一个简写方式 :bind,如：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

更多示例：

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 动态 attribute 名缩写 -->
<button :[key]="value"></button>

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

3、区别

v-bind：是用来绑定属性的，即属性对数据绑定
v-on：用来绑定事件的。
v-on使用的时候一般写在methods方法里面，即属事件对接口（methods）的绑定
v-bind使用的时候一般写在data里面。

最后

以上就是专注老鼠为你收集整理的vue中v-on和v-bind的特点与区别的全部内容，希望文章能够帮你解决vue中v-on和v-bind的特点与区别所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。