Vue

最新推荐文章于 2024-03-01 09:53:15 发布
最新推荐文章于 2024-03-01 09:53:15 发布
阅读量952 收藏
点赞数
分类专栏： 前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42495388/article/details/103240827
版权

文章目录

什么是 Vue？
考虑这个需求： 我们要把一个 json对象的数据，显示到一个元素上去。
如果不使用 Vue， 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。
如果使用Vue， 那么仅仅需要提供数据，以及数据要绑定到的元素的id，就行了，不需要显式地操作HTML DOM。

一、Vue基础

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网 ： https://cn.vuejs.org/

Git地址：https://github.com/vuejs

作者：尤雨溪

1.1 MVVM模式

Vue是一款MVVM模式的框架

  • M：即Model，模型，包括数据和一些基本操作
  • V：即View，视图，页面渲染结果
  • VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

MVVM是基于MVC的一个分支，VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

  • 只要我们Model发生了改变，View上自然就会表现出来。
  • 当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

在这里插入图片描述

1.2 Node和NPM

Node.js ： 基于事件循环的异步IO框架

  • 基于事件循环的异步IO
  • 单线程运行，避免多线程的变量同步问题
  • JS可以编写后台代码，前后台统一编程语言

NPM： 中文教程

NPM 由三个独立的部分组成：

  • 网站 是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。
  • 注册表 是一个巨大的数据库，保存了每个包（package）的信息。
  • 命令行工具(CLI )通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

如何查找包(package)： search bar.

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，先安装node及NPM工具。

  1. 下载Node.js：https://nodejs.org/en/

    推荐下载LTS版本，直接全部下一步就可以了，完成后在控制台输入：node -v 看到版本信息

  2. Node自带了NPM了，在控制台输入npm -v查看

  3. 因为npm默认的仓库地址是在国外网站，速度较慢，所以使用切换镜像的工具nrm设置到淘宝镜像。

    1. 安装nrm ： npm install nrm -g
    2. 查看npm仓库列表：nrm ls带*的就是当前选中的镜像仓库
    3. 指定淘宝的镜像源：nrm use taobao
    4. 测试速度：nrm test npm

  4. 安装完成后请一定要重启下电脑！！！(不推荐使用cnpm，有时会有bug)

1.3 安装Vue

  1. 下载安装 ：https://github.com/vuejs/vue
  2. 使用CDN
  3. 推荐npm安装

谷歌浏览器插件： 搜索Vue.js devtools

npm安装：

  1. 在idea的左下角，有个Terminal按钮，点击打开控制台
  2. 进入vue目录，先输入：npm init -y 进行初始化，生成package.json版本信息文件
  3. 安装Vue，输入命令：npm install vue --save
  4. 在要使用的HTML中引入Vue依赖：<script src="node_modules/vue/dist/vue.js"></script>

二、Vue-HTML模板

2.1 插值表达式：声明式渲染

2.1.1 花括号

格式：{{js表达式、数据模型}}

  • 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
  • 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
  • 可以直接获取Vue实例中定义的数据或函数

这种方式会出现插值闪烁(在数据未加载完成时，页面会显示出原始的代码，加载完毕后才显示正确数据)，可使用v-text和v-html指令来替代{{}}，当没有数据时，会显示空白。

2.1.1 v-text(推荐)

将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出，

通常使用这个方式

2.1.1 v-html

将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染，解析HTML，js，css，有安全隐患

2.2 双向绑定：v-model

v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。

v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

v-model=“数据模型”：在表单元素中使用，才有意义

v-model的可使用元素有：

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components（Vue中的自定义组件）

多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型;

radio对应的值是input的value值;

text 和textarea 默认对应的model是字符串;

select单选对应字符串，多选对应也是数组;

