Vue学习日记——Day2

一、生命周期

1、概述

1、Vue生命周期分为四个阶段：
创建——挂载——更新——销毁
(1)创建：将用户提供的普通数据转换成响应式数据——响应式处理
(2)挂载：操作DOM渲染模板
(3)更新：修改数据，更新视图（会多次执行）
(4)销毁：销毁实例

2、生命周期函数（钩子函数）

2.1、概念

1、在Vue生命周期中，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定阶段运行自己的代码

2.2、使用

1、语法
    //创建阶段
    beforeCreate(){
        //响应式数据准备好之后要做什么    
    },
    created(){
        //响应式数据准备好之后要做什么
    },
    //挂载阶段
    beforeMount(){
        //模板渲染之前    
    },
    mount(){
        //模板渲染之后    
    }
    ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.3、示例

1、created
    const app = new Vue({
      el: '#app',
      data: {
        list:[],
      },
      async created(){
        //当响应式数据准备好了后，就直接将数据显示出来
        const res = await axios.get('http://hmajax.itheima.net/api/news');
        console.log(res.data.data);
        this.list = res.data.data;
      },
    })
2、mounted
  const app = new Vue({
    el: '#app',
    data: {
      words: ''
    },
    mounted(){
      //当dom渲染完成后，直接让输入框获取焦点
      document.querySelector('#inp').focus()
      //.focus：获取焦点
    }
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3、小黑记账清单——案例

      
      const app = new Vue({
        el: '#app',
        data: {
          list: [],
          name:'',
          price:'',
        },
        computed:{
          sum(){
            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:'谷歌',
                }
              })
              console.log(res.data.data);
              this.list = res.data.data;
          },
          async delList(id){
            const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`);
            console.log(res);
            this.getList();
          },
          async add(){
            const res = await axios.post('https://applet-base-api-t.itheima.net/bill',{
                //post不需要加data之类的，只有用get或者delete时需要
                creator:'谷歌',
                name:this.name,
                price: this.price,
            })
            //console.log(res);
            this.getList();
          }
        },
        async created(){
        //运用生命周期钩子，使一启动页面就获取数据
            this.getList();
      }
    })
    ————图表功能以后再来实现吧————
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

二、工程化开发和Vue CLI脚手架

1、概念

1、传统开发模式：基于html/css/js，直接引入核心包开发
2、工程化开发：基于构建工具（例如：webpack）的环境中开发Vue
问题：缺乏统一标准
3、Vue CLI脚手架：Vue官方提供的一个全局命令工具，可以帮助我们快速创建一个 开发Vue项目的标准化基础架子，且集成了webpack配置

2、使用步骤

1、全局安装：yarn global add@vue/cli 或者 npm i @vue/cli -g
2、查看Vue版本：vue --version
3、创建项目架子：vue create project-name(项目名称)
    //进入到要创建项目的目录中，右键空白处，选择在终端中打开，然后输入命令创建
4、启动项目：yarn serve 或 npm run serve(找package.json)
    //要进到项目目录中启动
1
2
3
4
5
6

3、目录认识

1、main.js
    //用于导入APP.vue，基于App.vue创建结构渲染index.html
    render: h => h(app)
    相当于
      render:(createElement) => {
        return createElement(App)
      }
1
2
3
4
5
6
7

4、组件化开发 & 根组件

1、组件化：将一个页面拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
好处：便于维护，利于复用
2、组件分为：普通组件和根组件
3、根组件：整个应用最上层的组件，包裹所有普通小组件

4、普通组件的注册使用

1、局部注册：只能在注册的组件内使用
    1.1、创建.vue文件（三个组成部分）
    1.2、在使用的组件内导入并注册
2、全局注册：所有组件内都能使用

使用：当成html标签使用'<组件名><组件名>'

3、详细步骤
    (1)在components文件夹下新建vue文件，在里面设置组件内容
    (2)在根组件中引入组件
        import 组件名=名 from '组件文件路径'
    (3)为组件命名
        export default {
          components:{
            '组件名'组件,
          }
        }
    (4)使用
        <组件名></组件名>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5、全局组件的注册使用

1、全局注册
    1.1、创建.vue文件
    1.2、main.js中进行全局注册
2、详细步骤
    1、导入文件
        import Hmbutton from './components/HmButton.vue';
    2、为组件命名
        Vue.component(组件名',组件对象)
1
2
3
4
5
6
7
8