Vue初步学习

不懂就查[官方文档](https://cn.vuejs.org/guide)

**6大亮点**
- Performance: 性能比Vue 2.0强
- Tree shaking support：可以将无用模块“剪辑”，仅打包需要的
- Composition API: 组合API
- Fragment, Teleport, Suspense: “碎片”, Teleport即Protal传送门，“悬念”
- Better TypeScript support: 更优秀的Ts支持（底层源码由js改为了ts）
- Custom Renderer API: 暴露了自定义渲染API

```shell
#1. 查看版本
node -v
npm -v

#2. 创建一个vite项目
npm init vite@latest
#输入项目名，如frontend
#选择vue JavaScript

#3. 进行初始化并运行
cd frontend
npm install
npm run dev
```

或者安装vue工具 Vue CLI，是Vue.js开发的标准工具，Vue CLI是一个基于Vue.js进行快速开发的完整系统。
`npm install -g @vue/cli`
> 上面命令如果下载很慢或者卡死，就是用cnpm
```
npm install -g cnpm --registry=https://registry.npm.taobao.org` #安装cnpm
cnpm i @vue/cli -g  #用这个镜像下载的安装速度很快
```
安装之后，可以命令行中访问vue命令
`vue --version`
> @vue/cli 5.0.8

> w如果确保安装完成的，命令行中找不到的话，可以通过 `npm config ls` 查看一下配置是否成功，再将路径放到环境变量中。

## 项目配置设置
- 修改vite.config.js配置文件

```
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
```

## 建议使用HBuildX进行项目构建，对Vue支持很好
直接创建一个Vue3项目，终端直接运行`npm run dev`即可启动。

## 应用实例
每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：

```js
import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})
```

## 根组件
我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。
```js
import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)
```

看到这个内容是在main.js中，而App.vue中引入了HelloWorld.vue组件
```vue
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

## 目录介绍
重点是查看src目录，
- 该目录下有assets目录，专门存放静态资源，如公共css、图片端
- components 存放的是vue组件，vue就是基于组件开发的
- App.vue是主入口的组件，组件之间是有相互引用的，他就是根组件
- main.js 是主入口文件，相等于所有程序的入口

## 模版语法
### 文本插值
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
```js
<span>Message: {{ msg }}</span>
```

- 示例

```js
<template>
  <h1>{{ msg }}</h1>
  <h3> 学习Vue：模版语法 </h3>
</template>

### 原始HTML插入
在html中插入文本，好比是innerText，而HTML就好比是innerHTML。这就是区别，vue中插入html就需要`v-html指令`
```html
<template>
	<h1>{{ msg }}</h1>
	<h3>学习Vue：模版语法</h3>
	<div>{{ rawHTML }}</div>
	<div v-html="rawHTML"></div>
</template>

### Attribute 绑定
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 `v-bind 指令`：
```
<div v-bind:id="dynamicId"></div>
```
`v-bind:id` 还可以简写成 `:id` 。

- 动态绑定多个值
如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：
```js
data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}
```
通过不带参数的 v-bind，你可以将它们绑定到单个元素上：
```
<div v-bind="objectOfAttrs"></div>
```

### 使用 JavaScript 表达式
Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：
```
{{ number + 1 }}

<div :id="`list-${id}`"></div>
```
**这些表达式都会被作为 JavaScript ，以组件为作用域解析执行。**

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：
- 在文本插值中 (双大括号)
- 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中
仅支持表达式#
- 每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。 
**一个简单的判断方法是是否可以合法地写在 return 后面。**

## 条件渲染
以前是 通过添加元素或删除元素来操作、或是基于css的display none或block来判断一个标签是否显示。
Vue通过`v-if指令`，用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
```html
<button @click="awesome = !awesome">Toggle</button>

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

另一个可以用来按条件显示一个元素的指令是 `v-show`。其用法基本一样：
`<h1 v-show="ok">Hello!</h1>`
> v-if
v-else-if
v-else-if
v-else

### v-if vs v-show
v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会从DOM中销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，**如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。**

## 列表渲染（列表展示）
`v-for`指令，使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：
```html
data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="（item, message) in items">
			{{ item }}
		</li>
```
v-for是“就地更新”策略，性能更优；

## 事件处理
### 监听事件
我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。

事件处理器的值可以是：

- 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
- 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

### 内联事件处理器通常用于简单场景，例如：
```html
data() {
  return {
    count: 0
  }
}
template
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>
```

### 方法事件处理器
随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。
```js
data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // 方法中的 `this` 指向当前活跃的组件实例
    alert(`Hello ${this.name}!`)
    // `event` 是 DOM 原生事件
    if (event) {
      alert(event.target.tagName)
    }
  }
}
```

```html

<button @click="greet">Greet</button>
```

### 在内联处理器中调用方法(事件传递参数)
除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：
```html
methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>
```

## 表单输入绑定（双向数据绑定真是太爽了）
前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：
```html
<input
  :value="text"
  @input="event => text = event.target.value">
```
而**v-model** 指令帮我们简化了这一步骤：
`<input v-model="text">`

另外，v-model 还可以用于各种不同类型的输入，`<textarea>、<select>` 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

文本类型的` <input> 和 <textarea>`元素会绑定 value property 并侦听 input 事件；
```
<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
<select> 会绑定 value property 并侦听 change 事件：
```

### 基本用法
- 文本
```html
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
```

- 多行文本
```html
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
```

### 修饰符#
- .lazy
默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：

``
`<input v-model.lazy="msg" />`

- .number
如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：
`<input v-model.number="age" />`
如果该值无法被 parseFloat() 处理，那么将返回原始值。

number 修饰符会在输入框有 type="number" 时自动启用。

- .trim
如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：
`<input v-model.trim="msg" />`