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>

猜你喜欢

转载自blog.csdn.net/shijiaolong0/article/details/85341803