Vue 总结（1） 属性绑定

标签：style   string   字符   nbsp   ref   修饰符   class   操作   inpu   

一.V-on： 缩写@

   绑定事件监听器   

<button v-on:click="doThis"></button>

    on后面接着就是事件   

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

二. v-bind  缩写：（就一个冒号）

  <!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

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

<!-- 内联字符串拼接 -->
<img :src="‘/path/to/images/‘ + fileName">

   用对象绑定class

:class="{red:isactive}" 
用isactive的 布尔值来判断，可以写一个事件动态操作这个布尔值




五.ref

<input ref="usernameInput"></input>

this.$refs.usernameInput.value  可以访问上个input的内容

Vue 总结（1） 属性绑定

标签：style   string   字符   nbsp   ref   修饰符   class   操作   inpu   

原文地址：https://www.cnblogs.com/nice2018/p/10036177.html