Vue.js前端开发整理

LYSong0310

已于 2024-01-02 13:10:01 修改

阅读量963

点赞数 18

文章标签： vue.js 前端 javascript

于 2023-12-27 18:25:04 首次发布

本文链接：https://blog.csdn.net/lysong0310/article/details/135246872

版权

了解Vue.js

1.Vue.js的简介和特点

Vue.js 是一款流行的前端 JavaScript 框架，用于构建交互性强、响应迅速的单页面应用程序（SPA）或复杂的用户界面。以下是 Vue.js 的简介和主要特点：

渐进式框架：Vue.js 是一个渐进式框架，可以逐步应用于项目中。你可以选择使用 Vue.js 来处理应用程序的一部分，也可以将其作为整个应用程序的核心。
轻量级和高效：Vue.js 以其轻量级和高效的特性而闻名。它的文件大小较小，加载速度快，并且具有出色的性能。
响应式数据绑定：Vue.js 提供了一个响应式的数据绑定系统，可以自动追踪数据的变化并实时更新视图。当数据发生变化时，与之相关的视图会自动更新，简化了开发流程。
组件化开发：Vue.js 支持组件化开发，将界面分解成独立、可复用的组件。每个组件具有自己的逻辑和样式，并可以通过组合和嵌套来构建复杂的用户界面。
单文件组件：Vue.js 支持使用单文件组件（.vue 文件）来组织代码。这种方式将模板、样式和逻辑全部封装在一个文件中，使代码更加清晰、可维护性更强。
虚拟 DOM：Vue.js 使用虚拟 DOM 技术来优化页面渲染性能。通过在内存中构建虚拟 DOM，并与实际 DOM 进行比较，只对发生变化的部分进行更新，减少了不必要的 DOM 操作，提高了性能。
插件库和工具生态：Vue.js 拥有丰富的插件库和工具生态系统，如 vue-router 用于处理路由，vuex 用于状态管理，vue-cli 提供了快速

2.Vue的一个实例

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    // 第一步：引入vue.js

    <script src="../js/vue.js"></script>

  </head>

  <body>

    // 第二步：创建根节点

    <div id="app">

    </div>

    <script>

       // 第三步：初始化vue实例，绑定根节点

      var app= new Vue({

        el: "#app",

        data: {

          msg: "第一个vue实例!",

        },

      })

    </script>

  </body>

</html>

在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

data概述：

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据

}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

1、对象（Object）的形式

<div id="app">{{content}}</div>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                content: "Mustache表达式通过data为对象获取content的值"

            }

        })

    </script>

2、函数（Function）的形式

<div id="app">{{content}}</div>

    <script>

        var app = new Vue({

            el: "#app",

            // 这是下面function的简写形式

            data(){

                       return {

                            name:'张三',

                            age:18

                    }

              },


        })

    </script>

Vue的基本语法和概念

1.了解基础特性

响应式数据绑定：Vue采用了响应式的数据绑定机制，当数据发生改变时，视图会自动更新。通过将数据和视图进行绑定，可以实现数据驱动的开发模式。
组件化开发：Vue将应用程序划分为一系列组件，每个组件具有自己的状态和行为。组件可以嵌套使用，形成复杂的应用程序结构。组件之间可以进行数据传递和通信，提高了代码的复用性和可维护性。
虚拟DOM：Vue使用虚拟DOM来提高渲染性能。Vue会将组件的模板转换成虚拟DOM，并通过比对新旧虚拟DOM的差异，最小化DOM操作，只更新需要改变的部分，从而提高了页面的渲染效率。
模板语法：Vue使用基于HTML的模板语法，可以在模板中进行数据绑定、指令和事件处理等操作。模板语法简洁明了，易于理解和使用。
条件与循环：Vue提供了诸如v-if、v-for等指令，使得条件渲染和列表渲染非常方便。可以根据数据的不同情况显示或隐藏元素，也可以通过循环迭代列表数据生成对应的元素。
计算属性和侦听器：Vue提供了计算属性和侦听器的机制，可以方便地处理复杂的逻辑和异步操作。计算属性可以根据已有的数据进行计算，并且具有缓存机制，避免重复计算。侦听器可以监听数据的变化并执行相应的操作。
生命周期钩子：Vue组件具有生命周期钩子函数，可以在组件的不同阶段执行特定的代码，例如created、mounted、updated等。通过生命周期钩子函数，可以在组件初始化、渲染和销毁等阶段进行相应的操作。

