14步入门Vue｜cn.vuejs.org教程学习笔记

【参考资料】

Vue.js互动教程：https://cn.vuejs.org/tutorial/

Vue.js深度指南：https://cn.vuejs.org/guide/

开始：略
声明式渲染
- 能在改变时触发更新的状态被称作是响应式的。
- 响应式状态声明：
  - Vue 的 reactive(<object>) API ：可以使用它来声明响应式状态。该API返回的对象都是 JavaScript Proxy，其行为与普通对象一样。<object>可以是任意对象，包括Map和Set。
  - Vue 的 ref(<any>) API ：返回一个包裹对象，可以通过.value属性访问其内部值。
- mustache 双花括号语法：在模板中使用响应式状态或JS表达式
- 示例代码：
  js 复制代码
```
//sample for reactive
import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++
//sample for ref
import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'
```
  html 复制代码
```
<h1>{{ message }}</h1>
<p>Count is: {{ counter.count }}</p>

```
Attribute绑定：
- 想要响应式地绑定一个 attribute，应该使用 v-bind 指令：v-bind:<attr-name>=<attr-value>
- 如果attr-name=id，attr-value="daynamicId"，那么元素的id属性将与组件状态里的 dynamicId 属性保持同步。
- 该指令可以简写为:<attr-name>=<attr-value>
- 3.4版本及以上：如果 attribute 的名称与绑定的 JavaScript 变量的名称相同，那么可以进一步简化语法，省略 attribute 值。
- 绑定 null 或者 undefined：该 attribute 将会从渲染的元素上移除。
- 绑定布尔值：依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。
- 绑定对象：适用于绑定的值较多的场景。

事件监听：可以使用v-on指令监听DOM事件，比如：

jsx 复制代码

<button v-on:click="increment">{{ count }}</button>
<button @click="increment">{{ count }}</button>

表单绑定：v-model 会将被绑定的值与 <input> 的值自动同步，这样我们就不必再使用事件处理函数了。
条件渲染：可以使用v-if指令有条件地渲染元素，也可以用v-else和v-else-if来表示其他的条件分支。
列表渲染：可以使用v-for指令来渲染一个基于源数组的列表。更新列表有两种方式：在源数组上调用变更方法；使用新的数组替代原数组。
jsx 复制代码
```
<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
```
计算属性：computed()可以让我们创建一个计算属性 ref，这个 ref 会动态地根据其他响应式数据源来计算其 .value
生命周期和模板引用：
- 声明一个ref，然后在元素中通过ref属性实现引用。模板引用 ref 只能在组件挂载后访问。
- 要在挂载之后执行代码，可以使用 onMounted() 函数。
侦听器：用于响应性地执行一些"副作用"。watch() 可以直接侦听一个 ref，并且只要 ref 的值改变就会触发回调。
jsx 复制代码
```
import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newCount) => {
  // 执行副作用
  console.log(`new count is: ${newCount}`)
})
```
组件：父组件可以在模板中渲染另一个组件作为子组件，示例如下：
jsx 复制代码
```
import ChildComp from './ChildComp.vue'
```
jsx 复制代码
```
<ChildComp />
```
Props：子组件可以通过 props 从父组件接受动态数据，首先声明其所接受的 props，然后在模板中使用。
vue 复制代码
```
<script setup>
const props = defineProps({
  msg: String
})
</script>
```

Emits：用于子组件向父组件触发事件。

vue 复制代码

<script setup>
// 声明触发的事件
const emit = defineEmits(['response'])
// 带参数触发
emit('response', 'hello from child')
</script>

html 复制代码

<!-- 父组件可以使用 v-on 监听子组件触发的事件，比如这里的处理函数onresponse接收了子组件触发事件时的额外参数并将它赋值给了本地状态 -->
<ChildComp @response="(msg) => childMsg = msg" />

插槽：子组件如果有innerHTML，则innerHTML会传递为子组件的插槽。在子组件中，可以使用 <slot> 元素作为插槽出口渲染父组件中的插槽内容，<slot> 中的内容将被当作默认内容，在innerHTML为空时显示。