vue 判断页面加载完成_vue项目搭建及总结

一、vue的两种安装方式

(1)直接在html中引入vue.js

(2)通过vue+nodeJS搭建

我们采用的是第二种方式

二、vue和nodeJS的关系

(1)nodeJS不是一个js框架，是一个基于Chrome V8引擎的javascript运行环境，所以会产生众多基于node的js框架和库，同时包括关于js模块化的库。另一个就是node可以创建本地服务器，从而可以使用js来编写后台程序。

(2)vue依赖node中的webpack打包工具，初始化vue项目，以及一些依赖包。

三、搭建vue项目

(1)安装node

(2)初始化vue项目，初始化命令：vue init webpack my-project

需要注意的是：node的版本需要和npm版本相对应

(3)初始化项目后，进入到project目录下使用命令npm run dev来启动项目。这个命令的执行是通过vue脚手架找到项目的根目录下的package.json文件，scripts表示脚本部分，作用是把webpack的原生命令进行代理。其中build即是打包命令。执行了npm run dev则会启动端口，在开发

(4)vue目录结构，项目目录：webroot->vue->project

在build下的webpack.base.conf.js中可配置文件引入路径的别名，引入的公共文件路径可在这里配置，移动文件时只需要修改这一个地方，如：@表示src目录.

四、关于vue的几大知识模块

(1)vue路由

vue使用的是单页面路由，即所有组件都是渲染在一个容器中，页面跳转时不需要重新加载页面，只是重新渲染组件。在开发应用时，前端分配页面地址，包括实际路径地址、name、别名、重定向、组件名称，实际访问路径可以是别名也可以是真实路径

(2)vue双向数据绑定，使用模板语言

(3)vue的生命周期

beforeCreate：this无法使用，data数据、method方法都是无法获取的

created：可以操作vue实例中的数据和方法，但是无法操作dom结构

mounted：挂载完毕，dom节点渲染到页面中，能操作dom结构

computed：计算属性，vue经常会在模板中使用一些简单的表达式来控制值，所以复杂的逻辑应使用计算属性来进行控制。可快速计算视图中的属性，并且计算会被缓存，在需要更新的时候更新。提升页面性能。一般是当做属性来使用

watch：侦听属性，用来监听data中的数据变化，还可以监听函数的中参数来获取新值和旧值，和计算属性有些类似，通常用这个属性来响应数据的变化，监听ajax返回的结果。监听特定数据的变化并作出具体的业务逻辑。

(4)vue组件的开发和调用：注册组件使用.vue文件，使用export default将组件暴露出去，在父组件中import进来，并声明组件，在父组件中直接使用组件名称作为标签名即可使用子组件

(5)vue的权限控制：控制用户登录权限，控制用户角色权限，在页面加载前判断是否已登录，如果已登录再判断用户是否有权限

vue 判断页面加载完成_vue项目搭建及总结相关推荐

vue 判断页面加载完成_Vue实战040：nprogress页面加载进度条
前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载.这个功能我 ...
vue 判断页面加载完成_vue之骨架屏踩坑之路
vue的首屏优化方式有很多种骨架屏就是其中之一作为一个前端开发用户体验感是很重要的关于页面的loading状态的展示,目前主流的主要有loading图和进度条两种现今使用骨架屏的也越来越多 ...
vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果.document.onreadystatechange = function () {if (document.readyState ...
html页面展示大括号,vue 防止页面加载时看到花括号的解决操作
如下所示: [v-cloak]{ display:none } v-cloak v-text v-html v-cloak用于大段 v-text用于单个标签 v-html用于带有标签的处理补充知识: ...
html 判断页面加载完成,Javascript判断页面是否加载完成
很多时候我们在使用document.getElementById的时候直接在script标签中获取对象,然后使用,此时程序会出现该对象为undefined. var dom=document.getE ...
php 判断页面加载完,所有ajax执行完且页面加载完判断
jquery ajax&load 方法导致 js效果不显示或显示后由于加载后ajax 重新布局页面导致效果错误. 解决思路:需要在ajax get post 或 load 等执行完后再去执行方 ...
Vue：页面加载进度条
这段时间在踩Ant design pro Vue的坑,发现了个在手机端页面上经常出现的,加载进度条,效果蛮不错的!记录下来. cnpm install --save nprogress import ...
【MFC】在CHtmlView中准确判断页面加载完成
以前的方法繁琐,这里抄了别人的方法,做了简单修改.记录下. 首先要在CHtmlView的子类中,重载如下函数: virtual void DocumentComplete(LPDISPATCH pDi ...

vue 判断页面加载完成_vue项目搭建及总结

vue 判断页面加载完成_vue项目搭建及总结相关推荐

最新文章

热门文章