Vue3笔记

星光今夜无眠

已于 2023-04-18 21:01:25 修改

阅读量421

点赞数

文章标签：前端 javascript vue.js

于 2023-04-11 20:15:50 首次发布

本文链接：https://blog.csdn.net/m0_50756791/article/details/130091496

版权

本文详细介绍了Vue3框架，包括MVVM模式、核心概念如数据绑定、组件、指令和计算属性，以及Vue3的新特性如组合式API。通过案例体验展示了计数器、列表展示、输入框和MvvM模式的应用，深入探讨了Vue3的响应式系统和生命周期。此外，还涵盖了axios的使用和Vue Router的路由配置，以及如何在项目中应用element-plus。

摘要由CSDN通过智能技术生成

简介

vue是指一个用于创建用户界面的渐进式框架，旨在更好地组织与简化Web开发；Vue的核心库只关注视图层，并且非常容易学习，也非常容易与其他库或已有项目整合。

vue框架介绍

Vue.js（读音/vju：/，发音类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，并且非常容易学习，也非常容易与其他库或已有项目整合。Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 还提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，其目标是通过尽可能简单的 API 实现响应式的数据绑定和可组合的视图组件。

我们也可以说 Vue.js 是一套响应式系统（Reactivity System）。数据模型层（Model）只是普通 JavaScript 对象，如下图所示，{ }代表一个 JavaScript 对象，修改它则更新相应的 HTML 片段（DOM），这些 HTML 片段也称为“视图（view）”。这会让状态管理变得非常简单且直观，可实现数据的双向绑定，所以我们也称之为响应式系统。

作为前端开发人员的首选入门框架，Vue 有很多优势：

Vue.js 可以进行组件化开发，使代码编写量大大减少，读者更加易于理解。
Vue.js 最突出的优势在于可以对数据进行双向绑定（在之后的编写中我们会明显地感觉到这个特点的便捷）。
使用 Vue.js 编写出来的界面效果本身就是响应式的，这使网页在各种设备上都能显示出非常好看的效果。
相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页面

案例体验

计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
<button @click="num++">{
  {num}}</button>

</div>
</body>
</html>

<script type="text/javascript" src="js/vue.global.js"></script>
<script>
    const {createApp,reactive,toRefs} = Vue

    createApp({
        setup(){
            const data =reactive({
                num:1
            })
            return{...toRefs(data)}
        }
    }).mount('#app')
</script>

列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="js/vue.global.js"></script>
<body>
<div id="app">
<p v-for="b in booklist">{
  {b}}</p>
</div>
</body>
</html>
<script>
    const {createApp,reactive,toRefs} = Vue

    createApp({
        setup(){
            const data =reactive({

            booklist:['宿舍','钉钉','嗯嗯']
            })
            return{...toRefs(data)}
        }
    }).mount('#app')
</script>

输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="js/vue.global.js"></script>
<body>
<div id="app"><button @click="addName">增加</button>
{
  {name}}
    <input type="text" v-model="name">

</div>
</body>
</html>
<script>
    const {createApp,reactive,toRefs} = Vue

    const app = createApp({
        setup(){
            const data =reactive({
                name:'呜呜呜呜呜呜'

            })
            const addName=()=>{
                data.name+="huhuhuhuhu";
            }
            return{...toRefs(data),addName}
        }
    }).mount('#app');
</script>

MvvM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。保持应用程序逻辑和UI之间的清晰分离有助于解决许多开发问题，并使应用程序更易于测试、维护和演变。它还可以显著提高代码重用机会，并允许开发人员和UI设计人员在开发应用各自的部分时更轻松地进行协作

MVVM是ModelView-ViewModel的简写。它本质上就是MVC (ModelView- Controller) 的改进版，即模型-视图-视图模型。
模型:指的是后端传递的数据，data....
英，
视图: 指的是所看到的页面。
视图模型: mvvm模式的核心，"它是连接view和model的桥梁。
它有两个方向:
一是将[模型] 转化成[视图]，即将后端传递的数据转化成所看到的页面。实现的方式是: 数据绑定。二是将[视图] 转化成[模型]，即将所看到的页面转化成后端的数据。实现的方式是: DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
总结:在MWM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，
然后通知数据做改动，这实际上就实现了数据的双向绑定。并目MVVM中的View 和 ViewModel可以互相通信。

