什么是Vue

渐进式JavaScript框架，易学易用，性能出色，适用场景丰富的web前端框架。

特点

声明式＋组件化

生态好

支持逐步集成

版本

vue2&vue3

官方文档

https://cn.vuejs.org/（中文）

vue API风格

两种风格:选项式api（vue2）和组合式api（vue3）

选项式API

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上 
  data() {

    return {
      count: 0
    }
  },
  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },
  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

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

组合式API

<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}
// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

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

vue开发前的准备

前提条件：

1.熟悉命令行窗口的基本操作（cmd）

2.node.js版本≥18.0（node -v查询）

创建vue项目

npm create vue@latest

✔ 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 an End-to-End Testing Solution? … No / Cypress / Playwright

✔ Add ESLint for code quality? … No / Yes

✔ Add Prettier for code formatting? … No / Yes

✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

$ cd <your-project-name>

$ npm install

$ npm run dev

只有不报红色error就是成功

开发环境

Vscode：Vetur、Vue-Official，Vue 3 Snippets（自用插件，感觉很好用）

Vue项目的目录结构

.vscode  ---VSCode工具的配置文件夹
node_modules  --Vue项目运行依赖文件夹
public   ---资源文件夹
src  ---源码文件夹
.gitignore  ---git忽略文件
index.html  ---HTML入口文件
jsconfig.json  ---配置JavaScript项目的开发环境和构建设置
package-lock.json  ---记录项目的依赖关系和确保在不同的开发环境中安装相同版本的依赖项
package.json  ---信息描述文件
README.md  ---注释文件
vite.config.js  ---Vue配置文件

模板语法

文本插值（双大括号语法）

<template>
  <p>{{ msg }}</p>
</template>

<script>
export default {
  data(){
    return{
    msg: 'Hello Vue!'
    }
  }
}
</script>

使用JavaScript表达式

有值有结果的单一表达式

<template>
  <p>{{ msg }}</p>
  <p>{{ number+1 }}</p>
  <p>{{ ok ? 'Yes' : 'No' }}</p>
  <p>{{ message }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
</template>

<script>
export default {
  data(){
    return{
    msg: 'Hello Vue!',
    number:10,
    ok:true,
    message: 'Hello Vue!'
    }
  }
}
</script>

原始HTML

v-html

<template>
  <p>{{rawhtml}}</p>
  <p v-html="rawhtml"></p>
</template>

<script>
export default {
  data(){
    return{
      rawhtml: '<h1>Hello World</h1>'
    }
  }
}
</script>

属性绑定

使用v-bind:＋属性名=”值”，v-bind:可以简写为:

<div v-bind:class="msg">测试</div>
<div :class="msg">测试</div>

如果绑定值为null，则属性会被移除掉

<template>
  <div v-bind:class="dynamicClass">测试</div>
  <div v-bind="objectOfAttributes">测试</div>
</template>

<script>
export default {
    data() {
        return {
            dynamicClass: 'appclass',
            dynamicId:'appid',
            objectOfAttributes: {
                class: 'appclass',
                id:'appid'
            }
        }
    }
}
</script>
<style>
.appclass {
    color: red;
}
</style>

条件渲染

在vue中，提供了条件渲染，这类似于JavaScript中的条件语句

·v-if
·v-else
·v-else-if
·v-show

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">你能看见我吗</div> 
    <div v-else>那就看我吧</div>
    <div v-show="!flag">你看不到我</div>
    <div v-if="type === 'A'">我是A</div>
    <div v-else-if="type === 'B'">我是B</div>
    <div v-else>我不是A也不是B</div>
</template>

<script>
export default {
    data() {
        return {
            flag: true,
            type: 'C'
        }
    }
}
</script>

v-if vs v-show

v-if是“真实的”按条件渲染，因为他确保了在切换时，条件区块内的事件监听和子组件都会被销毁或重建；只有在首次为“true”时才被渲染（惰性）。

v-show始终会被渲染，借用css的display属性实现切换

总结：需要频繁切换，则用v-show；如果在运行时绑定条件很少改变时，则用v-if。

列表渲染

简单数据

<template>
    <h3>列表渲染</h3>
    <p v-for="item in names" :key="item.id">{{ item }}</p>
</template>

<script>
export default {
    data() {
        return {
            names: [1, 2, 3, 4, 5]
        }
    }
}
</script>

复杂数据

大多数的情况，渲染的数据来自网络请求（JSON格式）

<template>
    <h3>列表渲染</h3>
    <div v-for="r in result" :key="r.id">
        <p>{{ r.id }}</p>
        <h1>{{ r.name }}</h1>
        <img :src="r.img" >
    </div>
</template>

<script>
export default {
    data() {
        return {
            result: [
                { id: 1, name: '张三' , img: '/favicon.ico' },
                { id: 2, name: '赵四' , img: '/favicon.ico' },
                { id: 3, name: '王五' , img: '/favicon.ico' }
            ]
        }
    }
}
</script>

可以使用of作为分隔符替代in

v-for与对象

<template>
    <h3>列表渲染</h3>
    <p v-for="(value, key, index) of userinfo" :key="index">{{ index }}、{{ key }}: {{ value }}</p>
</template>

<script>
export default {
    data() {
        return {
            userinfo:{
                id:1,
                name:'张三',
                age:20,
            }
        }
    }
}
</script>

通过key管理状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key属性