vue基础与使用

最新推荐文章于 2024-08-04 12:47:40 发布

找思路

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量698

点赞数 31

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_73601916/article/details/140453018

版权

一、Vue基础笔记

1. Vue简介

如果你喜欢下面这些，那你一定会喜欢 Vue.js：

定义：Vue (读音 /vjuː/，类似于 "view") 是一套用于构建用户界面的渐进式JavaScript框架。
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动Vue的官方网站是: https://cn.vuejs.org/
特点：渐进式意味着Vue可以自底向上逐层地应用，既可以只用核心库，也可以结合生态系统中的官方路由管理器Vue Router、状态管理库Vuex等，用于开发单页应用（SPA）。
Vue.js 特点
简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
数据驱动: 自动追踪依赖的模板表达式和计算属性。
组件化：用解耦、可复用的组件来构造界面。
轻量：~33.46KB min+gzip，无依赖。
快速:精确有效的异步批量 DOM 更新。
模块友好: 通过 NPM 或 Bower 安装，无缝融入你的工作流。
可扩展的数据绑定机制
原生对象即模型
简洁明了的 API
组件化 UI 构建
多个轻量库搭配使用
开发者：Vue由尤雨溪开发，现已成为前端工程师必备技能之一。

2. MVVM模式

MVVM：Model-View-ViewModel，是对MVC和MVP的进一步改进。
组成部分：
- Model：模型，代表数据部分。
- View：视图，代表UI用户界面。
- ViewModel：视图模型，是Vue实例，作为Model和View之间的桥梁，负责数据双向绑定。
- MVVM是软件架构设计模式，用于构建用户界面应用。其由Model、View和ViewModel组成，实现数据模型与界面的分离，提升代码解耦性、可测试性和可维护性。MVVM支持双向数据绑定、事件驱动和命令绑定，简化视图与模型的交互。
  
  Vue虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
  
  MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑.
  
  M: 模型(Model),数据模型，负责存储应用程序的数据。它独立于视图（View）和视图模型（ViewModel），可以在不同的视图间共享。对应data中的数据,
  
  V: 视图(View): 模板用户界面，负责数据的展示。通常使用HTML、CSS和JavaScript（或特定框架的模板语言）来实现。
  
  VM:视图模型(ViewModel):是View和Model之间的桥梁。它负责处理View和Model之间的交互，比如将Model的数据转换为View可以展示的格式，或者将用户在View上的操作转换为Model的数据更新

3. 基础语法

插值表达式：使用双大括号{{ }}在HTML模板中绑定表达式，用于文本插值。
指令：Vue.js的指令是以v-开头的特殊属性，用于在模板中声明式地将DOM绑定至底层Vue实例的数据。常用的指令包括：
- v-bind：用于动态地更新HTML属性，简写为:。：
- v-bind指令用于绑定属性可以简写成:
  双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：
  
  绑定属性我们使用v-bind：
  - 缩写：:
  - 预期：any (with argument) | Object (without argument)
  - 参数：attrOrProp (optional)
  - 修饰符：
  - .camel - 将 kebab-case attribute 名转换为 camelCase。
  - 用法：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
- v-model：创建双向数据绑定在表单输入和应用状态之间。
- 表单提交是开发中非常常见的功能，也是和用户交互的重要手段：
- 比如用户在登录、注册时需要提交账号密码；
- 比如用户在检索、创建、更新信息时，需要提交一些数据；
- 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；
  
  它会根据控件类型自动选取正确的方法来更新元素；尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.global.js"></script>
    <script type="text/javascript">
    window.onload = function(){
        const {createApp} = Vue
        createApp({
            data(){
                return {
                   msg:'helloworld'
                }
            }
        }).mount("#box")
    };
    </script>
</head>
<body>
    
    <div id="box">
        <input type="text" v-model='msg'>
        <hr/>
        {{msg}}
    </div>
