关于vue.js前端框架技术的简单介绍以及使用实例

组件是可复用的 Vue 实例，用于封装和管理一块特定的 HTML 代码、样式和行为。使用组件可以将页面拆分成多个独立、可复用的模块，使代码更加模块化、可维护和可扩展。Vue 组件有两种定义方式：全局注册和局部注册。局部注册：将组件定义在一个 Vue 实例内部或者其他组件内部，局部注册的组件只能在所属的实例或组件中使用。// 组件选项})局部注册：将组件定义在一个 Vue 实例内部或者其他组件内

Bigdeep_sea_fish

2024人浏览 · 2024-01-01 17:54:25

Bigdeep_sea_fish · 2024-01-01 17:54:25 发布

一.第一个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实例常用到的构造选项

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

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

三.data数据对象

data 对象是一个常见的属性，它用于存储组件内部的数据。它是一个普通的 JavaScript 对象，包含了需要在组件中使用的数据。

当定义一个 Vue 组件时，可以通过在组件的选项中添加 data 属性来定义数据对象。例如：

Vue.component('my-component', {
  data: function() {
    return {
      message: 'Hello Vue!'
    }
  }
})

在这个例子中，data 属性返回一个包含单个属性 message 的对象。这个 message 属性可以在组件的模板中使用。

在 Vue.js 中，data 对象是响应式的，这意味着当数据发生变化时，组件会自动更新它相应的视图。当修改 data 对象中的属性时，Vue.js 会检测到这个变化，并重新渲染组件，以确保视图和数据保持同步。

需要注意的是，对于 data 对象中的属性，只有在组件实例被创建时才会被 Vue.js 进行响应式处理。如果需要添加新的属性，则需要使用 Vue.set 或者 Object.assign 等方法来确保属性具有响应式。

四.methods方法

methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示Vue实例

<body>
   <div id="app">
        <div>
            {{msg}}

            <p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>

            <!-- v-on  可以简写为  @ -->

            <button v-on:click="btnClick">点击</button>


            <!-- 简写形式 -->

            <!-- <button @click="btnClick">点击</button> -->

        </div>

    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {

                msg: "旧文本"
            },

           // 页面的点击事件都需要放到  methods 里面

            methods:{
                btnClick(){
                    this.msg="新文本"
                }
            }
        })

    </script>
</body>

五.计算属性

计算属性是一种特殊的属性，它根据依赖的数据动态计算出一个新的值，并将其返回。计算属性会缓存计算结果，在依赖的数据没有发生变化时，不会重新计算，提高了性能。

计算属性的定义方式是通过在 Vue 组件的选项中添加一个 computed 属性，并在其中定义计算属性的方法。例如：

