zoukankan      html  css  js  c++  java
  • vue-cli 创建项目小结

    原文地址:https://segmentfault.com/a/1190000008010666

    1. 钩子的用法:

    beforecreate : 举个栗子:可以在这加个loading事件 
    created :在这结束loading,还做一些初始化,实现函数自执行 。可发起异步请求,拿到数据,再和DOM一起渲染
    mounted :  挂载元素,获取到DOM节点

    updated : 如果对数据统一处理,在这里写上相应函数

    beforeDestory: 你确认删除XX吗?

    destoryed :当前组件已被删除,清空相关内容

    nextTick : 更新数据后立即操作dom

    2. Vue.nextTick

    在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

    官方还提供了一种写法,vm.$nextTick,用 this 自动绑定到调用它的实例上:

    created() {
        setTimeout(() => {
              this.number = 100
              this.$nextTick(() => {
                console.log('nextTick', document.getElementsByTagName('p')[0])
              })
        },100)
    }

    数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的 DOM 结构的时候,这个操作都应该放进 Vue.nextTick() 的回调函数中。

    3. 路由钩子 

      3.1 全局路由钩子

    const router = new VueRouter({
        mode: 'history',
        base: __dirname,
        routes: routerConfig
    })
    
    router.beforeEach((to, from, next) => {
        document.title = to.meta.title || 'demo'
        if (!to.query.url && from.query.url) {
            to.query.url = from.query.url
        }
        next()
    })
    
    router.afterEach(route => {
      //全局后置钩子,不会接受 next 函数也不会改变导航本身
    })

    3.2 某个路由的钩子

    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            // ...
          },
          beforeLeave: (to, from, next) => {
            // ...
          }
        }
      ]
    })

    3.3 组件内钩子

    你可以在路由组件内直接定义以下路由导航钩子
    beforeRouteEnter
    beforeRouteUpdate (2.2 新增)
    beforeRouteLeave

      路由组件,不等于组件。路由组件:直接定义在router中component处的组件

      官网:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

    4. Vue实例的生命周期

    <div id="app">
         <p>{{ message }}</p>
    </div>
    
    <script type="text/javascript">
        
      var app = new Vue({
          el: '#app',
          data: {
              message : "xuxiao is boy" 
          },
           beforeCreate: function () {
                    console.group('beforeCreate 创建前状态===============》');
                   console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
                   console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
                   console.log("%c%s", "color:red","message: " + this.message)  
            },
            created: function () {
                console.group('created 创建完毕状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el); //undefined  %c 格式化占位符 - css格式化样式
                   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
                   console.log("%c%s", "color:red","message: " + this.message); //已被初始化
            },
            beforeMount: function () {
                console.group('beforeMount 挂载前状态===============》');
                console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
                console.log(this.$el);
                   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
                   console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
            },
            mounted: function () {
                console.group('mounted 挂载结束状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
                console.log(this.$el);    
                   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
                   console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
            },
            beforeUpdate: function () {
                console.group('beforeUpdate 更新前状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);   
                   console.log("%c%s", "color:red","data   : " + this.$data); 
                   console.log("%c%s", "color:red","message: " + this.message); 
            },
            updated: function () {
                console.group('updated 更新完成状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el); 
                   console.log("%c%s", "color:red","data   : " + this.$data); 
                   console.log("%c%s", "color:red","message: " + this.message); 
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);    
                   console.log("%c%s", "color:red","data   : " + this.$data); 
                   console.log("%c%s", "color:red","message: " + this.message); 
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);  
                   console.log("%c%s", "color:red","data   : " + this.$data); 
                   console.log("%c%s", "color:red","message: " + this.message)
            }
        })
    </script>

    控制台输出:

  • 相关阅读:
    C# 实现 Snowflake算法生成唯一性Id
    kafka可视化客户端工具(Kafka Tool)的基本使用(转)
    docker 安装kafka
    Model类代码生成器
    使用docker 部署rabbitmq 镜像
    Vue 增删改查 demo
    git 提交代码到库
    Android ble蓝牙问题
    mac 配置 ssh 到git (Could not resolve hostname github.com, Failed to connect to github.com port 443 Operation timed out)
    okhttp
  • 原文地址:https://www.cnblogs.com/dodocie/p/7757982.html
Copyright © 2011-2022 走看看