第二次个人技能测试-VUE练习

第二次个人技能测试-VUE练习

题目要求是这样滴

我做的是这样滴

四舍五入可以算是有点相似（吧

vue和原生html的一大区别是：vue是由一个个组件拼接而成的，例如：

每个组件可以单独写在一个vue文件中，只需在App.vue文件中引用每个组件即可，这样大大增强了组件的复用性。

每个组件应该怎么写呢？其实基本上就是在template中写html。举个例子（组件1）：

<template>
<div id="first_box">
  <hr>
  <div id="input_part">
    <input id="input" type="text">
  </div>
  <div id="search_button">
    <button id="button">查找</button>
  </div>
  <div id="add_button">
    <button id="add">＋新建角色</button>
  </div>
</div>
</template>

另外vue相较于html新加了许多新功能，例如v-for、v-if等

我是使用webstorm来 创建项目的，总体感觉使用起来还是挺简单的，没太多想写的了。

源码链接

css文件复制到assets里，除了App.vue以外的vue文件复制到components里，App.vue替代原有的App.vue。只需要将文件复制到相应的位置即可。