从零开始,用Vue来学数据结构与算法 (1-队列)
你好! 今天想简单的介绍一下这系列文章的主要主旨:通过Vue来学习数据结构与算法。本文章的启发点是从尚硅谷的数据结构与算法而来的
第一个要关注的数据结构是队列。他是建立在数组的基础之上。在此文章的结尾,会学会这么做一下的网页应用。
他的作用包括模拟一个排队结构(先进者,先离也),解决信号(比如硬件鼠标的事件/interrupts)排队的规划。
创建vue队列数组
我们先要创造一个网页页面。为了简化复杂性而关注于vue和数据结构,我只用了html + vue.min.js 的导入 来写程序,并没有用webpack和其他的高级前端技术。
在你最喜欢的IDE里先创造一个空的html页面。我用的是HBuilder。然后,导入vue.js 的包. 代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<script> vue 代码。。。</script>
</body>
</html>
在script标签的里面就可以写vue代码了。先创造一个vue实列对象。
var vm = new Vue({
el: "#app",
data:{
//队列的重要数据
arr: new Array(10), //数组队列
front: -1, //队列头指针(出点)
rear: -1, //队列尾指针 (如点)
//其他参数
customerNo: 0,
arrSize: 10
}
})
其次,我们将vue里的data变得可视化。我们首先将
。。。。。还没写完
一个简单的表格是这么创建的:
项目 | Value |
---|---|
电脑 | $1600 |
手机 | $12 |
导管 | $1 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:
TYPE | ASCII | HTML |
---|---|---|
Single backticks | 'Isn't this fun?' | ‘Isn’t this fun?’ |
Quotes | "Isn't this fun?" | “Isn’t this fun?” |
Dashes | -- is en-dash, --- is em-dash | – is en-dash, — is em-dash |
的创作。