Web前端最全vue 记账清单_vue 的账单样式，最新高频web前端面试题目分享大全

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

      </form>

      <table class="table table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>消费名称</th>
            <th>消费价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="item.id">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td :class="{red: item.price >= 500}">{{item.price.toFixed(2)}}</td>
            <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">消费总计： {{totalPrice.toFixed(2)}}</td>
          </tr>
        </tfoot>
      </table>
    </div>
    
    <!-- 右侧图表 -->
    <div class="echarts-box" id="main"></div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  /**
   * 接口文档地址：
   * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
   * 
   * 功能需求：
   * 1. 基本渲染
   * 2. 添加功能
   * 3. 删除功能
   * 4. 饼图渲染
   */
  const app = new Vue({
    el: '#app',
    data: {
      list:[],
      name:'',
      price:''
    },
    created() {
      this.getlist()
    },
    mounted() {
      this.mychart = echarts.init(document.querySelector('#main'))
      this.mychart.setOption({
        title: {
          text: '消费账单列表',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '消费账单',
            type: 'pie',
            radius: '50%',
            data: [
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    computed:{
      totalPrice(){
        return this.list.reduce((sum,item) => sum+item.price , 0 )
      }
    },
    methods: {
      async getlist(){
        const res = await axios.get("https://applet-base-api-t.itheima.net/bill",{
        params:{
          creator:'guiji'
        }
      })
      this.list = res.data.data
      this.mychart.setOption({
        series: [
          {
            data: this.list.map(item => ({value:item.price , name:item.name}))
          }
        ]
      })
      },
      async add(){
        if(!this.name){
          alert('请输入消费名称')
          return
        }
        if(typeof this.price !== "number"){
          alert('请输入正确的消费价格')
          return
        }
        await axios.post("https://applet-base-api-t.itheima.net/bill",{
          creator:'guiji',
          name:this.name,
          price:this.price
        })
        this.getlist()
        this.name=''
        this.price=''
      },
      async del(id){
        axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
        this.getlist()
      }
    },
  })
</script>

### 总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://img-blog.csdnimg.cn/img_convert/ef336fc6eeb8c79b1e96f97e168df90a.png)

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://img-blog.csdnimg.cn/img_convert/d3ac9c078e3063bbc4ddc4fe929112c8.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://img-blog.csdnimg.cn/img_convert/04656be82d9b13ba32131bdc8ec55836.png)