Vue学习日记——Day2

一、生命周期

1、概述

1、Vue生命周期分为四个阶段:

创建------挂载------更新------销毁

(1)创建:将用户提供的普通数据转换成响应式数据------响应式处理

(2)挂载:操作DOM渲染模板

(3)更新:修改数据,更新视图(会多次执行)

(4)销毁:销毁实例

2、生命周期函数(钩子函数)

2.1、概念

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

2.2、使用

javascript 复制代码
1、语法
    //创建阶段
    beforeCreate(){
        //响应式数据准备好之后要做什么    
    },
    created(){
        //响应式数据准备好之后要做什么
    },
    //挂载阶段
    beforeMount(){
        //模板渲染之前    
    },
    mount(){
        //模板渲染之后    
    }
    ...

2.3、示例

javascript 复制代码
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:获取焦点
    }
  })

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

javascript 复制代码
      
      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();
      }
    })
    ------------图表功能以后再来实现吧------------

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

1、概念

1、传统开发模式:基于html/css/js,直接引入核心包开发

2、工程化开发:基于构建工具(例如:webpack)的环境中开发Vue

问题:缺乏统一标准

3、Vue CLI脚手架:Vue官方提供的一个全局命令工具,可以帮助我们快速创建一个 开发Vue项目的标准化基础架子,且集成了webpack配置

2、使用步骤

javascript 复制代码
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)
    //要进到项目目录中启动

3、目录认识

javascript 复制代码
1、main.js
    //用于导入APP.vue,基于App.vue创建结构渲染index.html
    render: h => h(app)
    相当于
      render:(createElement) => {
        return createElement(App)
      }

4、组件化开发 & 根组件

1、组件化:将一个页面拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。

好处:便于维护,利于复用

2、组件分为:普通组件和根组件

3、根组件:整个应用最上层的组件,包裹所有普通小组件


4、普通组件的注册使用

javascript 复制代码
1、局部注册:只能在注册的组件内使用
    1.1、创建.vue文件(三个组成部分)
    1.2、在使用的组件内导入并注册
2、全局注册:所有组件内都能使用

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

3、详细步骤
    (1)在components文件夹下新建vue文件,在里面设置组件内容
    (2)在根组件中引入组件
        import 组件名=名 from '组件文件路径'
    (3)为组件命名
        export default {
          components:{
            '组件名'组件,
          }
        }
    (4)使用
        <组件名></组件名>

5、全局组件的注册使用

javascript 复制代码
1、全局注册
    1.1、创建.vue文件
    1.2、main.js中进行全局注册
2、详细步骤
    1、导入文件
        import Hmbutton from './components/HmButton.vue';
    2、为组件命名
        Vue.component(组件名',组件对象)
相关推荐
雯0609~6 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ10 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z15 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴19 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
CV学术叫叫兽22 分钟前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年33 分钟前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
前端百草阁39 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜39 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40440 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish40 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue