使用Vue创建计算器

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

学习Vue有一段时间了,但真正的实战并不是很多。师父告诉我,要学好就得多动手。为了能把动手写的案例有一个集中的地方放置,我在Github上创建了一个仓库VueStudy。这里将会不断的添加一些练习过的案例,如果你感兴趣的话,欢迎提交你写过的案例。

今天我们来写一个案例:使用Vue创建计算器Github有对应的示例代码。如果你想在本地运行,看到对应的效果,可以把这个项目下载到你的本地,然后进入对应的目录,执行下面的命令:

npm i
npm run dev

然后在浏览器地址中输入http://localhost:8080就能看到了。接下来我们来看看怎么用Vue创建这个计算器。

今天的目标

今天的目标,就是使用Vue做一个计算器,如下图所示:

使用Vue创建计算器

这个计算器我们有两个版本,一个简单版本:

使用Vue创建计算器

另一个是高级版本:

使用Vue创建计算器

当我们使用Vue把计算器做好之后,可以帮你执行一些任务。而通过这个教程,可以学到Vue一些相关知识:

  • 处理用户输入
  • 使用模板语法将数据渲染到DOM
  • 熟悉处理数据的基本指令
  • 创建Vue实例

一些准备工作

虽然说我们这里是使用Vue来创建一个计算器,但始终还是脱离不开JavaScript方面的知识。也就是说,有关于计算器功能方面的实现,还是需要通过JavaScript来实现。如果你和我一样,JavaScript知识比较单薄的话,建议先补充一些有关这方面的知识。个人建议你可以看看@dunizb写的一个计算器,或者学习一下math.js库中的一些知识。接下来的内容假设你已经对这方面有所了解,可以使用JavaScript完成计算器相关的知识。

回到Vue的世界中来。使用Vue创建计算器,也相当于我们开始一个新项目,那么在Vue中,创建这样的项目有多种方式。或者说创建我们的计算器有多种方式。比如前面《Vue的运行环境》文中提到的。可以在一个单独的文件中使用Vue,也可以在在线的Codepen中创建。不过我们今天采用的是一种新的方式,采用Vue官方提供的项目构建工程Vue CLI

要正常使用Vue CLI得先确保你的环境中已经安装了Node和NPM。然后在你的命令终端执行:

npm i vue-cli -g

也就是在本地电脑中全局安装Vue CLI。假设你按上面的命令已成功安装好了,那么接下来通过其构建我们需要的Vue项目。

进入你的工作环境,然后执行:

vue init webpack vue-calculator

这样我们就创建了vue-calculator项目,然后进入这个项目,安装项目所需的依赖关系:

cd vue-calculator
npm i

这样在你的本地,可以看到项目对应的目录结构:

使用Vue创建计算器

而且项目所需要的依赖关系都在package.json文件中。接下来运行:

npm run dev

在浏览器中运行http://localhost:8080/就可以浏览项目的效果。

Vue项目

通过Vue CLI构建的Vue项目,其入口文件是main.js。在这个文件中引入Vue和创建Vue实例:

import Vue from 'vue'
import App from './App'

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
})

上面的代码是引入了vue和一个App组件,然后通过下面的方式创建了一个Vue实例,然后将Vue控制的部分视图挂载在el属性上进行跟踪。而el属性值对应的是index.html文件中的div#app元素:

<div id="app>
    <!-- HTML都将会塞到这里 -->
</div>

创建Vue组件

我们的目标是创建一个计算器,那么我们把这个计算器称作Vue的一个组件。所以我们首要的条件就是先创建一个组件,我们这里一个叫calculator组件。在项目中,进入/src/components目录中创建一个calculator.vue

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/build-a-scientific-calculator-with-vuejs.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部