vue.js 构建项目_使用Vue.js构建科学计算器

最新推荐文章于 2024-04-18 21:58:44 发布

culiu9261

最新推荐文章于 2024-04-18 21:58:44 发布

阅读量475

点赞数

文章标签： vue java python html js ViewUI

原文链接：https://scotch.io/tutorials/build-a-scientific-calculator-with-vuejs

版权

本文介绍了如何使用Vue.js构建一个科学计算器。从创建Vue实例开始，逐步讲解了如何处理用户输入，渲染数据，熟悉基本的Vue指令，创建计算功能，以及在基本模式和高级模式之间切换。文章提供了一个完整的预览，并给出了实际操作的步骤。

摘要由CSDN通过智能技术生成

vue.js 构建项目

Vue gives the everyday software developer a certain flexibility and seamless experience that may be hard to come across when using other frameworks to build applications.

Vue为日常软件开发人员提供了一定的灵活性和无缝的体验，而使用其他框架来构建应用程序时可能很难遇到这种体验。

Unlike other frameworks, Vue’s Model-View-View-Model (MVVM) architectural pattern makes it extremely easy and fun to work with.

与其他框架不同， Vue的“模型-视图-视图-模型 （MVVM）”架构模式使其使用起来极为简单和有趣。

In this article, we’re going to build a scientific calculator with Vue. When we are done, you should be able to perform routine tasks such as:

在本文中，我们将使用Vue构建科学的计算器。完成后，您应该能够执行例行任务，例如：

Handling user input
处理用户输入
Rendering data to the DOM using template syntax
使用模板语法将数据渲染到DOM
Become familiar with basic Vue directives used for handling data
熟悉用于处理数据的基本Vue指令
Creating Vue instances
创建Vue实例

Build an Online Shop with Vue 使用Vue建立在线商店

Below is a basic preview of the app we’ll be building:

以下是我们将要构建的应用程序的基本预览：

使用Vue.js启动新项目 ( Starting a New Project with Vue.js )

If you’re using Vue for the first time, you should install the Vue CLI globally via npm:

如果您是第一次使用Vue，则应通过npm全局安装Vue CLI：

# install globally
npm install -g vue-cli

Another way of integrating Vue to your application is via its CLI:

将Vue集成到您的应用程序的另一种方法是通过其CLI：

# create a new project using the "webpack" template
vue init webpack my-project

# install dependencies
cd my-project
npm install

# Start the app
npm run dev

One other way of using Vue is by including it directly in the browser via a script tag:

使用Vue的另一种方法是通过脚本标记将其直接包含在浏览器中：

< script > https://unpkg.com/vue </ script >

This method is recommended for beginners and is particularly handy when we are building lightweight, front end applications for easier rendering and faster loading speed. This method is what we will be using in our examples:

建议初学者使用此方法，当我们构建轻量级的前端应用程序时，此方法特别方便，可简化渲染并加快加载速度。在示例中将使用此方法：

< html >
  < head > </ head >
  < body >

    <!-- App View here -->

    < script src = " https://unpkg.com/vue " > </ script >
    < script >
      // Vue app here
      var app = new Vue({/* Coming soon */})
    </ script >
  </ body >
</ html >