Vue从零开发单页应用程序项目
所谓SPA(Single Page Application),就是单页面应用的意思。
vue的亮点就是我们只需要关注数据的变化,下面演示一下从零开始创建一个独立项目,并且能自定义路由,提交表单。
一、命令行创建项目
使用vue-cli
安装
npm install vue-cli -g
界面创建项目
安装完成后运行
vue ui
打开http://localhost:8000,会看到如下界面
*创建项目
下一步,我选择了默认
创建完后目录如下
也可以直接用命令行创建
vue create qionghe
启动项目,更多请查看cli使用文档
我们进入目录chenqionghe,执行npm run serve
cd chenqionghe
npm run serve
打开界面如下http://localhost:8080/
创建webpack项目
安装
npm i -g @vue/cli-init
创建项目
vue init webpack chenqionghe
一路回车
安装完成目录如下
启动
npm run dev
打开http://localhost:8080/#/如下
二、自定义路由
关于路由的使用可以参考查看:router文档
绝对路由
新建路由文件Cqh.vue
router/index.js引入这个新路由,并指定一个自己的路由
访问:http://localhost:8080/#/cqh,看到如下结果
这样我们就可以自定义路由了
带参数的路由
比如在后面加上:id,如下
使用{{ $route.params.键名}}获取,如下
运行结果
可以看到,id已经能正常的获取和渲染了
嵌套路由
就是一个分组路由的概念,我们把component/Cqh.vue修改一下
<template>
<div class="hello">
<router-link to="/cqh/testA">TestA</router-link>
<router-link to="/cqh/testB">TestB</router-link>
<router-view/>
</div>
</template>
这个router-link就是使用路由的方式,这里我加了两上新路由/cqh/testA,/cqh/testB
这个<router-view/>
就是子路由要渲染的地方,再添加一个对应的子路由,如下
访问http://localhost:8080/#/cqh,如下
分别点击TestA和TestB,
这里的页面切换非常平常,体验相当好!
三、表单交互示例
有路由了,咱们后端关注的还是数据交互,少不了表单,下面来个简单的示例TestForm,代码如下
<template>
<div class="hello">
<h1>{{ name }}</h1>
名字:<input type="text" v-model="form.name"/><br>
年龄:<input type="text" v-model="form.age"/><br>
性别:<input type="text" v-model="form.sex"/><br>
<button @click="mySubmit">提交</button>
<p>{{form.msg}}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: '雪山飞猪',
form: {},
}
},
methods: {
mySubmit() {
let msg = "您提交的数据是:" + JSON.stringify(this.form);
this.$set(this.form, 'msg', msg)
}
}
}
</script>
运行如下
再提交一下数据,测试一下
可以看到已经能拿到表单的数据了,有了表单数据,就可以自行请求接口了。
正式项目可以考虑使用ElementUI来创建好看一点的页面
vue的使用也太简单了吧,太感人了,只需要关注数据的变化!giao~
关注我】。(●'◡'●)
如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的【因为,我的写作热情也离不开您的肯定与支持,感谢您的阅读,我是【Jack_孟】!
本文来自博客园,作者:jack_Meng,转载请注明原文链接:https://www.cnblogs.com/mq0036/p/14542101.html
【免责声明】本文来自源于网络,如涉及版权或侵权问题,请及时联系我们,我们将第一时间删除或更改!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
2016-03-16 选择驾校经验