# vue

**Repository Path**: itic/vue

## Basic Information

- **Project Name**: vue
- **Description**: 我一定会成为人类历史上最伟大的Vue工程师。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-12-15
- **Last Updated**: 2025-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# vue

## 安装vue

### 使用nvm安装

> nvm（Node Version Manager） 是一个用于管理 Node.js 版本的命令行工具。它允许开发者在同一台机器上安装和切换多个版本的 Node.js，以便于在不同的项目中使用不同的 Node.js 版本。
> 
> 在工作中，我们可能同时在进行2个或者多个不同的项目开发，每个项目的需求不同，进而不同项目必须依赖不同版本的 NodeJS 运行环境，这种情况下，对于维护多个版本的 node 将会是一件非常麻烦的事情。nvm 就是为解决这个问题而产生的，他可以方便的在同一台设备上进行多个node版本之间切换。
> 
>  [nvm官网](https://nvm.uihtm.com/doc/guide.html)

* nvm list [available] ：显示已安装的列表。加参数available，显示可安装的所有版本。list可简化为ls
* nvm ls或nvm list ：显示已安装的列表
* nvm install <version> [arch] ：安装node， version是特定版本也可以是最新稳定版本latest。可选参数arch指定安装32位还是64位版本，默认是系统位数
* nvm use [version] [arch] ：使用制定版本node。可指定32/64位
* 

```
nvm国内镜像
修改nvm安装路径下的settings.txt文件来提速，更换成淘宝的node和npm下载镜像

淘宝镜像
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

清华大学镜像
node_mirror: https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/
npm_mirror: https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/npm/
```

## 你好，世界

```vue
<template>
  <h1>Hello World!</h1>
</template>
```

## 声明式渲染

> 能在改变时触发更新的状态被称作是响应式的。
> reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。

```vue
<script setup>
import { reactive, ref } from 'vue'

const counter = reactive({ count: 0 })
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>
```

## Attribute绑定

> 在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind 指令 `<div v-bind:id="dynamicId"></div>`, 它有一个专门的简写语法 `<div :id="dynamicId"></div>`

```vue
<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>
```

## 事件监听

> 我们可以使用 v-on 指令监听 DOM 事件。 `<button v-on:click="increment">{{ count }}</button>`,因为其经常使用，v-on 也有一个简写语法 `<button @click="increment">{{ count }}</button>`

```vue
<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

## 表单绑定

> v-model 会将被绑定的值与 `<input>` 的值自动同步，这样我们就不必再使用事件处理函数了。v-model 不仅支持文本输入框，也支持诸如多选框、单选框、下拉框之类的输入类型。

```vue
<script setup>
import { ref } from 'vue'

const showText = ref('')
</script>

<template>
  <input v-model="showText" placeholder="Type here">
  <p>{{ showText }}</p>
</template>

```

## 条件与循环

> 可以使用 v-if 指令来有条件地渲染元素。 也可以使用 v-else 和 v-else-if 来表示其他的条件分支

```vue
<script setup>
import { ref } from 'vue'

const awesome = ref(true)

function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

```

## 列表渲染

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

```vue
<script setup>
import { ref } from 'vue'

// 给每个 todo 对象一个唯一的 id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  console.log(todo);
  todos.value = todos.value.filter((t) => t.id !== todo.id)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

```

## 计算属性

> computed()。它可以让我们创建一个计算属性 ref，这个 ref 会动态地根据其他响应式数据源来计算其 .value。 计算属性会自动跟踪其计算中所使用的到的其他响应式状态，并将它们收集为自己的依赖。计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。

```vue
<script setup>
import { ref, computed } from 'vue'

let id = 0

const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])

const filteredTodos = computed(() => {
  return hideCompleted.value
    ? todos.value.filter((t) => !t.done)
    : todos.value
})

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

```

## 生命周期和模板引用

> 有时我们也会不可避免地需要手动操作 DOM。
这时我们需要使用模板引用——也就是指向模板中一个 DOM 元素的 ref。我们需要通过这个特殊的 ref attribute 来实现模板引用。注意这个 ref 使用 null 值来初始化。这是因为当 `<script setup>` 执行时，DOM 元素还不存在。模板引用 ref 只能在组件挂载后访问,要在挂载之后执行代码，我们可以使用 onMounted() 函数

```vue
<script setup>
import { ref, onMounted } from 'vue'

const pElementRef = ref(null)

onMounted(() => {
  pElementRef.value.textContent = 'mounted!'
})
</script>

<template>
  <p ref="pElementRef">Hello</p>
</template>

```

## 侦听器

> 有时我们需要响应性地执行一些“副作用”——例如，当一个数字改变时将其输出到控制台。我们可以通过侦听器来实现它

```vue
<script setup>
import { ref, watch } from 'vue'

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()

watch(todoId, fetchData)
</script>

<template>
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

```

## 组件

> 父组件可以在模板中渲染另一个组件作为子组件。要使用子组件，我们需要先导入它 `import ChildComp from './ChildComp.vue'` 然后我们就可以在模板中使用组件，就像这样：`<ChildComp />`

```vue
<script setup>
import ChildComp from './ChildComp.vue'
</script>

<template>
  <ChildComp />
</template>

```

```vue
<template>
  <h2>A Child Component!</h2>
</template>
```

## Props

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

```vue
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg="greeting" />
</template>

```

```vue
<script setup>
const props = defineProps({
  msg: String
})
</script>

<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>
```

## Emits

> 子组件可以通过 emits 向父组件发送动态数据。

```vue
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const childMsg = ref('No child msg yet')
</script>

<template>
  <ChildComp @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

```

```vue
<script setup>
const emit = defineEmits(['response'])

emit('response', 'hello from child')
</script>

<template>
  <h2>Child component</h2>
</template>
```

## 插槽

> 除了通过 props 传递数据外，父组件还可以通过插槽 (slots) 将模板片段传递给子组件。在子组件中，可以使用 `<slot>` 元素作为插槽出口 (slot outlet) 渲染父组件中的插槽内容 (slot content)

```vue
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>Message: {{ msg }}</ChildComp>
</template>

```

```vue
<template>
  <slot>Fallback content</slot>
</template>

```