vue3
2021-03-29 本文已影响0人
16325
基础功能
- 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>
