怎么利用Vue.js框架实现火车票查询系统

这篇文章给大家分享的是有关怎么利用Vue.js框架实现火车票查询系统的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

Vue。js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js, Vue.js提供了更加简洁,更易于理解的API,使得我们能够快速地上手并使用Vue。js

今天,我就要基于这个库来搭建一个火车票查询系统。首先我们的机器上得有NodeJS环境,并且安装了npm包管理工具。因为vue是跑在节点环境下的,并且我们需要用npm来安装vue。

按照英文提示输入对应的值,我们就创建好了一个项目,接着cd <代码>我的项目> npm安装>

安装完之后你的项目结构是这个样子

& lt; script> 　　export  default  { 　　,名字:& # 39;你好# 39; 　　,data  (), { 　　,return  { 　　,项目:& # 39;& # 39; 　　,fItem: & # 39; & # 39; 　　,sItem: & # 39; & # 39; 　　,} 　　}, 　　,方法:{ 　　,选择:函数(){=,var  that ; 　　 　　,jQuery.ajax ({ 　　,url: & # 39; http://localhost: 3001/ajax/搜索? & # 39; 　　,数据:{ 　　,关键:& # 39;520520测试# 39; 　　,开始:this.fItem, 　　结束:this.sItem 　　}, 　　,类型:& # 39;得到# 39; 　　,数据类型:& # 39;json # 39; 　　,成功:功能(数据){=,,that.items  data.result; 　　,console.log (data.result.length) 　　,} 　　,}); 　　 　　 　　,} 　　,} 　　} 　　& lt;/script>

由于我们在Vue项目中用的是jQuery的Ajax请求方法,所以我们还得在项目中全局引入jQuery,一共需要5个步骤

<强>第一步

在包中。json里加入