Vue学习笔记

最新推荐文章于 2022-11-05 10:47:29 发布

日积月累@海纳百川

最新推荐文章于 2022-11-05 10:47:29 发布

阅读量170

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/slqgenius/article/details/107089536

版权

vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. NPM 安装Vue方法

由于 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 vue

命令行工具

Vue.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

2. 运行 Laravel Mix
Laravel Mix 一款前端任务自动化管理工具，使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API，让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器，通过简单的调用，你可以轻松地管理前端资源。

使用 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

vue.js中created()与activated()的区别

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>

Vue中的mounted()与activated()探讨和使用

分步阅读

论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()

vue强制更新$forceUpdate()

添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。

我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用this.$forceUpdate() )

以前做遮罩层都是写最小高度来占满屏，但是总会出现问题，也没改变，今天一个人在交流群上问这个时，看到一个回答解决了我这一个bug，学到了，现在记录一下样式。

<div class='popContainer'></div>

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 弹出遮罩层样式实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

Vue中常用的数组方法.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()

Vue中常用的数组方法

.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()

.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()

本文仅为自己在项目中经常用到的一些数组方法的使用，以便随时查看。

.filter()

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() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
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() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: 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() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

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)  // undefined

.findIndex()

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

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)  // -1

.some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
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)  // false

.every()

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
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