Vue学习：13.生命周期综合

0基础如何进入IT行业？

简介：对于没有任何相关背景知识的人来说，如何才能成功进入IT行业？是否有一些特定的方法或技巧可以帮助他们实现这一目标？
方向一：学习路径

1. 明确兴趣和目标：首先确定你对IT领域的兴趣和目标。IT行业非常广泛，包含了软件开发、网络管理、数据分析、人工智能等不同的领域。了解自己的兴趣和目标，可以帮助你选择适合的学习路径。

2. 学习编程基础：无论你选择哪个领域，学习编程是一个重要的起点。掌握一门编程语言（如Python、JavaScript、Java等）和基本的编程概念（如变量、循环、函数等）是必要的。可以通过在线教程、编程学习平台、书籍等方式学习编程基础知识。

3. 选择专业领域：根据自己的兴趣和目标选择IT领域中的一个专业方向，例如前端开发、后端开发、数据分析、网络安全等。针对选定的方向，深入学习相关的技术和知识，并进行实际项目练习。

方向二：技能培养

1. 参加培训课程或学位课程：如果你想获得更系统化的学习经验，可以考虑参加IT培训班或报读相关的学位课程。这些课程通常会提供更深入的知识和实践机会，并且可以获得认可的证书或学位，有助于增加就业竞争力。

2. 做项目和实践：在学习过程中，尽量多做一些项目和实践练习，以实际应用所学知识。可以参与开源项目、自己构建小型应用程序或者参加一些编程比赛，这样可以展示你的技能并积累宝贵的经验。

3. 建立专业网络：参加一些IT行业的活动、交流会议或者加入相关的社群，与从业者建立联系，并从他们那里获取指导和支持。与其他人分享你的学习和项目经验，也可以帮助你扩展专业网络。

4. 持续学习和跟进技术发展：IT行业发展迅速，新技术和工具层出不穷。要保持竞争力，需要持续学习和跟进最新的技术趋势。关注行业动态、阅读技术文章、参加在线课程或研讨会，都是不断学习的好方法。

最后祝愿大家能够学有所成，学有所用！

那么好，咱们回归正传。这一节将实践一个综合案例，结合了前面所学的知识。

实例：记账本

实现功能：

1. 基本渲染：基于后端数据动态渲染；

2. 添加功能：通过表单元素向后端添加数据；

3. 删除功能：通过删除按钮动态删除后端数据；

4. 饼图渲染：基于渲染数据使用饼图可视化。

5. 生命周期钩子函数灵活运用

思路：

这一个案例的前提要求便是获取并修改后端数据，这一点是最为重要的！

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

支持原生 TypeScript

请求响应拦截

支持 node.js

从浏览器中创建 XMLHttpRequest

支持 Promise API....

导入：

//使用npm
npm install axios
//使用yarn
yarn add axios
//或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

发起GET请求：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

发起POST请求：

axios.post('https://api.example.com/submit', { username: 'john', password: 'secret' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

您还可以在请求中设置其他参数，如请求头、请求参数等。例如：

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer token'
  },
  params: {
    page: 1,
    limit: 10
  }
})

饼图可视化：

了解了axios如何请求和修改后端数据，咱们来学习下如何进行饼图可视化。

在Vue.js中渲染饼图通常使用一些流行的数据可视化库，比如Chart.js或者ECharts。本案例中，我们使用了ECharts来渲染。

ECharts是一个使用 JavaScript 实现的开源可视化库，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。ECharts 提供了丰富的图表类型和交互能力，使用户能够通过简单的配置生成各种各样的图表，包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等，可高度个性化定制的数据可视化图表。

导入：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

使用：

在绘图前我们需要为Echarts准备一个具备宽高的DOM容器，然后通过echarts.init方法初始化一个Echarts实例并通过setOption方法生成一个简单的图型，下面是完整代码：

<template>
  <div ref="pieChart" style="width: 600px; height: 400px;"></div>
</template>

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
export default {
  mounted() {
    this.renderPieChart();
  },
  methods: {
    renderPieChart() {
      const chartDom = this.$refs.pieChart;
      const myChart = echarts.init(chartDom);
      const option = {
        series: [{
          type: 'pie',
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ]
        }]
      };
      myChart.setOption(option);
    }
  }
};
</script>

代码：

html：

<div id="app">
        <div class="top">
            <input v-model="name" placeholder="消费名称">
            <input v-model="price" placeholder="消费金额">
            <button @click="add()">添加条目</button>
        </div>
        <div class="table">
            <table>
                <header>
                    <tr>
                        <th>编号</th>
                        <th>消费名称</th>
                        <th>消费金额</th>
                        <th>操作</th>
                    </tr>
                </header>
                <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><button @click="del(item.id)">删除</button></td>
                    </tr>
                </tbody>
                <footer>
                    <tr>
                        <td colspan="4" style="text-align: left;">消费总计：{{ total.toFixed(2) }}</td>
                    </tr>
                </footer>
            </table>
        </div>
        <!-- 准备好具备大小的DOM -->
        <div id="chart"></div>
</div>

js：

<script>
        const app = new Vue({
            el: '#app',
            data: {
                list:[],
                name:'',
                price:''
            },
            computed: {
                total(){
                    return this.list.reduce((sum,item) => sum + item.price,0)
                }
            },
            created(){
                // 使用添加/删除功能后，需要重新渲染，将下列封装为函数更为高效
                // let res = await axios.get('https://xxx',{
                //     params:{
                //         creator: '李世民'
                //     }
                // })
                // // console.log(res)
                // this.list = res.data.data
                this.addList()
            },
            mounted(){
                // 创建echart实例
               this.myChart = echarts.init(document.querySelector('#chart'))
                //配置数据
               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)'
                            }
                        }
                    }]
                })
            },
            methods: {
                async addList(){
                    // 发送请求，获取数据
                    let res = await axios.get('https://xxx',{
                    params:{
                        creator: '小白'
                    }
                    })
                    this.list = res.data.data
                    // 获取数据后，重新配置饼图的数据，更新图表
                    this.myChart.setOption({
                        // 仅需要配置数据项
                        series: [{
                            data: this.list.map(item => ({value: item.price, name: item.name})),
                        }]
                    })
                },
                async add(){
                    // 发送请求，修改数据
                    let res = await axios.post('https://xxx',{
                        creator: '小白',
                        name: this.name,
                        price: this.price
                    })
                    console.log(res)
                    // 重新渲染页面
                    this.addList()
                    this.name = ''
                    this.price = ''
                },
                async del(id){
                    // 发送请求，根据ID修改数据
                    let res = await axios.delete(`https://xxx/${id}`)
                    console.log(id)
                    // 重新渲染页面
                    this.addList()
                }
            }
        })
</script>

css：

<style>
        table{
            width: 500px;
            margin-top: 10px;
            border-collapse: collapse;
        }
        th, td{
            height: 30px;
            text-align: center;
            line-height: 20px;
            border: 1px solid black;
        }
        #chart{
            width: 500px;
            height: 400px;
            margin-top: 20px;
            border: 1px solid black;
        }
        .red{
            color: red;
        }
</style>

效果：

注意：

案例中还有很多需要注意的点，比如： 应该是在created()里使用axios获取后端数据然后渲染，但是使用添加/删除功能后，还需要重新渲染，但是这已经不属于created()钩子范围内，所以将axios的get方法封装为函数使用更为高效。