修饰符:

  1. .lazy：对于输入元素，默认的行为方式是一旦有数据变化，马上进行绑定。但是加上.lazy之后，相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了。
  2. .number：v-model默认是string类型，可以通过这个方式确保获取到的是数字类型了。
  3. .trim：去掉前后的空白

2.3 事件绑定：v-on 简写@

语法：v-on:事件名=“js片段或函数名”

例如：v-on:click='add'可以简写为@click='add'

  1. @click: 点击事件
  2. @contextMenu:右击事件，可配合.prevent阻止默认事件(在页面不显示右击菜单)
  3. @keyup:键盘事件.按键修饰符
    1. 回车事件@keyup.13或者@keyup.enter
    2. .tab
    3. .delete (捕获“删除”和“退格”键)
    4. .esc
    5. .space
    6. .up
    7. .down
    8. .left
    9. .right

2.3.1 事件修饰符

在事件处理程序中，只有纯粹的数据逻辑，不用去处理 DOM 事件细节，为此Vue.js 为 v-on 提供了事件修饰符，由点开头的指令后缀来表示

  • .stop ：阻止事件冒泡到父元素
  • .prevent：阻止默认事件发生*
  • .capture：使用事件捕获模式
  • .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
  • .once：只执行一次

2.3.2 组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  • .ctrl
  • .alt
  • .shift

例如：Alt + C：<input @keyup.alt.67="方法名">

2.4 v-for

2.4.1 遍历数组

语法：v-for="item in items"

  • items：要遍历的数组，需要在vue的data中定义好。
  • item：迭代得到的数组元素的别名

数组角标：

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法：v-for="(item,index) in items"

  • index：迭代到的当前元素索引，从0开始。

2.4.2 遍历对象

语法：

v-for="value in object"：得到的是对象的属性值
v-for="(value,key) in object"：第一个是属性值，第二个是属性名
v-for="(value,key,index) in object"：第三个是索引，从0开始

2.4.3 key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

用法：:key=唯一的值

例如:绑定的key是数组的索引，应该是唯一的

<ul>
    <li v-for="(item,index) in items" :key=index></li>
</ul>

注意：一个特殊语法：:key="" 它可以让你读取vue中的属性，并赋值给key属性

2.5 v-if

2.5.1 v-if

v-if当得到结果为true时，所在的元素才会被渲染。

语法：v-if="布尔表达式"

使用 v-else 指令来表示 v-if 的“else 块”

使用 v-else-if 指令来表示 v-if 的“else-if 块”

v-else，v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后。

2.5.2 与v-for结合

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

2.5.3 v-show

语法：v-show="布尔表达式"

带有 v-show 的元素始终会被渲染并保留在 DOM 中。只是简单地切换元素的 CSS 属性 display。当布尔表达式为false时：display:none

2.6 绑定属性：v-bind 简写（:）

html属性不能使用双大括号形式绑定，只能使用v-bind指令。

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

常用：:class="{actice:布尔表达式}" 当true时，应用actice的css样式

v-bind:href, 可以简写成 :href

<a :href="数据模型">http://12306.com</a>

三、Vue-实例

3.1 属性介绍

  • el：是element的缩写，选择器，通过id选中要渲染的页面元素，对应HTML模板
  • data：数据模型，数据是一个对象，里面有很多属性，都可以渲染到视图中
  • methods：定于方法
  • commputed：计算属性，计算本质就是方法，但是方法必须有返回值，计算属性可以像数据模型一样使用，如果计算属性的依赖项没有改变，直接从缓存中提取
  • watch：监听属性。监控一个值的变化。从而做出相应的反应。方法名是要监听的数据模型名称watch:{message(newVal,oldVal){console.log(newVal, oldVal)}}
  • 钩子函数：created，在对象初始化之后执行，通常使用created来初始化数据，例如(Ajax请求的数据)
  • components：局部子组件,当前vue对象子组件集合,其key就是子组件名称,其值就是组件对象名
  • filters：过滤器。

3.2 this变量

在控制台打印this

