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(组件名',组件对象)
相关推荐
晓风伴月2 分钟前
Css:overflow: hidden截断条件‌及如何避免截断
前端·css·overflow截断条件
最新资讯动态5 分钟前
使用“一次开发,多端部署”,实现Pura X阔折叠的全新设计
前端
余多多_zZ16 分钟前
鸿蒙学习手册(HarmonyOSNext_API16)_应用开发UI设计:Swiper
学习·ui·华为·harmonyos·鸿蒙系统
爱泡脚的鸡腿20 分钟前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ35 分钟前
前端处理pdf文件流,展示pdf
前端·pdf
智践行37 分钟前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态43 分钟前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
淬渊阁44 分钟前
汇编学习之《扩展指令指针寄存器》
汇编·学习
lalapanda1 小时前
UE5学习记录part12
学习·ue5
lvbb661 小时前
框架修改思路
前端·javascript·vue.js