Vue.component('my-component', {
  data: function() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

在这个例子中，我们定义了一个计算属性 fullName，它返回 firstName 和 lastName 的拼接结果。

计算属性可以像普通的属性一样在模板中使用：

<div>
  {{ fullName }}
</div>

当 firstName 或 lastName 发生变化时，fullName 会自动重新计算并更新到模板中。

与方法相比，计算属性具有更好的性能和便利性。计算属性会根据需要进行缓存，只有在依赖的数据发生变化时才会重新计算。而方法在每次渲染时都会被调用，无论依赖的数据是否发生变化。

总结一下，计算属性是一种方便且高效的方式来处理基于依赖数据进行动态计算的情况，它能够自动追踪依赖并进行缓存，以提高性能。

六.组件的介绍

组件是可复用的 Vue 实例，用于封装和管理一块特定的 HTML 代码、样式和行为。使用组件可以将页面拆分成多个独立、可复用的模块，使代码更加模块化、可维护和可扩展。

Vue 组件有两种定义方式：全局注册和局部注册。

局部注册：将组件定义在一个 Vue 实例内部或者其他组件内部，局部注册的组件只能在所属的实例或组件中使用。例如：

Vue.component('my-component', {
  // 组件选项
})

在全局注册后，可以在任何 Vue 实例的模板中使用该组件：

<my-component></my-component>

局部注册：将组件定义在一个 Vue 实例内部或者其他组件内部，局部注册的组件只能在所属的实例或组件中使用。例如：

var myComponent = {
  // 组件选项
}

new Vue({
  components: {
    'my-component': myComponent
  }
})

data：组件的数据对象。
props：组件接收的父组件传递的属性。
methods：组件的方法。
computed：计算属性。
watch：监听属性的变化。
template：组件的模板，用于定义组件的 HTML 结构。

除了这些选项，还可以使用组件的生命周期钩子函数来处理组件的初始化、销毁和更新等过程。

使用组件可以将复杂的页面拆分成多个独立的模块，提高代码的可维护性和可复用性。每个组件都有自己的作用域，使得组件之间的数据和行为更加隔离，避免了全局命名冲突和数据污染。

七.组件之间的通信

组件是是Vue.js中最强大的功能之一。组件实例的作用域是相互独立的，这就意味着不同组件之间的数据是无法共享的。一般组件之间的关系如图所示。

A和B，B和C、B和D都是父子关系，C和D是兄弟关系，A和C、A和D是隔代关系（可能隔多代）。

组件通信时，根据组件之间的关系的不同，有着不同的通信方式。一般通信分为3种情况：父组件向子组件通信、子组件向父组件通信、非父子组件之间的通信。针对不同的场景，需要使用不同的通信方式。

1、父组件向子组件传递数据，需要props属性来实现。

2、子组件向父组件传值，需要用到自定义事件，整个通信的过程为：

2.1、子组件使用this.$emit('事件名','需要传输的数据')来触发事件，父组件使用$on()来监听子组件的事件。

八.路由的基本使用

路由概念

路由：其实就是指向的意思，当点击页面的Home按钮时，页面就显示Home页面的内容，点击about按钮时，就显示about页面的内容，这可以说是一种映射。

问题：点击按钮之后，如何做到正确的响应呢？例如点击home,显示home页面的内容，点击about，显示about页面的内容。这就要涉及到三个基本的概念了，分别是route、routes、router。

① route ：指一条路由，单数形式，比如点击Home-->显示home页面的内容，这是一条路由，点击About-->显示about页面的内容，这是另一条路由。

② routes : 指一组路由，把多个单条路由组合起来，就形成一组路由。

[

{点击Home-->显示home页面的内容},

{点击About-->显示about页面的内容}

]

③ router是一个机制，相当于一个管理者，主要是来管理路由的，比如：

在routes里定义了一组路由，他是静止的，没有任何效果的，当真正进行页面的路由请求的时候，需要router来起到作用，当点击路由跳转时，他会到routes里面去查找相对应的path,从而显示对应页面的内容。

九.路由传参以及获取参数

路由传参是指将数据通过 URL 参数或者路由路径传递给组件，从而实现页面之间的数据传递和交互。Vue.js 提供了两种方式来进行路由传参：动态路由和查询参数。

组件中可以通过 props 属性来接收路由传递的参数：

查询参数：查询参数是指通过 URL 查询字符串传递参数。例如：

在组件中可以通过 this.$route.query 对象来获取传递的查询参数：

总结一下，路由传参是用于实现页面之间的数据传递和交互的重要技术手段。Vue.js 提供了动态路由和查询参数两种传参方式。动态路由通过路由路径中的占位符来传递参数，比较适用于需要传递固定参数的情况；查询参数则是通过 URL 查询字符串来传递参数，比较适用于需要传递多个可选参数的情况。

十.axios的使用总结

可以使用 Axios 来进行 HTTP 请求。Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用，支持异步请求、拦截请求和响应、转换请求和响应数据等功能。

以下是使用 Axios 进行 HTTP 请求的基本步骤：

安装 Axios：在项目中使用 Axios 需要先通过 npm 安装：
```
npm install axios --save
```
引入 Axios：在需要使用 Axios 的组件中，需要先引入 Axios：
```
import axios from 'axios'
```
发送请求：使用 Axios 发送请求非常简单，只需要调用 axios 方法，并传入请求的 URL 和请求方式即可。例如：
```
axios.get('/user')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })
```
在这个例子中，我们发送了一个 GET 请求到 /user 接口，并使用 then 和 catch 方法来处理响应和错误。

响应拦截：可以使用 Axios 的拦截器来对请求和响应进行统一的处理。例如，可以在请求时添加 token 头信息，或者在响应时统一处理错误信息。例如：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response && error.response.status === 401) {
    // 处理 401 错误
  } else {
    // 处理其他错误
  }
  return Promise.reject(error)
})

在这个例子中，我们定义了一个请求拦截器和一个响应拦截器。请求拦截器用于设置 token 头信息，而响应拦截器用于处理各种错误情况。

总结一下，使用 Axios 发送 HTTP 请求非常方便，只需要调用 axios 方法即可。可以通过引入 Axios 和使用拦截器来实现对请求和响应的统一处理。Axios 还支持取消请求、自定义配置、promise 化等功能，可以根据实际需求来使用。

十一.跨域的解决

一般浏览器会有同源策略的限制。同源策略是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受影响。所谓同源（同一个域）就是指两个页面具有相同的协议（protocol）、主机（host）和端口号（port）

vue项目中如何解决跨域

1、在项目的vue.config.js文件里面添加以下代码，如果没有vue.config.js文件则自己手动添加。

module.exports = {

devServer: {

proxy: {

  '/api': {

  // 这里是后台提供给我们的接口地址

target: 'http://localhost:5000/',

changeOrigin: true, //允许跨域

open:true,

pathRewrite:{

  /* 当我们在浏览器看到的请求地址为：http://localhost:8080/api/User/GetAllUsers */

  /* 实际上我们访问的地址为：http://localhost:5000/User/GetAllUsers 因为重写了/api */

  /* 如果后台提供的接口本身就带有api，则无需执行重写路径这个步骤例如:http://localhost:5000/api/User/GetAllUsers */

  '^/api':''  //重写路径

}

}

}

}

}