vue 显示[hmr] waiting for update signal_Vue初体验之指令

指令

文档关于指令的解释：

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

• v-text：相当于{{ 数据 }}。
• v-html：可用于数据内容含有HTML不希望被作为Vue模版进行编译时。
• v-show：根据表达式的值切换元素的显示和隐藏。
• v-if：根据表达式的真值条件渲染元素。
• v-else：前一兄弟元素必须有v-if或v-else-if。
• v-else-if：前一兄弟元素必须有v-if或v-else-if。
• v-for：基于源数据多次渲染元素或模板块。此
• v-on：可缩写成@，用于绑定事件监听器。
• v-bind：可缩写成:，用于绑定vue属性。
• v-model：在表单控件或者组件上创建双向绑定。
• v-slot
• v-pre：不编译内容。
• v-cloak
• v-once

指令参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。如

v-bind:class="className"
v-on:click="doSomething"
v-on:[eventName]="doSomething"

这里的class、click、[eventName]就是参数，[eventName]可以动态监听事件类型，比如当 eventName 的值为 "click" 时，v-on:[eventName] 将等价于 v-on:click。

修饰符

修饰符 (modifier) 是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

常见的修饰符 .stop：阻止事件冒泡 .prevent：取消事件默认行为 * .sync：用于对prop的双向绑定

fervent-sun-j7o3o - CodeSandbox​codesandbox.io

父组件代码

<template>
  <div id="app">
    {{total}}<br/>
    使用@update:total
    <Child :total="total" @update:total="total = $event"></Child>
    使用.sync
    <Child :total.sync="total"></Child>
  </div>
</template>

<script>
import Child from "./Child.vue"

export default {
  name: "App",
  data: () => {
    return {
      total: 100
    }
  },
  components: {
    Child: Child
  }
};
</script>

子组件代码

<template>
<div>
  <button @click="$emit('update:total', total+10)">+10</button>
  <button @click="$emit('update:total', total-10)">-10</button>
  </div>
</template>

<script>
export default {
  props: ['total']
}
</script>

以上代码实现通过点击子组件按钮修改父组件数据。通过例子可以看到.sync能够实现和@update:total="total = $event"一样的效果。