基础

模板语法

动态参数

也可以在指令参数中使用 JavaScript 表达式，方法是用方括号括起来：

<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的组件实例有一个 data property attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

计算属性和侦听器

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

例如：

<div id="watch-example"><p>Ask a yes/no question:<input v-model="question" /></p><p>{{ answer }}</p>
</div>

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>const watchExampleVM = Vue.createApp({data() {return {question: '',answer: 'Questions usually contain a question mark. ;-)'}},watch: {// 每当 question 发生变化时，该函数将会执行question(newQuestion, oldQuestion) {if (newQuestion.indexOf('?') > -1) {this.getAnswer()}}},methods: {getAnswer() {this.answer = 'Thinking...'axios.get('https://yesno.wtf/api').then(response => {this.answer = response.data.answer}).catch(error => {this.answer = 'Error! Could not reach the API. ' + error})}}}).mount('#watch-example')
</script>

结果：
在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，并设置一个执行该操作的条件。这些都是计算属性无法做到的。

除了 watch 选项之外，你还可以使用命令式的 vm.$watch API。

计算属性 vs 侦听器

Vue 提供了一种更通用的方式来观察和响应当前活动的实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，watch 很容易被滥用——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
(防止滥用watch, 可以使用computed, 例子官网上有)

组件基础

阅读vue3官方文档之摘录相关推荐

阅读React官方文档
阅读React官方文档 1,组件&props 2,State&生命周期 3,事件处理 (1)事件绑定方法一: (2)事件绑定方法二: (3)事件绑定方法三: (4)向事件传递参数: 4 ...
oracle上移下移置顶,[置顶] 阅读Oracle官方文档指南
[置顶] 阅读Oracle官方文档指南还在整理中.... EXPDP/IMPDP 相关文档:Utilities 2 Data Pump Export 3 Data Pump Import ...
阅读ethercat官方文档关于ethercat网卡驱动程序的一些内容
学习交流加个人qq: 1126137994 个人微信: liu1126137994 学习交流资源分享qq群: 962535112 改造iMX6(fec)网卡驱动程序前期工作之:阅读ethercat- ...
pythondocumentation是什么_怎样阅读Python官方文档
如何阅读官方Python文档的初学者,因为他们没有相关的经验,学习语言通常是费时且劳动密集型和效果不是很好.下面简要介绍如何阅读官方文件.一旦你学会快速查询官方文件,学习效率会提高很多文档门户.如何阅 ...
如何阅读AUTOSAR官方文档
注: 本文首发于微信公众号"嵌入式软件实战派",关注获得更多内容. AUTOSAR有哪些标准文档 Classic Platform AUTOSAR Classic Platform ...
好消息，Vue3官方文档出中文版的啦！
今天在看vue-composition-api文档的时候,突然发现多出来个Languages选项: 咦奇怪,我记得以前好像没有这个选项的呀.赶紧点开看看有没有中文: 太棒了!还是尤大对咱好,感动得我热 ...
opencv python 官方文档里的“sa”关键字是什么意思？（see also）
在阅读opencv官方文档的时候,有时候会遇见"sa"这个关键字,这是什么意思呢? command sa starts "See also" paragraph ...
mysql中括号_手把手教你看MySQL官方文档
前言: 在学习和使用MySQL的过程中,难免会遇到各种问题.不知道当你遇到相关问题时会怎么做,我在工作或写文章的过程中,遇到不懂或需要求证的问题时通常会去查阅官方文档.慢慢的,阅读文档也有了一些经验, ...
mysql官方文档中文版_手把手教你看MySQL官方文档
前言: 在学习和使用MySQL的过程中,难免会遇到各种问题.不知道当你遇到相关问题时会怎么做,我在工作或写文章的过程中,遇到不懂或需要求证的问题时通常会去查阅官方文档.慢慢的,阅读文档也有了一些经验, ...

阅读vue3官方文档之摘录

基础