vue3

基础功能

v-bind 绑定属性
v-on 绑定事件
v-model 表单输入和应用状态之间的双向绑定
v-if 控制显示
v-for 循环列表

根组件

const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

生命周期

插值

文本 {{ }}
原始 HTML v-html
JavaScript 表达式 {{ number + 1 }}
修饰符 <form v-on:submit.prevent="onSubmit">...</form>
缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

组件的属性

data(){}
methods {}
计算属性

computed: {
    // 计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向 vm 实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }

计算属性 vs 方法计算属性是基于它们的反应依赖关系缓存的. 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter
watch 侦听器 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化
计算属性 vs 侦听器通常更好的做法是使用计算属性而不是命令式的 watch 回调.

条件渲染

v-if vs v-show v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

列表渲染

<ul id="array-rendering">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

绑定事件

<button @click="counter += 1">Add 1</button>
<button @click="greet">Greet</button>
<button @click="say('what')">Say what</button>
Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向。
<button @click="one($event), two($event)">
事件修饰符

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

系统修饰符

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact 修饰符

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

组件基础

组件注册

const app = Vue.createApp({})

app.component('my-component-name', {
  // ... 选项 ...
})

通过 Prop 向子组件传递数据
通过props传递
监听子组件事件
在引用子组件处增加<blog-post ... @enlarge-text="postFontSize += $event"></blog-post>
子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：

<button @click="$emit('enlargeText', 0.1)">
  Enlarge text
</button>

我们可以在组件的 emits 选项中列出已抛出的事件：

app.component('blog-post', {
  props: ['title'],
  emits: ['enlargeText']
})

通过插槽分发内容

app.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

动态组件
可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component :is="currentTabComponent"></component>

解析 DOM 模板时的注意事项
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
我们可以使用特殊的 v-is 指令作为一个变通的办法：

<table>
  <tr v-is="'blog-post-row'"></tr>
</table>

v-is 值应为 JavaScript 字符串文本

大小写
HTML attribute 名不区分大小写，因此浏览器将所有大写字符解释为小写。这意味着当你在 DOM 模板中使用时，驼峰 prop 名称和 event 处理器参数需要使用它们的 kebab-cased (横线字符分隔) 等效值

<!-- 在HTML则是横线字符分割 -->
<blog-post post-title="hello!"></blog-post>

基础功能

根组件

生命周期

插值

组件的属性

条件渲染

列表渲染

绑定事件

组件基础

推荐阅读更多精彩内容