5.1 三种写模版的方式

第一种: 完整版写法, 写在HTML

第二种: 完整版写法, 写在template中 template的div会被替换

第三种:不完整写法, 写在xxx.vue中 <template></template>中不是HTML语法是XML语法, 原因是更容易解析.

5.2 v-html v-on v-bind v-if v-for v-show

v-bind

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

v-on

v-for

v-show

v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。

总结

5.3 指令与修饰符

5.4 .sync修饰符

5.5 总结

@click.stop ="xxx"  //表示阻止事件传播/冒泡
@click.prevent="xxx"  //表示阻止默认动作
@keypress.enter="xxx"  //监听enter，触发enter执行“xxx”
:money.sync="total"//:money.sync="total" 等价于 :money="total" v-on:update :money="total=$event"