Vue.js进阶【1.1】Vue的基本语法

Vue.js进阶文章列表

v-bind

 https://cn.vuejs.org/v2/api/#v-bind  

用法：

v-bind:attribute="attributeValue"

简写：

:attribute="attributeValue"

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

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

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

v-on

官方网址：https://cn.vuejs.org/v2/api/#v-on

 用法：

v-on:click="doThis"

简写

@click="doThis"

也可以用于子组件传递父组件的方法调用

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>