2.常见的语法和例子

1、v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

例子：


<div id="app">
  <p v-text="message"></p>
</div>



var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

2.v-html

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

例子：


<div id="app" v-html="htmlContent"></div>


var app = new Vue({
  el: '#app',
  data() {
  return {
    htmlContent: '<h1>Hello, Vue.js!</h1>'
  };
}
});

3.v-bind

v-bind指令用于实现单向动态数据绑定。

前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

例子：

<div id="app">
  <img v-bind:src="imageSrc" alt="Vue logo">
</div>

new Vue({
  el: '#app',
  data: {
    imageSrc: 'path/to/image.jpg'
  }
});

4. v-on

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。

例子：

<div id="app">
  <button v-on:click="sayHello">Say hello!</button>
</div>

new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello!');
    }
  }
});

5. v-for

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

例子：

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
  }
});

6.v-model

v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

例子：

<div id="app">
  <label for="name">Name:</label>
  <input type="text" id="name" v-model="name">
  <p>Your name is: {{ name }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    name: ''
  }
});

7、v-if和v-else

v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

v-if的使用一般有两个场景：

1.通过条件判断展示或者隐藏某个元素或者多个元素；

2.进行视图之间的切换。

例子：

<div id="app">
  <p v-if="showMessage">Hello, world!</p>
  <p v-else>Goodbye, world!</p>
</div>

new Vue({
  el: '#app',
  data: {
    showMessage: true
  }
});

8、v-show

v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。

带有v-show的元素始终会被渲染并保留在DOM中，v-show指令使用css样式来控制元素的显示/隐藏。值得注意的是，注意，v-show不支持<template>元素，也不支持v-else。

例子：

<div id="app">
  <p v-show="showMessage">Hello, world!</p>
  <button @click="toggleMessage">Toggle message</button>
</div>

new Vue({
  el: '#app',
  data: {
    showMessage: true
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage;
    }
  }
});

组件化开发

1.vue组件的介绍

Vue组件是Vue.js框架中的核心概念之一。组件可以将页面拆分为多个独立、可复用的模块，每个组件负责特定的功能或UI部分。通过组件化开发，我们可以提高代码的可维护性、复用性和可测试性。

Vue组件具有以下特点：

独立性：每个组件都是相互独立的，它们有自己的模板、样式和逻辑。这使得组件可以在不同的应用中复用，而不会产生冲突。
可复用性：组件可以在同一个应用中被多次使用，也可以在不同的应用中共享。这样可以避免重复编写相似的代码，提高开发效率。
封装性：组件将相关的模板、样式和逻辑封装在一起，对外部环境进行隔离。这样可以保证组件的内部实现细节不会被外部影响，提供更好的代码可读性和维护性。
可扩展性：组件可以通过属性（props）和事件（events）进行参数传递和通信，使得不同组件可以协同工作。这种组件间的通信方式非常灵活，可以满足各种复杂的需求。
生命周期：Vue组件具有生命周期钩子函数，可以在不同的阶段执行特定的逻辑。通过这些钩子函数，我们可以在组件的创建、更新和销毁等时机进行相应的处理。

2.vue组件的使用

