Vue前端框架

原创已于 2024-07-22 16:12:29 修改 · 2.1k 阅读

34 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #vue

于 2024-04-05 18:24:35 首次发布

本文介绍了Vue.js的基础使用，包括环境搭建、组件概念、文本插值与属性绑定，以及事件处理和Vuex状态管理的对比与应用。同时，探讨了TypeScript在项目中的类型支持和基本使用方法。

1.vue基本使用1

1.vue环境搭建

一般创建vue项目是在cmd命令中用：vue ui 命令，采用ui图形界面的方式直观创建项目。

2.vue基本使用方式：vue组件

3.文本插值

4.属性绑定

5.事件绑定

6.双向绑定

7.条件渲染

8.循环指令

v-for，循环遍历

<div id="ddd">

         <div v-for="user in userList">
            {{user.name}} -----{{user.age}}
        </div>

        <!--这里第一个参数就是集合中的每个对象名，第二个参数就是该对象在集合中的index-->
        <div v-for="(user,a) in userList">
            {{a+1}} --- {{user.name}} --- {{user.age}}
        </div>    </div>
new Vue({
            el: '#ddd',
            data:{
                di : 'ddd',
                userList:[
                    {"name":"Tom","age":"18"},
                    {"name":"Jack","age":"20"},
                    {"name":"Lucy","age":"20"}
                ]
            },
            methods:{

            }
        })

运行结果：

2.vue基本使用2

1.axios

安装axios命令：npm install axios

导入axios包

1.axios常用api

2.配置代理(解决跨域问题)

3.axios发送get和post请求的示例

4.axios统一发送请求的方式

2.小结

3.vuex

1.vuex的介绍

2.对于vuex的理解(vuex和全局变量的比较)

Vuex 的概念和功能在某些方面确实与全局变量相似，但它们之间也存在一些关键的区别。我们可以从以下几个方面来比较：

目的和用途：
- 全局变量：通常用于在应用程序的任何地方存储和访问数据。它们没有明确的组织结构，也不提供数据变化追踪或响应式更新。
- Vuex：是 Vue.js 的状态管理库，旨在提供一个可预测的状态容器，用于组织和管理组件之间的共享状态。它提供了结构化的存储、状态变更追踪、响应式更新以及与组件的集成。
作用域：
- 全局变量：通常在整个应用程序中都是可见的，可以在任何地方被访问和修改。
- Vuex：状态被封装在一个单独的 store 中，并通过 Vuex 的 API 在组件中访问。虽然 Vuex 的状态可以在多个组件之间共享，但它不是全局可访问的，而是通过 Vuex 的方法来访问和修改。
状态管理：
- 全局变量：通常没有提供状态变更的追踪或管理。当你改变一个全局变量的值时，除非手动监听和更新，否则其他依赖这个变量的部分可能不会得到更新。
- Vuex：通过 mutations 和 actions 来管理状态的变更，确保状态变更的可预测性和可追踪性。Vuex 还提供了 getters 来派生状态，以便在需要时进行计算。
响应性：
- 全局变量：通常不具备响应性，即当变量值改变时，依赖这个变量的部分不会自动更新。
- Vuex：Vuex 的状态是响应式的，当状态改变时，依赖该状态的组件会自动重新渲染。
模块化：
- 全局变量：通常不容易模块化，尤其是在大型应用中，全局变量可能会变得混乱和难以管理。
- Vuex：支持模块化，允许将 store 分割成多个模块，每个模块有自己的状态、mutations、actions 和 getters。这有助于在大型应用中保持代码的清晰和组织。