特点

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2. 可重用性。可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。

使用MVVM来开发用户控件。由于用户控件在大部分情况下不涉及到数据的持久化，所以如果将M纯粹理解为DomainModel的话，使用MVVM模式来进行自定义控件开发实际上可以省略掉M，变成了VVM。

理论基础

MVVM旨在利用WPF中的数据绑定函数，通过从视图层中几乎删除所有GUI代码（代码隐藏），更好地促进视图层开发与模式其余部分的分离。不需要用户体验（UX）开发人员编写GUI代码，他们可以使用框架标记语言（如XAML），并创建到应用程序开发人员编写和维护的视图模型的数据绑定。角色的分离使得交互设计师可以专注于用户体验需求，而不是对业务逻辑进行编程。这样，应用程序的层次可以在多个工作流中进行开发以提高生产力。即使一个开发人员在整个代码库上工作，视图与模型的适当分离也会更加高效，因为基于最终用户反馈，用户界面通常在开发周期中经常发生变化，而且处于开发周期后期。

MVVM模式试图获得MVC提供的功能性开发分离的两个优点，同时利用数据绑定的优势和通过绑定数据的框架尽可能接近纯应用程序模型。它使用绑定器、视图模型和任何业务层的数据检查功能来验证传入的数据。结果是模型和框架驱动尽可能多的操作，消除或最小化直接操纵视图的应用程序逻辑（如代码隐藏）。

vue语法

mustache语法

Mustache 是一款的前端模板引擎，它原本是基于 javascript 实现的，但是因为轻量易用，所以经过拓展目前支持更多的平台，如java，PHP，C++等、Mustache 主要用于在表现和数据相分离的前端技术架构中，根据数据生成特定的动态内容，实际作用和E1表达式一样为了接收渲染数据，但是比EL更加强大。

首先展示整体的代码案列：

<body>

    <div id="app"></div>

    <template id="my-app">
      <!-- 1 mustache的基本应用 -->
      <h2>{
  { message }} - {
  { message }}</h2>

      <!-- 2 这是一个表达式 -->
      {
  {message * 10}}
      {
  {message.split(" ").reverse().join(" ")}}

      <!-- 3 可以调用函数 -->
      <!-- 可以使用computed(计算属性) -->
      <h2>{
  {getReverseMessage()}}</h2>

      <!-- 4 三元计算 -->
      <h2>{
  {isShow ? "小老虎" : ""}}</h2>
      <button @click="toggle">切换</button>
    </template>

    <script src="../js/vue.js"></script>
    <script>
      const App = {
        template: '#my-app',
        data() {
          return {
            message: "Hello Word",
            counter: 100,
            isShow: true
          }
        },
        methods: {
          getReverseMessage() {
            // split 分割; reverse 反转；join 连接 
            return this.message.split(" ").reverse().join(" ");
          },
          toggle() {
            this.isShow = !this.isShow;
          }
        }
      }

      Vue.createApp(App).mount('#app');
    </script>
</body>

语法规则：

{ { data中的对象变量名/表达式的计算/方法名/三元计算 }}

作用：

（1）直接数据展示

{
  { message }}

2）表达式的计算

{
  {message * 10}}
{
  {message.split(" ").reverse().join(" ")}} <!-- 分割反转连接-->

（3）调用函数、计算属性

{
  { getReverseMessage() }}

（4）三元计算

{
  {isShow ? "小老虎" : ""}}

为什么在data定义好数据后，可以直接使用mustache语法进行数据的展示？

因为当我们创建了data后，vue就会将data存放于响应模板中，类似于java中的spring容器，之后在使用的过程中直接拿取便可

v-once指令

v-once用于指定元素或者组件只渲染一次。当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过

<body>
    <div id="app"></div>
    <template id="my-app">
      <h2>{
  {counter}}</h2>
      <!-- 使用了 v-once 后 点击加一，下面的counter数字不会发生变化，默认只渲染一次  -->
      <div v-once>
        <h2>{
  {counter}}</h2>
        <h2>{
  {message}}</h2>
      </div>
      <button @click=&#