1.v-if和v-show
v-if 和v-show都可以顯示和隱藏元素；
區別：（1）v-if初始值為false那么這個元素不會被渲染 ，v-show不管初始值為何值都會被渲染
（2）v-if是控制DOM元素是否插入，v-show是控制css的display屬性
（3）v-if適合隱藏尚未加載的內容或切換顯示與隱藏頻率較低的地方，v-show反之;
此外還有兩個條件陳述句和v-if有關：v-else-if ,v-else
1 <div v-if="state==='loading'">加載中，，，</div> 2 <div v-else-if="state==='errr'">出錯了，，，</div> 3 <div v-else>我的內容</div>
當根據state的值顯示不同的內容
2.v-for回圈
直接看示例：
<ul> <li v-for="（item，index） in state " :key="item.index">{{item.content}}</li> </ul>
該指令可遍歷物件也可遍歷陣列，key為li的唯一識別符號，可保證高效渲染，還可以保證標簽順序不會錯亂；
3.v-bind屬性系結，簡寫 “ : ”
示例
<button :type="test"></button>
該指令可以接收引數，用于將一個值系結到一個HTML的屬性上，上例為button的type引數系結了一個變數test，該值在data中可以為任何button型別，這個指令對于disabled和checked同樣有效，就看為false還是true，判定是否生效
4.v-on事件系結，簡寫 '@事件名'
該指令將事件系結到元素上，將事件名稱作為引數，將事件偵聽器作為傳入值
<button v-on:click="counter++"></button> <!-- 按鈕單擊counter的值加1 --> <button v-on:click="counter"></button> <!-- counter也可以作為方法名，呼叫執行該函式，如果加()可在其中傳遞引數 -->
事件修飾符
可以根據事件修飾符來修改事件偵聽器或者事件本身 例 @click.self
阻止執行事件的默認行為 .prevent修飾符 例如阻止a標簽的默認跳轉
阻止事件繼續傳播，避免在父級元素觸發 .stop
只讓事件執行一次 .once
事件捕獲，事件會傳遞到當前元素的下級元素前觸發（而在冒泡模式中，事件會先在當前元素上觸發，然后向上冒泡） .captrue
只讓事件在當前元素觸發，而不是在子元素上 .self
也可以只設定事件名+修飾符，修飾符可以進行鏈式操作 例如該例子會阻止單擊事件沿DOM樹向下傳遞，并且只有觸發第一次有效，@click.stop.captrue.once
系結鍵盤事件 @keyup,按下會觸發事件，@keyup(test) 在test函式中可以接收引數e,e為鍵盤上的任何按鈕代表的值，強大的vue給我們了修飾符，修飾符可以作為按鍵值作為修飾符@keyup.27代表esc鍵，也為常用的按鈕提供別名.enter,.tab等等
.exact可以指定按鍵觸發 @keydow.enter.exact 只有enter件可觸發
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/171270.html
標籤：JavaScript
上一篇：Webpack 4 Tree Shaking 終極優化指南
下一篇：模塊加載原理