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~

 

 

出处:https://www.cnblogs.com/chenqionghe/p/14218046.html

posted on   jack_Meng  阅读(914)  评论(0编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题: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 选择驾校经验

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

支付宝打赏

主题色彩