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(组件名',组件对象)
相关推荐
别拿曾经看以后~13 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死16 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试19 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人28 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人28 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR34 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香36 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969338 分钟前
前端预览word、excel、ppt
前端·word·excel
数据与后端架构提升之路41 分钟前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
小华同学ai44 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书