在这里插入图片描述

3.3 methods 和 computed 的区别

虽然methods能跟computed 达到一样的效果,{{}}调用时,方面名要加上括号。

但computed 是有缓存的，而methods每次都会调用。

四、生命周期-钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

在这里插入图片描述

4.1 钩子函数

  • beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。
  • created：在创建实例之后进行调用。
  • beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
  • mounted：我们可以将他理解为原生js中的window.onload=function({.,.})，也可以理解为jquery中的$(document).ready(function(){….})，在dom文档渲染完毕之后将要执行的函数
  • beforeDestroy：该函数将在销毁实例前进行调用 。
  • destroyed：改函数将在销毁实例时进行调用。
  • beforeUpdate：组件更新之前。
  • updated：组件更新之后。

五、组件化：component

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

在不同页面就可以共享这些组件，避免重复开发，减少开发成本

在vue里，所有的vue实例都是组件

5.1 全局组件

通过Vue的component方法来定义一个全局组件

在<scrip>中定于全局组件，两个参数：1，组件名称。2，组件参数

  • 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
  • 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
  • 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
  • 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
  • data必须是一个函数，不再是一个对象。

例如：

<script type="text/javascript">
    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    })
    var app = new Vue({
        el:"#app"
    })
</script>

5.2 局部组件

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。因此，对于一些并不频繁使用的组件，我们会采用局部注册。

效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用。

先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

const counter = {
    template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
    data(){
        return {
            count:0
        }
    }
};

然后在Vue中使用它：

var app = new Vue({
    el:"#app",
    components:{
        counter:counter // 将定义的对象注册为组件
    }
})

5.3 组件的复用

在HTML中，使用定于好的组件，可以任意复用多次

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

5.4 组件通信

一般Vue实例为父组件，局部和全局组件为子组件

5.4.1 父向子通信：props

父自定义属性，属性名任意，属性值是要传递的数据模型，

子通过props接受，参数名是自定义属性的属性名props:["属性名"]

如需props验证：

props: {                        //定义需要从父组件中接收的属性
            items: {            //是要接收的属性名称
                type: Array,    //限定父组件传递来的必须是数组
                default: [],    //默认值
                required: true  //是否必须
            }
        }

5.4.2 子向父通信：$emit

父自定义事件，事件名任意，属性值是要传递的方法，通过v-on指令将父组件的函数绑定到子组件上

子定义事件调用子自己的方法，子的方法中通过this.$emit("自定义事件名")实现调用父组件绑定的函数

5.4.3 动态、静态传递

即便值是静态的，但最好都用动态传递

使用v-bind实现动态传递，也就是在父传子传递时，自定义属性前加上:，就可以实现动态传递

六、路由：vue-router

使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。

官网：https://router.vuejs.org/zh-cn/

6.1 安装

使用npm安装：npm install vue-router --save

在html中引入依赖：

6.2 入门案例

  1. 在html中 引入组件.js文件
  2. 在<script>中新建vue-router对象，并且指定路由规则：

创建VueRouter对象，并指定路由参数

routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：

  • path：路由的路径
  • component：组件名称,也就是引入的js文件
// 创建VueRouter对象
const router = new VueRouter({
    routes:[ // 编写路由规则
        {
            path:"/login", // 请求路径，以“/”开头
            component:loginForm // 组件名称
        },
        {
            path:"/register",
            component:registerForm
        }
    ]
})
  1. 在父组件中引入router对象：
var vm = new Vue({
    el:"#app",
    router // 引用上面定义的router对象
})
  1. 在html中实现页面跳转控制：
  • 通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变
  • 通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
<div id="app">
    <!--router-link来指定跳转的路径-->
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <div>
        <!--vue-router的锚点-->
        <router-view></router-view>
    </div>
</div>

注意 : 单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

七、Vue-Ajax

