由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
# 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
# 最新稳定版 $ cnpm install vueVue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
# 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置，默认回车即可 This will install Vue 2.x version of the template. For Vue 1.x use: vue init webpack#1.0 my-project ? Project name my-project ? Project description A Vue.js project ? Author runoob <test@runoob.com> ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "my-project". To get started: cd my-project npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack进入项目，安装并运行：
$ cd my-project $ cnpm install $ cnpm run dev DONE Compiled successfully in 4388ms > Listening at http://localhost:8080使用 Mix 很简单，首先你需要使用以下命令安装 npm 依赖即可。我们将使用 Yarn 来安装依赖，在这之前，因为国内的网络原因，我们还需为 Yarn 配置安装加速：
$ yarn config set registry https://registry.npm.taobao.org 使用 Yarn 安装依赖：
SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn 在 yarn 命令前添加 SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass 的目的是告诉 yarn 到淘宝的镜像去下载 node-sass 二进制文件。
yarn add socket.io-client
created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；这时候只有dom没有数据挂载。
activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。这个用于每次只要进入这个组件页面就初始化页面，可以用于列表数据等的刷新。
https://blog.csdn.net/soulwyb/article/details/85611252 Vue生命周期函数有beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated、deactivated、errorCaptured。共11个。本文直说前8个，另外3个以后再说
首先要说明下 什么是生命周期函数：
生命周期函数就是指在某一个特定时间节点会自动执行的函数。
1. beforeCreate:
beforeCreate是在Vue实例初始化事件后执行的。
<!DOCTYPE html> <html> <head> <title>生命周期函数</title> <script src="vue.js"></script> </head> <body> <div id="app">Hello World</div> </body> <script type="text/javascript"> var vm = new Vue({ el: "#app", beforeCreate: function() { console.log('beforeCreate'); } }) </script> </html>
1
2
3
4
5
分步阅读
论mounted() 与 activated() 生命周期的加载先后顺序，及activated()和keep-alive配合使用！
1
一、论mounted() 与 activated() 生命周期的加载先后顺序
1.当mounted()生命周期放在activated()生命周期的前面，运行的结果是mounted()先比activated()先加载！
2
2. 当activated()生命周期放在mounted()生命周期的前面，运行的结果是mounted()先比activated()先加载！
3
从这两个数据对比来看无论mounted()与activated()两者的先后顺序，mounted()总是比activated()先加载！
4
二、对vue中activated()探讨和使用
Activated()生命周期钩子，官网说其是在服务器端渲染期间不被调用,就是在挂载后和更新前被调用的。所以说当我们想使用activated()生命周期时，必须配合<keep-alive>来使用！
vue强制更新$forceUpdate()
添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。
调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。
我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用this.$forceUpdate() )
以前做遮罩层都是写最小高度来占满屏，但是总会出现问题，也没改变，今天一个人在交流群上问这个时，看到一个回答解决了我这一个bug，学到了，现在记录一下样式。
<div class='popContainer'></div>
1
2
3
4
5
6
7
8
div.popContainer{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
}
这样遮罩层就会占满屏了
补充知识：vue 锁定蒙版 不让里面页面滑动
其实就是一句代码，在你的蒙版里面添加一句@touchmove.prevent就好了，下面是例子
<!-- 阴影背景层 --> <div class="layout" @touchmove.prevent :style="{'display':flag?'block':'none'}" @click="closeAction"></div>
以上这篇vue 弹出遮罩层样式实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
本文仅为自己在项目中经常用到的一些数组方法的使用，以便随时查看。
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 是否改变原数组：否 是否对空数组进行检测：否
语法：
const arr= [32, 33, 16, 40]; const arr1 = arr.filter(item => item >= 18) console.log(arr) // [32, 33, 16, 40] console.log(arr1) // [32, 33, 40]map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。 是否改变原数组：否 是否对空数组进行检测：否
语法：
const arr= [4, 9, 16, 25]; const arr1 = arr.map(item => item+2) console.log(arr) // [4, 9, 16, 25] console.log(arr1) // [6, 11, 18, 27]forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。注意: forEach() 对于空数组是不会执行回调函数的。tips: forEach()中不支持使用break(报错)和return(不能结束循环)，有需要时可使用常规的for循环。
语法：
const arr= [4, 9, 16, 25]; const arr1 = []; arr.forEach(item => arr1.push(item)) console.log(arr) // [4, 9, 16, 25] console.log(arr1) // [4, 9, 16, 25]find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined注意: find() 对于空数组，函数是不会执行的。注意: find() 并没有改变数组的原始值。
语法：
const arr= [4, 9, 16, 25]; const b = arr.find(item => item>10) const c = arr.find(item => item<1) console.log(arr) // [4, 9, 16, 25] console.log(b) // 16 console.log(c) // undefinedfindIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1注意: findIndex() 对于空数组，函数是不会执行的。注意: findIndex() 并没有改变数组的原始值。
语法：
const arr= [4, 9, 16, 25]; const b = arr.findIndex(item => item>10) const c = arr.findIndex(item => item<1) console.log(arr) // [4, 9, 16, 25] console.log(b) // 2 console.log(c) // -1some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。 some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。注意： some() 不会对空数组进行检测。注意： some() 不会改变原始数组。
语法：
const arr= [4, 9, 16, 25]; const b = arr.some(item => item>10) const c = arr.some(item => item<1) console.log(arr) // [4, 9, 16, 25] console.log(b) // true console.log(c) // falseevery() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。 every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。注意： every() 不会对空数组进行检测。注意： every() 不会改变原始数组。
语法：
const arr= [4, 9, 16, 25]; const b = arr.every(item => item>10) const c = arr.every(item => item>1) console.log(arr) // [4, 9, 16, 25] console.log(b) // false console.log(c) // true