整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天，我们给大家带来的是一个基于vue3的开源项目：电动车电池范围计算器。这是一个workshop，通过完成该项目，我们可以直观的感受到vue3的强大，了解一些项目最佳实践。
项目的背景是当前备受关注的电动车。经历了近6年的发展，电动车在市场上得到大规模普及，从“大玩具”变为未来交通的基石。项目以电动车行业最受关注的续航能力为例，使用vue3技术构建一个电池范围计算器，来展示用Vue.js制作仪表盘的开发方式和体验。
在开始阅读本教程之前，我们需要做以下准备，搭建好项目环境：
环境准备完毕，我们可以读取README.md了解项目的概况。
与常见的开发项目不同，这个项目最有意思的地方在于，它不是一个最终的应用程序，而是一个存在缺陷的应用程序，即workshop。我们需要对它进行修复完善并进一步开发，并在这个过程中掌握vue开发技巧。
在正式开始工作之前，让我们先一起来了解一下这个项目的结构。
workshop-reactjs-vuejs/vuejs-app/src是workshop的源码目录，结构如下图所示。main.js是应用程序的入口点，App.vue是应用程序的输入组件。
（项目源代码结构）
相比于vue2，Vue3应用程序的创建方式已更改，需要导入新的createApp（）方法，而不是使用new Vue（），然后调用这个方法来传递App.vue组件（入口组件）。
紧接着我们将在createApp上调用mount方法，并传递一个CSS选择器标识mount元素，这个过程和在Vue 2中操作$ mount示例方法一样
（项目入口）
（app.vue组件）
App.vue是应用程序的入口组件，由以下部分组成。
在上图中，name property 表示组件的名称（名称为“ app”）。该组件使用的子组件在中定义components-property。在这里，TeslaBattery是App.vue组件的子组件，后面会介绍到。要使用TeslaBattery组件，必须首先将其导入（import Tesla-Battery from "..." ）
在中data()-function，我们可以定义和初始化状态变量，例如导入的徽标和greeting属性。要呈现徽标和问候语，必须在模板中定义它们。最终必须（通过export default { } ）导出整个组件，以便可以将其再次导入到其他组件和main.js中。
模板负责定义组件生成的输出。Vue.js 使用基于HTML的模板语法可以使数据通过data ()-function进行绑定并轻松呈现。数据绑定的最简单形式是使用Mustache语法（双括号）的文本插值：{{greeting}}
在上面的示例中，{{greeting}} 替换Hello Tesla !!! 成为和data()-function相关的值。在此问候语上方，用img-tag来呈现徽标。要将徽标分配给img src-attribute，用属性进行绑定。在此应用程序中经常使用属性绑定，可以使用： v-bind <img :src="logo"<img v-bind:src="logo"> 进行绑定
最后，使用<tesla battery>-tag来实例化TeslaBattery组件并进行渲染。对于此标签必须使用Kebab case，这一部分我们会在后面详细讨论
在Vue中，我们使用SCSS文件对整个应用进行样式设置，这里不展开介绍。
介绍完基础的项目架构，我们来看项目的UI部分是怎么运行的。该应用程序包含一个入口应用程序组件，该组件包含一个子组件TeslaBattery。TeslaBattery子组件包含以下二级子组件：
这些组件最终构成了用户看到的仪表盘。
（最终展示的仪表盘）
以下代码块清晰的显示了组件的层级关系，项目中同时用到了Container组件和Presentation组件。“ Tesla电池组件”是容器组件。基础子组件是Presentation组件。这样可将组件分为两类，有利于我们在开发过程中重复使用。
（组件层级）
两种组件的特点对比如下：
Container组件
Presentation组件
（组件树）
此划分方法具有以下优点，值得推荐。
在下图中可以看出，我们使用props，将stats-data（源自stats（）函数）从TeslaBattery组件传递到TeslaStats组件，链接起上下级组件。
（使用props传递数据）
具体操作上，你需要在TeslaBattery组件模板中使用v-bind或冒号操作符。
（传递stats数据）
该组件在脚本部分包含一个props-property，用于接收stats-data。该属性的数据类型为数组。在本例中，我们使用来自Vue.js的v-for指令来遍历统计信息，按照特定顺序进行展示。
我们可以在filters-property中定义自定义过滤器。例如，过滤器“lowercase”，可以用小写呈现模型名。在项目中，我们自定义了一个过滤器，把英里转换为公里。
在Vue 3中，我们无法再使用filters-property。为了开发“把英里转换为公里”的过滤器，我们需要使用Compostion API。Compostion API是基于函数的API，通常用于组合与重用各组件的逻辑。
首先，我们需要创建一个JavaScript文件composable.js，export出我们需要使用的数据和方法如，“把英里转换为公里”的过滤器。
（封装过滤器的代码）
然后，我们将composable.js导入到需要使用该过滤器的组件中，就可以在其中使用这些过滤器了。
（导入并启用过滤器的代码）
在Vue3中，我们可以使用各组件的模板中的v-model指令实现双向数据绑定。
在这个项目中， TeslaCounter组件需要将速度（speed）绑定到TeslaBattery组件。
（组件间的双向数据绑定）
我们在TeslaBattery组件模板中使用v-model指令将speed属性（车速）绑定到TeslaCounter组件。
（使用v-model传递数据的代码）
作为接收组件，TeslaCounter则需要在props中接受modelValue属性。此外，还需要emit出@update:modelValue事件，用于通知数据变更。emit操作在increment()方法中触发，在速度发生变化时，将最新的数据“推送”给其绑定的TeslaBattery组件。
（emit事件通知的代码）
以上就是开源项目电动车电池范围计算器中源代码的核心介绍，项目中还有更多优秀的实践值得大家学习和参考。
除此之外，项目中还添加了一个PPT文件，详细说明了诸如通过v-model指令进行双向数据绑定、使用按钮向事件分配事件以及创建其他组件之类的做法。
后续我们还会为大家推荐更多有意思的开源项目，一起了解vue等前端技术的发展与实战。
阅读拓展：如果您已经很熟悉Node.js的用法，如果对内嵌Excel有兴趣，可以了解一下SpreadJS等相关控件，这些内容也可以在开发中为开发人员提供很大助力，欢迎点击下方“了解更多”。
作简单计算器——想要成为合格的java工程师，就别犯懒！
制作简单计算器——想要成为合格的java工程师，就别犯懒！
用到的技术：HTML + JavaScript;主要以javascript为主。
制作简单计算器——想要成为合格的java工程师，就别犯懒！
实现简单的加减法计算；
操作步骤：
首先制作一个html页面；代码如下
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>计算器</title>
</head>
<body>
<divid="keys" onclick="fun()">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button><br>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button><br>
<button>C</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<button>=</button> </div>
<textarea id="sc"style="resize:none;width:200px; height:50px;" readonly></textarea>
</body>
</html>
利用javascript实现二级菜单效果；代码如下
<script type="text/javascript">
varsc= document.getElementById("sc");
varkeys = document.getElementById("keys");
functionfun(){
var e=e||window.event;//找到button的内容
var btnTxt=e.target.innerHTML //该元素的值
if(e.target.nodeName=="BUTTON"){//判断是否是点在了button上
try{
switch(btnTxt){
case"=":
//alert("计算") ;
sc.value=eval(sc.value)
break;
case"C":
//alert("清空")
sc.value=""
break;
default:
// alert("拼字串")
sc.value+=btnTxt
}//switch end
}catch(e){//报错语
sc.value="您的输入有误"
}
}
</script>
知识要点剖析：如何理解var e=e||window.event的？
解答：为了实现多种浏览器兼容；
整个代码是这样的vare=event?event||window.event;
意思是：如果存在event,那么var e=event;而如果不存在event，那么var e=window.event
eval(String)方法：
是通过计算 string 得到的值（如果有的话）。
为世界上最大和最受信任的软件开发人员社区的 Stack Overflow 团队今日推出了一款薪资计算器Salary Calculator，该工具可以帮助开发社区的成员和员工根据地区、工作经验、水平和教育程度等来计算典型薪酬，该工具将根据各类因素给出直观图形化的显示，从而来衡量自己的薪资是否达到自己工作的一般水平，保障自己的利益，并且让开发人员进行一般的财务处理工作。
Stack Overflow是一个程序设计领域的技术问答网站，隶属Stack Exchange Network。直至2013年8月，Stack Overflow有超过1,900,000名注册用户和超过5,500,000个问题，其中最常见的主题有C#、Java、JavaScript、PHP、Android、jQuery、C++和Python。民间有种说法，只有高端的程序员才会直接上stackoverflow提问。
网站允许注册用户提出或回答问题，还可对已有问题或答案加分、扣分或进行修改，条件是用户达到一定的“声望值”。“声望值”就是用户进行网站交互时能获取的分数，例如，用户A回答了一个问题，用户B对用户A的解答给予了“加分”，用户A就会因而获得10点声望值。当声望值达到某个程度，用户的权限就会增加，如声望值超过50点就可以评论答案，另外网站也会根据用户的贡献颁发徽章。用户创建的内容都使用知识共享协议授权。
从2011年以来，Stack Overflow开始主动向开发人员调研他们最喜欢的技术，编码习惯和工作偏好以及他们如何学习，分享和升级。为帮助开发人员找到更好的工作、了解企业，同时提供良好的用户体验，顺势为企业对接技术人才。
输入以下元素即可衡量自己的薪资水平：工作 地点、教育程度、职业编程经历、开发人员类型、擅长编程语言/技术
Stack Overflow 负责人表示，坚持不懈与我们的社区成员真诚沟通只有益处没有坏处，这包括像财务处理这类日常生活中的棘手问题。这就是为什么创建了 Stack Overflow 薪资计算器这样的小工具来使衡量薪资透明化。
作时代的见证者——点击关注IT战略家，感谢支持！
*请认真填写需求信息，我们会在24小时内与您取得联系。