引入Vue.js库：在你的HTML文件中，通过<script>标签引入Vue.js库。你可以从官方网站下载Vue.js库，或者使用CDN链接。
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```
创建Vue实例：在JavaScript代码中，创建一个Vue实例，并指定el选项来指定Vue实例挂载的元素。
```
new Vue({
  el: '#app',
});
```

定义组件：使用Vue.component方法来定义一个全局组件，或者在Vue实例的components选项中定义局部组件。

Vue.component('my-component', {
  template: '<div>Hello, Vue Component!</div>'
});

// 局部组件
var MyComponent = {
  template: '<div>Hello, Vue Component!</div>'
};

new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  }
});

使用组件：在Vue实例的模板中使用自定义的组件标签，即可渲染对应的组件。
```
<div id="app">
  <my-component></my-component>
</div>
```

Vue的路由

1.路由的介绍

Vue.js提供了Vue Router作为官方的路由管理器。Vue Router允许你在单页应用（Single Page Application）中通过URL来管理页面间的切换和导航。

以下是Vue Router的一些核心概念和功能：

1.路由配置：在Vue Router中，你需要定义路由配置，即指定每个URL对应的组件。你可以使用VueRouter构造函数来创建一个路由实例，并通过routes选项来指定路由配置。


const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

2.路由视图：在Vue Router中，你需要为路由配置指定一个用于渲染路由的视图容器。你可以在Vue实例的模板中使用<router-view>标签来渲染路由对应的组件。

html
<div id="app">
  <router-view></router-view>
</div>

3.路由链接：Vue Router提供了<router-link>组件，用于生成导航链接。你可以使用to属性指定链接的目标URL。

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

4.动态路由：Vue Router支持动态路由，即根据不同参数生成不同的路由。你可以在路由配置中使用:来指定参数化的部分，并在组件中通过$route.params来获取参数。


const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
});

// 在User组件中获取参数
this.$route.params.id

2.路由的使用

安装Vue Router：你可以使用npm或者yarn来安装Vue Router。
```
npm install vue-router
```

引入Vue Router：在你的JavaScript代码中，引入Vue Router，并创建一个路由实例。你可以通过Vue.use()方法来注册Vue Router插件。

import Vue from 'vue';
import VueRouter from 'vue-router';

// 引入组件
import Home from './components/Home.vue';
import About from './components/About.vue';

// 注册Vue Router插件
Vue.use(VueRouter);

// 创建路由实例
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

挂载路由实例：在Vue实例中，通过router选项指定路由实例，从而将路由功能注入到Vue应用中。
```
new Vue({
  el: '#app',
  router,
  ...
});
```

使用路由链接和视图：在Vue模板中，使用<router-link>标签生成路由链接，并使用<router-view>标签渲染路由对应的组件。

<div id="app">
  <ul>
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/about">About</router-link></li>
  </ul>
  <router-view></router-view>
</div>

Ajax 数据请求

axios的使用

安装并导入axios：你可以通过npm或者yarn安装axios。
```
npm install axios
```

发送GET请求：使用axios.get()方法发送GET请求，并提供请求的URL。

axios.get('/api/data')
  .then(response => {
    // 请求成功时的处理逻辑
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败时的处理逻辑
    console.error(error);
  });

发送POST请求：使用axios.post()方法发送POST请求，并提供请求的URL和要发送的数据。

axios.post('/api/data', { name: 'John', age: 25 })
  .then(response => {
    // 请求成功时的处理逻辑
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败时的处理逻辑
    console.error(error);
  });

设置请求头：如果需要在请求中设置特定的请求头，你可以使用axios.defaults.headers对象来进行配置。
```
axios.defaults.headers.common['Authorization'] = 'Bearer token';
```

并发请求：如果你需要同时发送多个请求，并在所有请求完成后执行特定的逻辑，你可以使用axios.all()和axios.spread()方法。

axios.all([
  axios.get('/api/data1'),
  axios.get('/api/data2')
])
  .then(axios.spread((response1, response2) => {
    // 所有请求完成后的处理逻辑
    console.log(response1.data);
    console.log(response2.data);
  }));