</body>
</html>
```
  注意：使用v-model指令的标签也必须位于Vue控制的标签内部。
- v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：
- - 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
  - <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
  - v-model绑定checkbox：单个勾选框和多个勾选框
    
    单个勾选框：
    
    v-model即为布尔值。
    
    此时input的value属性并不影响v-model的值。
    
    多个复选框：
    
    当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
    
    当选中某一个时，就会将input的value添加到数组中。
    
    v-model绑定select 单选和多选两种情况
    
    单选：只能选中一个值
    
    v-model绑定的是一个值；当我们选中option中的一个时，会将它对应的value赋值到fruit中；
    
    多选：可以选中多个值
    
    v-model绑定的是一个数组；
    
    当选中多个值时，就会将选中的option对应的value添加到数组fruit中
    
    v-model 会忽略任何表单元素上初始的 value、checked 或 selected 属性。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项来声明该初始值。
    
    修饰符
    
    .lazy- 取代 input 监听 change 事件
    
    在默认情况下，v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
    
    如果不加.lazy时,你修改了文本框的值,对应{{msg}}会同步的变化,但是如果添加了.lazy修饰符时,你在修改文本框的值时,{{msg}}的值不会同步的变化,而是当该文本框失去焦点时,才去改变{{msg}}的值.
    
    .number- 输入字符串转为数字
    
    如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：
    
    我们先来看一下v-model绑定后的值是什么类型的：
    
    注意:
    
    .number修饰符并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number类型
    
    .trim - 输入首尾空格过滤
    
    如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：
- v-on：用于监听DOM事件，简写为@。
- 可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。
- v-if、v-else-if、v-else：条件渲染指令。
- v-if 指令条件渲染,可以根据表达式的值在DOM中生成或移除一个元素,如果v-if表达式为true,那么对应元素的一个克隆将被重新插入DOM中,否则从DOM移除
- 如果想切换多个元素,则可以使用<template>元素当作包装元素,在<template>元素上使用v-if, 就可以进行多个元素的切换
- v-else 指令: 表示 v-if 的“else 块”：
- v-else-if，顾名思义，充当 v-if 的“else-if 块”。可以链式地使用多次
- 注意:
  v-else,v-else-if必须紧跟在v-if或者v-else-if元素的后面
- v-for：基于一个数组渲染一个列表。
- v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，也就是循环指令.其中 items 是源数据的数组，而 item 是迭代项的别名：
```
data() {
  return {
    names:["lily","lucy","hanmeimei","lilei"]
  }
}
```
```
<ul>
    <li v-for="item in names">
        {{item}}
    </li>
</ul>
```
  效果:
- 遍历的是一个json对象: ()的顺序是: json对象的属性值,对象的属性名,下标
```
data() {
  return {
    names:["lily","lucy","hanmeimei","lilei"],
    json:{a:"dog",b:"cat",c:"peg"}   
  }
}
```
```
<ul>
    
    <li v-for="(value,key,index) in json">
        {{value}} ==>{{key}} ==>{{index}} 
    </li>
</ul>
```
  运行效果:
对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：
```
<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>
```
你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：
```
<div v-for="item of items"></div>
```
v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。
```
<span v-for="n in 10">{{ n }}</span>
```
v-for中通过key管理状态
Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key
```
<div v-for="item in items" :key="item.id">

</div>
```
推荐:在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key
- v-show：根据表达式之真假值，切换元素的CSS属性display。
- v-show指令: 根据表达式的值来显示或隐藏HTML元素,当v-show表达式的值为false时,元素将被隐藏,查看DOM时,会发现元素上多了一个行内样式style=”display:none”.
- v-if与v-show的比较:
  1. 首先，在用法上的区别：
  - v-show是不支持template；
  - v-show不可以和v-else一起使用；
  1. 其次，本质的区别：
  - v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；
  - v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；
  1. 开发中如何进行选择呢？
  - 如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；
  - 如果不会频繁的发生切换，那么使用v-if；
- v-text和v-html：用于更新元素的文本内容，v-html还可以插入HTML。
- v-text指令: 更新元素的 textContent,注意v-text对于内容是包含HTML标签的,不会进行HTML解析,只是作为普通字符串.
- v-html: 数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 v-html 指令

4. 生命周期钩子

Vue实例从创建到销毁的过程中，会触发一系列的生命周期钩子，如beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等。这些钩子允许我们在不同的阶段执行代码，例如数据获取、事件监听器的添加和移除等。

1、setup() : 开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数

5. 组件化开发

Vue.js通过组件化的方式将一个大型应用程序拆分为多个小型、独立、可复用的组件。每个Vue组件都包含了自己的模板、逻辑和样式，通过组件化开发，可以提高开发效率和代码的可维护性。

人处理问题的方式:

任何一个人处理信息的逻辑能力都是有限的

所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。

但是，我们人有一种天生的能力，就是将问题进行拆解。

如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。

认识组件化开发:

组件化也是类似的思想：

如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展；

但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了；

如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目；

二、Vue使用方法

1. 安装Vue

直接引入：在HTML文件中通过<script>标签直接引入Vue.js。
使用npm或yarn：在Node.js项目中，可以通过npm或yarn安装Vue。
Vue CLI：Vue CLI是一个基于Vue.js进行快速开发的完整系统，提供了零配置原型开发的能力。通过Vue CLI可以快速搭建Vue项目框架。

2. 创建Vue实例

使用new Vue()创建一个新的Vue实例，并传入一个选项对象，该对象可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

html复制代码

	`<div id="app">`
	`{{ message }}`
	`</div>`

	`<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>`
	`<script>`
	`var app = new Vue({`
	`el: '#app',`
	`data: {`
	`message: 'Hello Vue!'`
	`}`
	`})`
	`</script>`