Vue.js 并没有限制使用哪种方式进行 ajax 访问，所以可以使用如下方式：

  • 原生 ajax ：原生一般不在项目中直接用
  • JQuery：不如fetch.js和axios.js
  • vue-resource：已经不再维护了，所以不推荐
  • fetch.js：官方推荐
  • axios.js：官方推荐

7.1 fetch.js

7.2 axios.js

冷潇丶
关注
专栏目录
Vue3通透教程【一】Vue3现状—必然趋势？
官方推荐
01-30 6万+
凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事。
vue 动态生成按钮，@click 绑定方法名称，handler.apply is not a function
新青年1号
08-21 7988
需求来源于一个管理系统的权限管控模块。 需求描述：进入页面，触发方法，从服务端获取当前用户在当前页面下的操作权限，生成对应的操作按钮。 正常情况，接到这种需求，都会想到使用子组件获取操作权限，v-for 遍历生成按钮，父组件调用，如下： 子组件 mybutton.vue <template> <div> <el-button v-for="item in buttonlist" :key="item.id" @click="item.methodName"&.
vue之@click绑定的函数，如何实现加不加括号都可执行
yummry的博客
11-10 5456
vue@click 事件原理
vue @click 绑定的函数,传入事件对象和自定义参数
weixin_49295900的博客
10-13 2098
1.仅传入自定义参数 html: <div id="app"> <button @click="tm(123)">ddddd</button> </div> js: new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); //会输出 123 } } }) 2.仅传入事件对象 html: <div id="app
Vue入门-指令
shenzhen_zsw的专栏
06-12 756
Vue入门-指令5.指令5.1.插值表达式5.1.1.花括号5.1.2.插值闪烁5.1.3.v-text和v-html5.2.v-model5.3.v-on5.3.1.基本用法5.3.2.事件修饰符5.3.3.按键修饰符5.3.4.组合按钮5.4.v-for5.4.1.遍历数组5.4.2.数组角标5.4.3.遍历对象5.4.4.key5.5.v-if和v-show5.5.1.基本使用5.5.2.与...
Vue安装及环境配置、开发工具
dream_summer的博客
09-29 24万+
vue前端框架的环境搭建。
Vue进阶（四十七）：面试必备：2024 Vue经典面试题总结（含答案）
IT全栈 华强工作室
04-22 20万+
MVVM是的缩写。MVVM是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI 组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象。在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的， 因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。ViewModel。
Vue3与TypeScript的深度结合：技术指南及实践详解
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
03-01 8万+
详解： Vue 3的Composition API可以更好地与TypeScript集成，提供更准确的类型推断和严格的类型约束。setup() {// 类型化的ref// 类型化的计算属性return {state,increment在这个例子中，我们定义了一个CounterState接口来描述组件的状态模型，并使用此接口约束reactive对象。同时，通过明确指定ref和computed的类型，确保整个应用中的数据流具有严格的数据类型。
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
VSCode 开发Vue必备插件
阿杰
05-19 17万+
工欲善其事，必先利其器 以下就是开发Vue必备插件： Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着） EsLint —— 语法纠错 Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个） ...
基于SpringBoot+Vue的学生选课管理系统的毕业设计，Vue+SpringBoot+MybatisPlus+MySQL
03-24
本文主要介绍基于SpringBoot+Vue的学生选课管理系统的源码实现。该系统实现了学生选课、退课、课程管理、学生管理等功能,采用前后端分离的模式,前端使用Vue框架,后端使用SpringBoot框架。 后端使用SpringBoot+...
vue项目demo（asp.net mvc5+vue2.5）
02-13
本项目是asp.net mvc5+vue2.5的项目，花了很长时间做的。 实现的功能如下： 1.不仅有vue的基本功能，而且设计到vue的组件功能。 2.实现了增删改查的功能，而且是一对多的。 3.后台使用了EF进行操作数据库，EF使用的...
CPA 税法 基础班 第4章 税目与税率（2）+计税依据（1）.pdf
10-10
CPA 税法 基础班 第4章 税目与税率（2）+计税依据（1）.pdf
Jhipster7.9.3项目
最新发布
10-10
Jhipster
卡车无人机路径优化，卡车带无人机路径优化 车辆无人机路径优化 代码具有可复制性
10-10
卡车无人机路径优化，卡车带无人机路径优化。 车辆无人机路径优化。 代码具有可复制性
Python中基于DEAP框架的遗传算法实现与OneMax问题求解（包含详细的完整的程序和数据）
10-10
内容概要：本文章详细介绍了遗传算法及其核心概念，并以OneMax问题为例展示了使用Python的DEAP框架实现遗传算法的具体步骤，包括适应度函数、选择、交叉、变异等关键环节。 适用人群：面向具有一定编程基础的开发者和技术研究人员。 使用场景及目标：适用于需要解决优化问题的情景，特别是涉及到大规模搜索空间的应用。本篇文章可以帮助读者更好地理解和应用遗传算法。 其他说明：除了基本实现之外还提出了进一步改进的方向，比如参数优化和其他优化算法相结合的方法，以及实现算法的并行处理，以便应对更加复杂的现实世界难题。
Python基于opencv的车牌识别系统源码-可作为毕业设计
10-10
Python基于opencv的车牌识别系统源码-可作为毕业设计，本资源中的源码都是经过本地编译过可运行的，评审分达到98分，资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、毕业设计、期末大作业和课程设计使用需求，如果有需要的话可以放心下载使用。 Python基于opencv的车牌识别系统源码-可作为毕业设计，本资源中的源码都是经过本地编译过可运行的，评审分达到98分，资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、毕业设计、期末大作业和课程设计使用需求，如果有需要的话可以放心下载使用。Python基于opencv的车牌识别系统源码-可作为毕业设计，本资源中的源码都是经过本地编译过可运行的，评审分达到98分，资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、毕业设计、期末大作业和课程设计使用需求，如果有需要的话可以放心下载使用。Python基于opencv的车牌识别系统源码-可作为毕业设计，本资源中的源码都是经过本地编译过可运行的，评审分达到98分，资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、毕业设计、期末大作
Django+Vue校园个人闲置物品换购平台答辩PPT.pptx
10-10
计算机毕业设计答辩PPT
Java源代码-ssm+vue开发家教平台系统（含数据库、论文等资料文件）.zip
10-10
本项目是一个基于SSM（Spring+SpringMVC+MyBatis）框架和Vue.js前端技术的家教平台系统。该系统旨在为家教和学生提供一个便捷、高效的在线交流和预约平台，涵盖了从用户注册登录、个人信息管理、课程发布与搜索、预约与取消预约、评价反馈等一系列功能。 在后台管理方面，系统提供了管理员对用户信息、课程信息、预约记录等进行管理的功能，确保平台的正常运行和数据的准确性。通过Spring框架的依赖注入和AOP特性，实现了业务逻辑的清晰分离和高效处理；SpringMVC则负责处理前端请求和响应，提供友好的用户界面；MyBatis作为ORM框架，简化了数据库操作，提高了数据访问的效率和安全性。 前端部分采用Vue.js框架，结合Vue Router进行页面路由管理，Axios进行HTTP请求，实现了前后端分离的开发模式。Vue.js的组件化开发和响应式数据绑定特性，使得前端页面更加动态和交互性强，提升了用户体验。 数据库设计采用了MySQL，存储了用户信息、课程信息、预约记录等核心数据。通过合理的数据库表结构和索引设计，保证了系统的高效运行和数据的一致性。 该项目不仅适合计算机相关专业的毕设学生参考和学习，也适合Java学习者进行项目实战练习。通过对该项目的深入理解和二次开发，可以实现更多个性化功能，进一步提升技术水平和实践能力。
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值