v-model：雙向資料綁定
- .lazy：取代 input 监听 change 事件。
- .number：输入字符串转为数字。
- .trim：输入去掉首尾空格。
v-on：搭配methods(fun)
- 指出一個指令應該以特殊方式綁定。
- prevent修飾符告訴v-on指令對於觸發的事件調用event.preventDefault()：
- v-on觸發事件的methods裡面的方法abc方法中，我们更新了应用的状态，但没有触碰DOM
- 所有的DOM操作都由Vue来处理，你编写的代码只需要关注逻辑层面即可
v-bind
- 縮寫:
綁定vbind/props
屬性的綁定,如(背景圖片Css/class)"{active:isActive}"
可以用於響應式地更新HTML屬性：
寫在el=>data裡面以達到乾淨
boolean
值是null、undefined或false，则disabled特性甚至不会被包含在渲染出来的元素中。
CSS屬性名可以用駝峰式(camelCase)或短橫線分隔(kebab-case，記得用單引號括起來)來命名：
自动添加前缀
:key
並使用
v-bind綁定key屬性:key，讓陣列或物件裡的元素保有唯一性，當元素更新時，可以確保重新渲染元素。
| 1直接绑定class样式 | 1、绑定classA |
|---|---|
| 2绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式 | 2、绑定class中的判断 |
|---|---|
| 3绑定class中的数组 | 3、绑定class中的数组 |
|---|---|
| 4绑定class中使用三元表达式判断 | 4、绑定class中的三元表达式判断 |
|---|---|
| 5绑定style | 5、绑定style |
|---|---|
| 6用对象绑定style样式 | 6、用对象绑定style样式 |
|---|---|
v-for
v-for：陣列資料呈現，從清單裡面一個一個抓出來
v-show:html會保存結構
v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。
v-if:html不會保存
v-if跟v-show差別
| 比較 | v-if |
v-show |
|---|---|---|
| 多層條件判斷 | 可以加上v-else-if與v-else，所以條件判斷的狀況可以比較多。 |
只能對單獨元素做true或false的判斷。 |
| 渲染HTML元素時機 | 當條件為true才會實際渲染元素，如果一開始條件為false則不會進行任何事情。(lazy) | 無條件渲染元素，不管條件true或false，元素一定會被建立，然後再進行條件判斷，使用css的display屬性來做顯示或消失的效果。 |
使用<template>元素 |
可以使用。 | 無法使用。 |
| 在何時花費較多運算時間？ | 切換條件時：因為當條件成立時就會重新渲染元素一次，即使元素已存在，所以在切換條件時，會花費較多運算時間。 | 初始渲染元素時：不管條件真假，一定會將元素建立出來。 |
| 使用時機 | 條件控制比較複雜的時候，或則控制條件不太會改變，使用v-if比較好。 |
頻繁切換條件的時候，使用v-show比較好。 |
v-if和v-show的区别：
- v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
- v-show：调整css dispaly属性，可以使客户端操作更加流畅。
v-text
我们已经用的是,这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的。Vue给我们提供的v-text,就是解决这个问题的
v-html
- 为了输出真正的HTML，你就需要使用v-html 指令。
- 需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
v-pre
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
v-cloak
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
v-once
- 用途：只會渲染元素一次，之後的重新渲染，元素或其子元素將被視為靜態內容
- 如果此元素不需要重複建立，可以達到優化效能的效果。
- 在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
v-cloak
加上樣式隱藏解決完成編譯前顯示變數的問題