1.插值

插值:实际是一段可执行的js代码。
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

  1. <!-- 引用vue对象中的data -->
  2. <span>Message: {{ msg }}</span>
  3. <!-- 使用一般的js计算逻辑 -->
  4. <span>Message: {{ 1 + 1 }}</span>
  5. <!-- 使用一般的js表达式 -->
  6. <span>Message: {{ msg=== 'msg'?'是的' : '不是的' }}</span>
  8. <!--v-once -->
  9. <span v-once>这个将不会改变:[不会随着msg改变] {{ msg=== 'msg'?'是的' : '不是的' }}</span>
  11. <!-- 使用v-html渲染HTML文件 -->
  12. <p>Using mustaches: {{ rawHtml }}</p>
  13. <p>Using v-html directive: <span v-html="rawHtml"></span></p>

2.指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。
指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
vue指令有很多：请参考指令大全。【用的时候学习】

  2. <!--1. 在标签上使用vue的数据，需要使用v-bind:  -->
  3. <!--url会从vue中获取值  -->
  4. <a v-bind:href="url">...</a>
  6. <!--2. 在标签上使用vue的方法，需要使用v-on:  -->
  7. <!--会从vue中寻找方法，doSomething -->
  8. <a v-on:click="doSomething">...</a>
  10. <!--3. 动态参数  -->
  11. <!--会从vue中数据key的值，再进行具体属性的处理 -->
  12. <a v-on:[key]="doSomething">...</a>

  1. 动态参数 要确保参数的有效性。否则会报错

  2. v-bind:[key] 可简写为 :[key]

  3. v-on:[key] 可简写为@[key]