Vue 好用语法 (v-for、v-show、v-bind、v-model、v-on、scoped)

v-for

写在 html tag 里面跑回圈，可设定 key

<div v-for="item in items" :key="item.id">  {{ item.text }}</div>

v-show

可以传递 true、false 值，让元素显示或隐藏

<h1 v-show="ok">Hello!</h1>

v-bind

可以用来传递 attributes、prop

传递 attributes (src、id、class...)时，可写成 v-bind:src="" 或是简写成 :src=""

<!-- 一般写法 --><div v-bind:class="success"></div><!-- 简写写法 --><div :class="success"></div>

v-model

可以用在 input、select、textarea 的双向绑定

在 input 输入的东西可以同步

<input v-model="message" /><p>Message is: {{ message }}</p>

v-on

跟事件有关指令，v-on:click="" 可以简写 @click=""

<!-- 一般写法 --><button v-on:click="doThis"></button><!-- 简写写法 --><button @click="doThis"></button>

scoped

可以写在 style tag，写在这里的 css 仅限于这个 component，不会影响到其他的 component

<style scoped>

参考资料:
https://vuejs.org/guide/introduction.html