Vue笔记1

hayili

已于 2024-07-13 17:36:15 修改

阅读量1.2k

点赞数 27

文章标签： vue.js 前端 javascript

于 2024-07-06 16:47:32 首次发布

本文链接：https://blog.csdn.net/hayili/article/details/140229177

版权

简介

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

Vue.js 的特点和优势

轻量级：Vue.js 的核心库非常小巧（大约 20KB），加载速度快。
渐进式框架：Vue 可以自下而上逐层应用。你可以在一个已有项目中使用 Vue 作为一个简单的视图层库，也可以使用 Vue 来管理整个前端应用。
易于学习：Vue 的设计非常直观，适合前端初学者，文档也非常详尽。
高性能：Vue 的虚拟 DOM 和高效的差异化算法，使其具有良好的性能表现。
组件化：Vue 允许使用组件构建应用程序，组件可以复用并且易于维护。
双向数据绑定：Vue 提供了简洁易用的双向数据绑定机制，使得数据和视图之间的同步变得非常简单。

下载

在下载Vue前请注意：
需要安装 18.3 或更高版本的 Node.js和 npm, pnpm, yarn, bun 中任意一种包管理工具
Node.js下载地址：https://nodejs.org/zh-cn
Node.js可以通过运行命令 node -v 查看版本
由于npm在Node.js下载时会一同安装一个旧版，所以需要在系统终端的命令行中运行 npm install npm@latest -g 更新至最新版
npm 可以通过运行命令 npm -v 查看版本
Vue下载方式：
或在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。
官网地址：https://cn.vuejs.org/
在系统终端的命令行中运行 npm install vue -g 安装Vue
在系统终端的命令行中运行 npm install @vue/cli –g 安装脚手架

创建项目

在系统终端的命令行中运行 npm init vue@latest
命令运行后会弹出一些选项，如下

Need to install the following packages:
  create-vue@3
Ok to proceed? (y) y----------选Y
 
Vue.js - The Progressive JavaScript Framework
 
✔ Project name: … vue3_ok  //项目名称
✔ Add TypeScript? … No / Yes  //是否使用TS
✔ Add JSX Support? … No / Yes  //是否支持JSX，除非你是搞React开发
✔ Add Vue Router for Single Page Application development? … No / Yes   //是否添加路由
✔ Add Pinia for state management? … No / Yes   //是否添加状态管理 推荐pinia
✔ 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   //是否添加ESLint做代码质量检查
✔ Add Prettier for code formatting? … No / Yes   //是否添加Perttier进行代码格式化

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

  cd vue3_ok   //cd 进行目录
  npm install   //安装相关依赖   
  npm run lint   //运行代码修复
  npm run dev   //运行项目

在项目创建完成后将项目在IntelliJ IDEA 中运行

API

Vue包含两种API分别是选项式 API 和组合式 API
选项式API通过配置对象来定义组件的属性、方法和生命周期钩子。
选项式API需要通过 export default 对外抛出才可被引用
组合式API是一种基于函数的API，它允许开发者将组件的逻辑代码拆分成多个独立的函数，每个函数负责处理特定的功能或逻辑。
组合式API直接通过setup 抛出
在开发时我们可以根据自己的风格选择合适的API

选项式API语法

data

data：用于定义应用程序的数据，可以是一个函数，返回一个包含数据的对象，语法为键值对。

示例：

data() {
    return {
        name : '张三' 
    }
}

methods

methods：用于定义应用程序的方法，可以是一个包含多个方法的对象。

示例：

methtods:{
    hello(){
        console.log('hello vue')
    }
}

computed

computed：用于定义计算属性，根据依赖的数据动态计算出一个新的值。

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

基础例子

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果：

Original message: "Hello"

Computed reversed message: "olleH"

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。

你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

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

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>