1. 程式人生 > >vue之基本指令

vue之基本指令

 {{...}}(插值表示式):網速不好時會有延遲顯示(閃爍)問題

v-cloak可解決插值表示式閃爍問題
差值表示式有閃爍問題,可用v-html和v-text標籤
1.開發中一般使用v-html還是v-text?
取決於場景:
v-html可以解析html標籤,但是不安全。如果別人用script標籤寫了一段指令碼攻擊你,就不安全了。
v-text無法解析html標籤

v-bind:  繫結屬性(data中的屬性)   可簡寫為:
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
href綁定了data的url屬性值,加了"v-bind:"之後,url會被當做js表示式解析,而不是一個字串(會把雙引號之間的當做js表示式解析)

v-on: 繫結事件   雙引號之間的也會被當做js表示式解析,去methods中尋找
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>

v-model  資料的雙向繫結,限於表單元素
<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames.join(",")}}</span>
</div>
<script>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})
</script>