Vue 注意事项

Top 1

v-once：标签的内容只改变一次；

<span v-once>这个将不会改变: {{ msg }}</span>

Top 2

v-html：将内容以HTML格式输出，而非文本形式；

<span v-html="rawHtml">

Top 3

v-bind:disabled：只要后面存在值就代表为true；如果想禁用该标签，需要让isButtonDisabled的值等于 null、undefined 或 false；

<button v-bind:disabled="isButtonDisabled">Button</button>

Top 4

Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

需要注意的是 只支持 表达式

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

Top 5

动态属性，动态事件

<a :[key]="url"> ... </a>

<a @[event]="doSomething"> ... </a>

Top 6

不推荐同时使用 v-if 和 v-for。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。