前端-vue基础

官网地址，如果学习建议从官网入手：简介 | Vue.js

概念

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，高效地开发用户界面

单文件组件(SFC)：将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里

声明式渲染

1.声明时渲染：Vue 基于标准 HTML 拓展了一套模板语法，声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

2.响应式：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM，改变时触发更新的状态。

reactive()：创建的对象 JavaScript Proxy，行为和普通对象一样。只适用于对象

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

ref():接受任何值类型,返回一个包裹对象，并在 .value 属性下暴露内部值

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'

Attribute 绑定

mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind 指令

<div v-bind:id="dynamicId"></div>
可简写为<div :id="dynamicId"></div>

冒号后面的部分 (:id) 是指令的“参数”。此处，元素的 id attribute 将与组件状态里的 dynamicId 属性保持同步。组件中为class时为class

指令是由 v- 开头的一种特殊 attribute,vue模版语言的一部分

事件监听

v-on 指令监听 DOM 事件

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

表单绑定

双向绑定

<input :value="text" @input="onInput">
简化 <input v-model="text">

v-model 会将被绑定的值与 <input> 的值自动同步

条件渲染

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

在 awesome 的值为真值 (Truthy) 时渲染。若 awesome 更改为假值 (Falsy)，它将被从 DOM 中移除

列表渲染

v-for 指令来渲染一个基于源数组的列表

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

更新两列表的方式

在源数组上调用变更方法：
todos.value.push(newTodo)
使用新的数组替代原数组
todos.value = todos.value.filter(/* ... */)

计算属性

computed()它可以让我们创建一个计算属性 ref，这个 ref 会动态地根据其他响应式数据源来计算其 .value

import { ref, computed } from 'vue'

const hideCompleted = ref(false)
const todos = ref([
  /* ... */
])

const filteredTodos = computed(() => {
  // 根据 `todos.value` & `hideCompleted.value`
  // 返回过滤后的 todo 项目
})

生命周期和模板引用

模版引用

<p ref="pElementRef">hello</p>
//要访问该引用，我们需要声明一个同名的 ref
const pElementRef = ref(null)
//ref使用null初始化，<script setup> 执行时，DOM 元素还不存在。模板引用 ref 只能在组件挂载后访问。

生命周期钩子

允许我们注册一个在组件的特定生命周期调用的回调函数

import { onMounted } from 'vue'

onMounted(() => {
  // 此时组件已经挂载。
})

侦听器

watch() 可以直接侦听一个 ref，并且只要 count 的值改变就会触发回调

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newCount) => {
  // 没错，console.log() 是一个副作用
  console.log(`new count is: ${newCount}`)
})

组件

真正的 Vue 应用往往是由嵌套组件创建的

父组件可以在模板中渲染另一个组件作为子组件。要使用子组件，我们需要先导入它：

import ChildComp from './ChildComp.vue'

在模板中使用组件

<ChildComp />

Props

子组件可以通过 props 从父组件接受动态数据

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

//defineProps() 是一个编译时宏，并不需要导入。
//一旦声明，msg prop 就可以在子组件的模板中使用。
//它也可以通过 defineProps() 所返回的对象在 JavaScript 中访问

若要传递动态值，也可以使用 v-bind 语法

<ChildComp :msg="greeting" />

Emits

子组件还可以向父组件触发事件

<script setup>
// 声明触发的事件
const emit = defineEmits(['response'])

// 带参数触发
emit('response', 'hello from child')
</script>

插槽

父组件可以通过插槽 (slots) 将模板片段传递给子组件

<ChildComp>
  This is some slot content!
</ChildComp>

在子组件中，可以使用 <slot> 元素作为插槽出口 (slot outlet) 渲染父组件中的插槽内容 (slot content)：

<!-- 在子组件的模板中 -->
<slot/>

<slot> 插口中的内容将被当作“默认”内容：它会在父组件没有传递任何插槽内容时显示

<slot>Fallback content</slot>