精华内容
下载资源
问答
  • vue 有8个声明周期,如果在vue实例创建之前需要获取页面初始数据。此时要进行ajax请求,应该是同步还是异步好?beforeCreate:function(){// getInitData ajax请求获取数据}我想着应该异步,那么如果异步请求,页面会...

    vue 有8个声明周期,如果在vue实例创建之前需要获取页面初始数据。

    此时要进行ajax请求,应该是同步还是异步好?

    beforeCreate:function(){

    // getInitData ajax请求获取数据

    }

    我想着应该异步,那么如果异步请求,页面会在还没有返回数据的时候进行渲染。

    此时可以使用loading动画遮盖。

    但是返回的数据该如何写入到已有的数据中?

    比如:

    替换了整个对象,会不会对数据渲染造成影响?

    vm 还没有实例化,能不能在vm实例化之前访问vm

    function getInitData(){

    // ... 这里获取上数据

    var data = getedData;

    vm.$data.initData = data;

    // 1. 这样替换了整个对象,会不会对数据渲染造成影响?

    // 2. vm 还没有实例化,能不能在此处访问?

    }

    var vm = new Vue({

    el:'#app',

    data:{

    initData:{

    name:'name',

    age:'age',

    bulabual:'bulaubla',

    }

    },

    beforeCreate:function(){

    getInitData()

    }

    })

    在浏览器console中替换对象测试,好像没有影响

    经浏览器测试,在vm未实例化之前访问无法访问其vm.$data

    那么上面的代码无法正确执行,鉴于此只好将初始化的ajax请求放入到beforeCreate中。

    如果使用异步请求,还是需要loading动画遮盖无数据的界面。

    那么如果使用同步请求,未请求完成时页面无法进行渲染,依然需要laoding动画遮盖。

    综上

    需要页面初始化获取数据的必须需要loading动画。

    异步初始化情况下可以同时渲染vue实例,在获取数据后再修改数据。

    而同步初始化情况下,是在数据获取之后再渲染vue实例。

    两者各有取舍。

    展开全文
  • 这里主要要讲述五个文件-index.html、main.js、App.vue、index.js(router目录下)、HelloWorld.vue ... ... ... 3.app.vue中的<router-view/>会加载index.js中配置的路由页面 4.index.js默认配置的是H

    这里主要要讲述五个文件-index.html、main.js、App.vue、index.js(router目录下)、HelloWorld.vue

    本地项目启动后输入http://localhost:8080/#/

    1.首先加载index.html文件

    2.然后main.js会渲染index.html中的id为app的div,并引入组件app和路由router

    3.app.vue中的<router-view/>会加载index.js中配置的路由页面

    4.index.js默认配置的是HelloWorld组件,所以默认加载的是HelloWorld组件

    展开全文
  • Vue学习记录—初始Vue模块页面示例生命周期钩子数据 示例 </template> <div></div> </template> /*仅限当前页面适用*/ <style scoped> @import './demo.css'; </style> /*...

    Vue学习记录—初始Vue模块页面

    示例

    <template>
        <div></div>/*模块必须为一个完整的div*/
    </template>
    
    /*仅限当前页面适用*/
    <style scoped>
    @import './demo.css';
    </style>
    /*全局样式 (两个不能同时使用) */
    <style></style>
    
    <script>
    import demo from './demo.vue'
    export default{
        //页面所有数据
        data(){
            return{}
        },
        components:{},//加载组件声明
        
        created(){},//页面初始化进行数据操作
        
        mounted(){},//页面初始化进行dom操作
    
        methods(){},//页面Function
    }
    </script>
    

    生命周期钩子

    • beforeCreate:
      官方:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
      备注:什么都不能用

    • created
      官方:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
      备注:可以操作数据和方法,但不能进行dom操作。

    • beforeMount
      官方:在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

    • mounted
      官方:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
      注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted
      备注:进行dom操作

        mounted: function () {
          this.$nextTick(function () {
            // Code that will run only after the
            // entire view has been rendered
          })
        }
    
    • beforeUpdate
      官方:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
      备注:数据更新时调用

    • updated
      官方: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
      当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
      注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated
      备注:更新DOM操作(?)

    • beforeDestroy
      官方:实例销毁之前调用。在这一步,实例仍然完全可用。

    • destroyed
      官方:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

    数据

    data: 页面绑定数据

    <template>
    {{test}}
    </template>
    <script>
    export default{
        data(){
        return{
            test:'',
        }},
        created(){
            this.test="info";
        },
        watch: {
        demo(newDemo, oldDemo) {
          // ...
        }} 
    }
    </script>
    

    props: 用于接收来自父组件的数据
    watch: 监听数据变化

    展开全文
  • vue.js作为开发框架的三巨头之一,在2019年3月推出3.0版本之后,功能得到了更大的完善。相较于上一版本冗杂的文件目录,3.0版本...虽然vue仍然还是以开发单页面应用为主,但是我在查看官方文档的时候,发现它对多页...

    0a408d4c79a1ea0357a21b6a49f7bce1.png

    vue.js作为开发框架的三巨头之一,在2019年3月推出3.0版本之后,功能得到了更大的完善。

    相较于上一版本冗杂的文件目录,3.0版本的目录显然清爽许多,并且vue.config.js文件将赋予了开发者高度的自由配置权。

    回想起使用2.0时候,要更改一个配置需要在好多个配置文件之间来回修改,新版本的vue实在太友好了。

    虽然vue仍然还是以开发单页面应用为主,但是我在查看官方文档的时候,发现它对多页面已经有了极大的支持。

    正巧,我最近也在做一个多页面的个人网站的开发,所以就借此把多页面的配置简单说下。

    全文很短,也很简单。

    1.初始化项目,进入项目根目录下,我们会看一般性的文档配置如下:

    cf9dfb512e4a97f849bd3f42ecafa040.png

    实际上,我们需要修改的是public文件夹和src文件夹,以及增加一个配置文件vue.config.js.

    在原本的文件中,index.html、main.js和app.vue的位置是:

    1. index.html ---> 在public文件夹下
    2. main.js --->在src文件夹下
    3. app.vue --->在src文件夹下

    在src文件夹下新建view文件,用于存放需要的多个页面,如下:

    82a20a5e3d6978cc21f7da6cdbc577cf.png

    在view文件夹下,我配置了3个文件夹,用于存放3个页面(分别是index页面,article页面和person页面),每个文件夹下都有一个.html后缀的文件(页面主文件),.js文件(主入口)和.vue(根组件)

    p.s:其实这样的文件就是vue默认的文件配置,只是vue默认把它们分开在了不同的文件夹里(主入口文件main.js和根组件app.vue放在了src文件夹下,index.html主页面文件放在了public文件下)

    最终文件夹如下:

    0d56dab87b767e9db19f1d42069545fa.png

    2.现在,我们可以把src文件夹下的main.js和app.vue文件删除了,同时也把public问价下的index.html文件删除了。

    当然,如果你想要保留这3个文件,可以把它们统一挪到view/index文件夹下(记得修改相应的引用路径)

    失去了默认的入口文件和页面,我们需要自己重新配置

    在项目的根目录下新建vue.config.js文件,如下:

    09698a844fe51989eb955afea5fc5b32.png

    在这个文件中,我们可以配置每个页面的入口文件,和输出路径,下面我以我的三个页面中的任意一个展示:

    b851cc28c1b8e7ff597420f48dd67dc7.png

    3.现在,我们就可以在项目下通过<a>标签实现页面跳转了,

    比如,我想在index.html中插入2个<a>标签,跳转到person.html和article.html页面:

    在index.app下:

    8e5d64ea7e2bf1b8f69872d92f616335.png

    注意,这里不必写成相对路径,下面这样的写法是错误的!

    错误写法:

    <a href = "../person/person.html>跳转到person页面</a>

    以上就是简单的vue3.0多页面配置法。


    f98a6d54a1640a3800f3df1a9fcd8ca2.png

    皮的·潘

    一个永远在学习的攻城狮,

    html(5)/css(3)/javascript底子扎实,

    webpack和es6当然也得会啦,

    jQuery不维护了?阻止不了我继续用它,

    选择vue完全是因为中文文档能读懂啊,

    git+SourceTree,鼠标一点就能push到git仓库里,

    photoshop+cutterman,UI在我面前羞愧地低下了头

    展开全文
  • vue脚手架项目默认访问页面 index.html首页 vue脚手架启动之后,默认会访问脚手架项目根目录下的index.html首页,如下图: /src/main.js文件 /src/main.js文件的配置,如下图: App.vue组件内容 App.vue组件的内容...
  • 在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路。 性能瓶颈在哪里? ...
  • vue设置载入动画、初始页面动画

    万次阅读 2018-09-07 17:09:04
    移动端页面载入时过长的白屏等待,总是让人心烦气躁 不如,加个小动画吧 原理很简单 在index.html页面的body插入一个div css里写入动画 在app.vue里 created的时候 将这个div移除就ok了   index.html ...
  • vue项目初始

    2021-01-17 17:37:25
    项目初始化 使用 Vue CLI 创建项目 -Vant 组件库的导入方式 制作使用字体图标的方式 如何在 Vue 项目中处理 REM 适配 -axios 请求模块的封装 1.1 使用 Vue CLI 创建项目 如果你还没有安装 VueCLI,请执行下面的...
  • 使用vue时,初次打开页面页面会出现vue语法,虽然很快就会被渲染覆盖,但很影响用户体验。 解决 在标签上增加v-cloak, 页面增加style即可。代码如下: <style> [v-cloak] { display: none; } </style&...
  • nginx部署vue只能访问默认页面的问题

    千次阅读 2020-03-31 09:57:55
    在通过nginx启动vue以后我们在访问页面的时候只能访问默认页面和通过项目内跳转其他页面,如果刷新就会404 通过默认页面内部访问: 直接刷新: 可以看到nginx并不识别vue的其他页面,这跟conf文件的配置有关 ...
  • 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 ...
  • 场景复现:需要获取到当日的最后一秒来作为查询条件(不能使用当前时间的毫秒 - 不同的访问IP存在时差),由于vue的this在挂载中,不一定能取到值 解决方法:在data的return外定义一个变量存储当日的最后一秒 ...
  • 之前写好的vue项目使用其他浏览器访问都没什么问题,今天使用IE浏览器访问时发现页面全空白现象,打开控制台后发现以下情况。 上百度搜索后,原因是IE无法解析ES6代码。 所以有如下解决方法: 安装babel-node包将...
  • 1. 运行项目,浏览页面自动打开 npm run dev后运行项目无法自动打开页面,需要在package.json中添加--open,就可以自动打开页面了。 2. css样式初始化 为了保证各个浏览器css样式一致,引入css初始化样式文件。...
  • 使用Vue构建前端页面

    千次阅读 2018-12-16 21:55:28
    起步 使用vue-cli构建初始应用,这里使用了webpack这个模板,这会产生一个比较完整的项目结构 ...然后我们就可以在localhost:8080 看到项目的初始页面 webpack Webpack 是当下最热门的前端资源模...
  • vue-cli初始化项目4. 项目结构 1. vue-cli 简介 vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一...
  • 我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码 :style="{background: option.background,color: option.color||'#fff'}" :class=
  • 使用Flask和Vue开发单页面应用

    千次阅读 2019-10-19 18:43:34
    使用Flask和Vue制作一个基本的CRUD单页面应用,其中后台用到了RESTful API 参考原版的教程https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/ 步骤清晰,动作规范. 下面开始我的实际操练...
  • 遇到一个这样的问题,实际页面中用到dialog,并且引入了其他页面,当然这里用的vue + elementUI 如果想要引入页面在弹框每次弹出时进行初始化,如图: 但是dialog中子页面只会在父页面加载完后,第一次点击事件时...
  • VUE3.0学习系列随笔(一):VUE3.0项目初始化 1、VUE3.0简介 VUE3.0相对于VUE2.0的提升主要有以下几点: Performance:性能更比Vue 2.0强。 Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。 ...
  • Vue实例初始化的选项配置对象详解

    千次阅读 2019-06-25 08:57:34
    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然...前面我们已经用了很多次 new Vue({…})的代码,而且Vue初始化的选项都已经用了data、methods、el、comput...
  • 以上是控制台的启动信息,没有报错,提示是启动成功了的,但是不管是输入http://localhost:8080或http://127.0.0.1:8080都不能访问。新手,是按照官方流程搭建的环境,win10 英文版的系统。 ``` C:\Users\john>...
  • 配置vue 开发环境: 1. 安装node.js,自带npm软件包管理工具 2. 使用淘宝cnpm,npm是国外服务器,速度慢,cnpm国内更快 npm install -g cnpm --registry=https://registry.npm.taobao.org npm install --global ...
  • vue源码(七)Vue初始化之开篇

    千次阅读 2018-08-27 14:23:05
    本文是学习vue源码,之所以转载过来是方便自己随时查看,在这里要感谢HcySunYang大神,提供的开源vue源码解析,写的非常非常好,简单易懂,比自己看要容易多了,他的文章链接地址是http://hcysun.me/vue-design/art/...
  • 访问vue项目,加载刚开始的时候会有一片空白,有没有大佬遇到过这个问题。
  • 访问web页面 http://localhost:8000/project/create 可以选择手动 勾选上路由Router、状态管理Vuex,去掉js的校验 接着下一步中,也选上【Use history mode for router】,点击创建项目,然后弹窗中选择...
  • 在通过nginx启动vue以后我们在访问页面的时候只能访问默认页面和通过项目内跳转其他页面,如果直接访问就会出现404 可以看到nginx并不识别vue的其他页面,这跟conf文件的配置有关 location / { root C:/web/dist; ...
  • 当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时,我们可以使用iframe去引用html页面,实现他们的交互 首先我们可以再vue页面中使用标签引用html页面 <template> <div> <iframe ...
  • 使用vue-cli初始化项目

    2019-12-09 22:38:44
    一、首先安装node与npm 查询node的版本 node -v 查询npm的版本 npm -v ...三、初始化项目 ```vue init webpack myvue //myvue 是项目名 cd myvue 进入创建的项目 启动脚手架 npm run dev 点击链...
  • export default new Router({ routes: [ { path: '/', redirect: '/recommend' }, ] })

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,902
精华内容 9,160
关键字:

vue初始访问页面

vue 订阅