vue基础学习

什么是 Vue？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

下面是一个最基本的示例：

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

上面的示例展示了 Vue 的两个核心功能：

• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

• 响应性：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。

vue作为前端的应用框架，学习需要具备html,css,js的前置基础知识

创建一个 Vue 应用#

前提条件

• 熟悉命令行
• 已安装 16.0 或更高版本的 Node.js

确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令 (不要带上 > 符号)：

> npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

> cd <your-project-name>
> npm install
> npm run dev

当你准备将应用发布到生产环境时，请运行：

> npm run build

vue页面 

 不同于html页面，vue页面编写为vue格式，通常放在views文件夹下，App.vue为程序主入口，在

views文件夹下面的页面写好后应该在router文件夹下面的index.js中进行配置，path为发访问地址，name为起的名字，可随意，component为组件名字，对应views文件夹下面的相应页面，

 上述完成之后还需要在app.vue中引入，即通过

<router-view></router-view>标签

 这些完成之后便可运行展示出相应的页面

 Vue周边库

• vue-cli：vue脚手架
• vue-resource
• axios
• vue-router：路由
• vuex：状态管理
• element-ui：基于vue的UI组件库（PC端）

数据绑定

有两种方法

1. 单向绑定（v-bind）：数据只能从data流向页面
2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

下面简要介绍一下基础的常用标签功能

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

意思就是v-if绑定的值为真的时候h1中的内容才会显示出来

<h1 v-if="awesome">Vue is awesome!</h1>

v-else#

你也可以使用 v-else 为 v-if 添加一个“else 区块”。

即当绑定的值为假时数据不会不显示，而会显示v-else中的h1标签中的内容

template

<button @click="awesome = !awesome">Toggle</button>

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

v-else-if#

顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：

template

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

<template> 上的 v-if#

因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else 和 v-else-if 也可以在 <template> 上使用。

v-show#

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样：

<h1 v-show="ok">Hello!</h1>

不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用

v-if vs v-show#

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

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 是迭代项的别名：

js

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

template

<li v-for="item in items">
  {{ item.message }}
</li>

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

常用来渲染列表，通过便利数组的方式，可以配合后端数据库查询出来的内容进行显示

v-if 和 v-for#

警告

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

v-on

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

注册周期钩子#

举例来说，mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 mounted、updated 和 unmounted，他们会在项目的不同时刻自动执行其中的逻辑代码

所有生命周期钩子函数的 this 上下文都会自动指向当前调用它的组件实例。注意：避免用箭头函数来定义生命周期钩子，因为如果这样的话你将无法在函数中通过 this 获取组件实例