精华内容
下载资源
问答
  • vue项目访问顺序

    万次阅读 2019-08-20 16:53:12
    1.vue项目访问顺序 访问index.html后,main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。 2.mian.js(项目开始展示内容) import Vue from 'vue' import App from ...

    1.vue项目访问顺序

    访问index.html后,main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。

    2.main.js(项目开始展示内容)

    import Vue from 'vue'
    import App from './App'  //App.vue
    import router from './router'//前3个导入自带的vue
    
    import MuseUI from 'muse-ui'
    import 'common/style/muse-ui.css'
    import fastclick from 'fastclick'//导入第三方封装好的vue
    fastclick.attach(document.body)
    
    Vue.use(MuseUI)
    Vue.use(materialicons)//使用第三方封装好的vue
    
    //app这个vue的实例会接管app这个
    // dom里面的内容,会分析<div id="app"> </div>这个dom里面所有的内容,并显示出来
    new Vue({
      el: '#app',  //创建的vue实例负责处理的区域
      router, //路由处理vue页面的跳转,相当于路径导航
      render: h => h(App)
    })
    template:‘<app/>’,components:{App}配合使用与单独使用render:h=>h(App)会达到同样的效果
    前者识别<template>标签,后者直接解析template下的id为app的div(忽略template的存在)
    
    

    3.App.vue

    <template>
      <div id="app">   //  vue实例渲染出的内容挂载的目标
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      data () {
        return {
        }
      }
    }
    </script>
    
    <style lang="less">
    </style>
    

    4.index.js(项目开始展示内容)

    import Vue from 'vue'
    import Router from 'vue-router'//导入内部vue文件
    import Auth from '@/views/Auth'
    import FuelFill from '@/views/FuelFill'//导入自定义vue文件,@代表src目录
    
    Vue.use(Router)//vue使用Router路由
    
    export default new Router({  
      routes: [
        {
          path: '/',   //打开浏览器的第一个页面的路径,根路径
          redirect: '/auth'//将根路径重定向到/auth路径下
        },
        {
          path: '/auth',
          name: 'Auth',
          component: Auth //路径/auth的页面加载Auth组件,这里路径是指浏览器地址路径
        },
        {
          path: '/fuelfill',
          name: 'FuelFill',
          component: FuelFill //路径/FuelFill的页面加载Auth组件,这里路径是指浏览器地址路径
        }
      ]
    })
    //例如:http://localhost:8080/#/auth   这个界面就是Auth组件布局的        
      http://localhost:8080/#/fuelfill    这个界面就是fuelfill组件布局
    

    5.Auth.vue

    //vue组件有3部分组成
    // 1.模板:布局页面框架(html)
    <template>
      <div>
        <mu-container>
          <mu-dialog width="85%" :open.sync="openSimple" :overlay-close="false">
    
            <span style="text-align: center">
              <img class="authImg" :src="titleImg"/>
              <p class="authTitle">授权</p>
              <p class="authSubTitle1">已为您绑定手机号:</p>
              <p class="authSubTitle2">未绑定手机号</p>
            </span>
            <mu-button slot="actions" :flat="false" color="#43b79c" l @click="fuelFilling">我知道了</mu-button>
    
          </mu-dialog>
        </mu-container>
    
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          openSimple: true,
          titleImg: require('common/image/cnpc.png')
        }
      },
      methods: {
        fuelFilling: function () {
          this.$router.push({path: '/fuelfill'})
        }
      }
    }
    </script>
    <style scoped lang="stylus" rel="stylesheet/stylus">
      @import "~common/stylus/variable"
      .authImg
        width: 5em
        height: 5em
      .authTitle
        font-size: 1.2em
        color: white
        margin-top: 2em
      .authSubTitle1
        font-size: 1.0em
        color: white
        margin-top: 2em
      .authSubTitle2
        font-size: 1.0em
        color: #878787
        margin-top: 1em
    </style>
    

    6.配置文件webpack.base.conf.js

     resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': resolve('src'),//相当于替换
          'src': resolve('src'),//相当于替换
          'common': resolve('src/common'),//相当于替换
          'components': resolve('src/components')//相当于替换
        }
      },
    
    在文件中
    render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}.
    
    

    注意点:

    1.箭头函数中的this是 指向 包裹this所在函数外面的对象上。

    2.h是creatElement的别名,vue生态系统的通用管理

    3.template:‘’,components:{App}配合使用与单独使用render:h=>h(App)会达到同样的效果,前者识别标签,后者直接解析template下的id为app的div(忽略template的存在)

    展开全文
  • vue开发多接口按顺序访问

    千次阅读 2020-08-04 08:47:11
    进入本次主题---如何实现vue开发多接口按顺序访问 想必很多刚刚接触vue开发的开发者,或多或少为此苦恼过。、 前言:什么是同步?什么是异步? 1.async/await场景 用同步的思维来解决异步问题,当前端接口调用...

    vue官方有很完善的开发api文档工具

    vue官方api点击进入


    进入本次主题---如何实现vue开发多接口按顺序访问

    想必很多刚刚接触vue开发的开发者,或多或少为此苦恼过。、

    前言:什么是同步?什么是异步?

    1.async/await场景

    用同步的思维来解决异步问题,当前端接口调用需要等到接口返回值以后渲染页面。

    2.名词解释

      async

        async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async 函数返回的是一个promise 对象。

      await

       await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码。这正是同步的效果

    理解好了什么是同步、异步后我们来看,用代码怎么实现

    vue页面主要代码如下

    async creat () {
        await this.$store.dispatch('demojs/getdata')
    }

    调用的demo.js

    async getdata (state, commit) {
        let _this = this
        async function getallData () {
            await getDemo1 (state, commit)
            await getDemo2 (state, commit) 
            await getDemo3 (state, commit) 
            await getDemo4 (state, commit)  
                    ......
        }
        async function getDemo1 () {
            let paramdemo1 = {
                demo1 : 'demo1'
            }
            return _this.$axios.post('xx/', paramdemo1 ).then((data)=>{
                //  操作
            })
        }
        async function getDemo2 () {
            let paramdemo1 = {
                demo2 : 'demo2'
            }
            return _this.$axios.post('xx/', paramdemo2 ).then((data)=>{
                //  操作
            })
        }
        async function getDemo3 () {
            let paramdemo1 = {
                demo3 : 'demo3'
            }
            return _this.$axios.post('xx/', paramdemo3 ).then((data)=>{
                //  操作
            })
        }
        async function getDemo4 () {
            let paramdemo4 = {
                demo4 : 'demo4'
            }
            return _this.$axios.post('xx/', paramdemo4 ).then((data)=>{
                //  操作
            })
        }
                ......
        await getallData ()
    }

    按照以上的方法可以实现接口按顺序访问

    展开全文
  • App.vue 页面周期onShow: function() {//当uni-app启动,或从后台进入前台显示console.log('App Show')},onLaunch:function(){//当uni-app初始化完成时触发(全局只触发一次)console.log('App onLaunch')}页面中的...

    App.vue  页面周期

    onShow: function() {//当 uni-app 启动,或从后台进入前台显示

    console.log('App Show')

    },

    onLaunch:function(){//当uni-app 初始化完成时触发(全局只触发一次)

    console.log('App onLaunch')

    }

    页面中的生命周期函数:

    onReady(){//监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发

    console.log('onReady');

    },

    created() {//vue生命周期  页面创建时调用

    console.log('created');

    },

    onShow(){//监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面

    console.log('onShow');

    },

    onLoad() {//监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参

    console.log('onLoad');

    },

    mounted() {//vue 生命周期 ,html挂载的时候 调用

    console.log('mounted');

    },

    执行顺序的如下:

    总的来说页面上的执行顺序 是先根据 vue 的created 最先执行 其次则是 小程序中的onLoad,

    展开全文
  • Vue中方法执行顺序

    千次阅读 2020-06-03 15:25:14
    了解到Vue中方法顺序控制: vue的created钩子函数中,方法的执行顺序 情景:vue框架中通常在created钩子函数里执行访问数据库的方法,然后返回数据给前端,前端data中定义全局变量接收数据 但是如果你在created中...

    今天在前端做ZTree功能时,组件之间的初始化方法因为js的异步触发导致数据交叉出错;
    了解到Vue中方法顺序控制:
    vue的created钩子函数中,方法的执行顺序
    情景:vue框架中通常在created钩子函数里执行访问数据库的方法,然后返回数据给前端,前端data中定义全局变量接收数据
    但是如果你在created中执行了好几个访问数据库的函数,如果对他们的执行顺序是有要求的,那么哪个会先返回,哪个会后返回呢
    并不是谁在前谁就先返回,如果你这样想,并且在后执行的函数中对先执行的函数返回的数据进行操作,经常会报错,提示某些属性不存在,或未定义

    原因:这是因为js中默认执行网络请求是异步的,他们会按顺序发出请求之后就不管了,谁先返回是不确定的,这样在加载数据的时候不会因为某个网络请求慢,而在一直等待那个请求,导致其他请求阻塞,效率,体验很差

    解决方法:
    如果一次加载页面需要执行多个网络请求,并且对返回的数据顺序是有要求的,就用.then()函数,当这个函数执行完后再执行下个函数

    个人解决方法: 将zetree初始化直接放在created中即可;

    扩展
    在页面首次加载执行顺序有如下:

    beforeCreate //在实例初始化之后、创建之前执行
    created //实例创建后执行
    beforeMounted //在挂载开始之前调用
    filters //挂载前加载过滤器
    computed //计算属性
    directives-bind //只调用一次,在指令第一次绑定到元素时调用
    directives-inserted //被绑定元素插入父节点时调用
    activated //keek-alive组件被激活时调用,则在keep-alive包裹的嵌套的子组件中触发
    mounted //挂载完成后调用

    {{}} //mustache表达式渲染页面

    修改页面input时,被自动调用的选项顺序如下:
    watch //首先先监听到了改变事件
    filters //过滤器没有添加在该input元素上,但是也被调用了
    beforeUpdate //数据更新时调用,发生在虚拟dom打补丁前
    directived-update //指令所在的组件的vNode更新时调用,但可能发生在其子vNode更新前
    directives-componentUpdated//指令所在的组件的vNode及其子组件的vNode全部更新后调用
    updated //组件dom已经更新

    组件销毁时,执行顺序如下
    beforeDestroy //实例销毁之前调用
    directives-unbind //指令与元素解绑时调用,只调用一次
    deactivated //keep-alive组件停用时调用
    destroyed //实例销毁之后调用

    参考:
    https://blog.csdn.net/qq_42314022/article/details/88701254

    展开全文
  • 为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题?首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需要的资源,将...
  • Vue中父子组件生命周期顺序如下: 可以看到父组件在渲染完成之后并不是马上挂载,而是先等待子组件创建、渲染、挂载完成之后再去挂载。 父组件先初始化 => 父组件渲染完毕 => 子组件开始初始化 => 子组件...
  • 参照官网:...我们可以把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件1.首先需要进行npm安装babel 插件npm install --save-dev @babel/plugin-synt...
  • 碰到个问题记录一下,就是axios同时多次请求同一个接口(参数不同)导致数据混乱的问题,就是先点击A,马... 在已经封装好的axios方法里面,加上红框中代码,然后再在你需要的vue文件方法里面加上如下代码 这样你...
  • vue中函数方法的执行顺序

    千次阅读 2020-10-14 14:58:05
    情景:vue框架中通常在created钩子函数里执行访问数据库的方法,然后返回数据给前端,前端data中定义全局变量接收数据 但是如果你在created中执行了好几个访问数据库的函数,如果对他们的执行顺序是有要求的,那么...
  • vue-cli axios 加载顺序问题

    千次阅读 2018-08-20 14:36:35
    搭了一个vue-cli前后分离的框架 访问后台接口用了axios,这是异步的,如果加载完data中的数据再访问接口,是没问题的,可是如果data数据还没加载完,就已经访问完了后台,就会有问题。 解决方法:this.$nextTick()...
  • vue实例创建阶段 beforeCreate 实例未创建,不能获取this created 实例创建,可以访问this 可以获取数据赋值data DOM挂载阶段 beforeMount DOM未挂载 mounted DOM已挂载 数据更新阶段 beforeUpdate 数据...
  • vue的created函数中,方法的执行顺序

    万次阅读 2019-03-20 21:55:51
    vue的created钩子函数中,方法的执行顺序 情景:vue框架中通常在created钩子函数里执行访问数据库的方法,然后返回数据给前端,前端data中定义全局变量接收数据 但是如果你在created中执行了好几个访问数据库的函数...
  • 1、Vue生命周期 官网生命周期图镇场 源码可见:src/core/instance/init.js Vue2 状态 操作 beforeCreate 实例初始化之后完全创建之前,this指向创建的实例,不能访问到data、methods等上的方法和数据都没...
  • 1#computed:计算属性将被混入到 Vue ...可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。 3#watch:是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一...
  • 一.父子组件之间属性访问 通常父子组件是可以...通过this.$refs(子组件名称来访问),这种相比于第一种就是可以通过子组件的具体名称来访问了,避免索引顺序改变问题 1.1 父组件访问子组件(this.$children,this.$re
  • 项目让你访问:http://localhost:8080 注意,重点来了这个不理解,项目可以不用学了 执行流程:入口文件main.js main.js 解释: vue被导入然后new一个实例,通过el:'#app'找到index.html里面的 id为app...
  • 项目开发环境下,运行应用程序样式正常,但是通过npm run build打包后,放到服务器上,再次访问,就会出现css错乱,自定义的css文件被其它组件的样式给覆盖了,比如引用了iview.css样式,就会被此文件覆盖。...
  • 我以为是自己if判断的顺利写错了,还没有判断到当前进度,值就在第一步return出去了,就调整了if判断语句的顺序,代码如下: HTML代码段 <van-steps direction="vertical" :active="process"> <van-step&...
  • 全局组件和局部组件组件的嵌套(父子组件):注意先后顺序,先声明,后面才能用2、组件的语法糖:直接在声明的时候直接进行组件的构造,省去了extend()的步骤// 2、注册组件Vue.component('cpn1', {template: ``})组件...
  • vue debug 二种方法

    2021-01-21 12:45:32
    console.log多了比较烦...3,chrome中访问vue网址,打开开发者工具,导行会多出vue,如下图   vue devtools vue devtools,对于数据展示,是非常清楚的。 二,vscode debug 1,修改.vscode/launch.json 查看复制打印?
  • Vue 实例方法实例属性1、组件树访问1-1、vm.$parent用来访问当前组件实例的父实例,如果当前实例有的话1-2、vm.$root当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自已1-3、vm.$children类型:...
  • 1.在githup已有的项目仓库里的master分支上先做以下两点修改: 在 npm run build 之前要将 config/index.js 里边 build 配置里边的 ...2.在master分支上,按顺序执行以下命令: $ npm run build $ git checkout -b
  • vue的生命周期

    2019-10-26 16:35:07
    vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 底下这张图片是vue官方文档给出的一副有关生命周期中钩子函数的先后顺序图!所有的钩子函数会将this上下文绑定到vue实例中,...

空空如也

空空如也

1 2 3 4 5
收藏数 97
精华内容 38
关键字:

vue访问顺序

vue 订阅