AyayaOVO-CSDN博客

原创解决webpack : 无法加载文件

**解决webpack : 无法加载文件C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。**PS F:\MY xiangmu> set-ExecutionPolicy RemoteSigned执行策略更改执行策略可帮助你防止执行不信

2021-10-22 21:52:18 439

原创 vue脚手架的创建

使用vue-cli创建模板项目什么是vue-cli　是vue官方提供的脚手架工具。　脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。全局安装vue-cli（1）检查npm 版本，建议安装到最新版本。 node -v npm -v (是否升级npm) npm install -g npm (是否修改淘宝镜像) npm config set registry "https://registry.npm.taobao.org"

2021-05-21 17:49:08 235

原创 vuex的mutations-getters-actions异步

1、mutations（修改状态）（1）template中直接使用$store.commit( )触发// template<button @click="$store.commit('ADD')">+</button>// src/vuex/store.jsconst mutations = { // 状态变更函数 ADD (state) { state.count++; }}（2）利用mapMutations引入触发&l

2020-07-17 13:23:56 421

原创 vuex的state-状态对象的获取方法

1、在组件的template中直接使用<h2>{{ $store.state.count }}</h2>2、在计算属性computed中直接赋值// 方式1：直接获取computed: { count() { // this指的是main.js中的vue实例对象 return this.$store.state.count; }}3、通过mapState的对象来赋值// 方式2：利用mapStatecomputed:

2020-07-12 01:57:18 876

原创 vuex的简单使用

1、安装npm install vuex --save2、简单示例（1）src/vuex/store.js中写入以下代码：// 引入vueimport Vue from 'vue'// 引入vueximport Vuex from 'vuex'// 使用vuexVue.use(Vuex)// 1、state：创建初始化状态const state = { // 放置初始状态 count: 1}// 2、mutations：创建改变状态的方法con

2020-07-11 20:46:28 174

原创 vue的自定义布局（vm/vh）

目录1. px与视口2. %3. 媒体查询4. rem5. vm/vh1. vw/vh的定义css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：这里我们发现视窗宽高都是100vw／100vh，那么vw或者vh，下简称vw，很类似百分比单位。vw和%的区别为：从对比中我们可以发现，vw单位与百分比类似，单确有区别，前面我们介绍了百分比单位的换算困难，这

2020-07-11 20:40:10 1776

原创 vue的自定义布局（rem）

目录1. px与视口2. %3. 媒体查询4. rem5. vm/vh1. rem单位首先来看，什么是rem单位。rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为12px，所以：1 rem = 12px为了计算方便，通常可以将html的font-size设置成：html{ font-size: 67.5% }这种情况下：

2020-07-10 20:48:36 2167

原创 vue-router过渡动画实现左右滑动

使用钩子函数： beforeRouteUpdate。原理：一个页面是有二级导航的，在切换二级导航的时候，对应的内容是在变化的；这个页面是复用的，只会生成一次，切换二级导航的时，如何知道导航在更新呢？一个页面有二级导航的时候，点击二级导航的时候导航路径更新了，会触发路由钩子函数beforeRouteUpdate。代码示例1.name是定义的过渡动画的名称 <keep-alive> <transition :name="transitionName">

2020-07-07 22:29:23 683

原创 vue的自适应布局（%）

目录1. px与视口2. %3. 媒体查询4. rem5. vm/vh一. 百分比当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。为了了解百分比布局，首先要了解的问题是：css中的子元素中的百分比（%）到底是谁的百分比？直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height百分比相对于height，width百分比相对于width。当然这种理解是正确的，但是根据css的盒式模

2020-07-07 22:17:44 4074 1

原创 vue中的自适应布局（ px与视口）

目录1. px与视口2. %3. 媒体查询4. rem5. vm/vh一. px与视口在静态页面中，通常使用px(像素)作为盒子容器宽高的单位，在pc端，通常认为css中,1px所表示的真实长度是固定的。那么，px真的是一个设备无关，跟长度单位米和分米一样是固定大小的吗？答案是否定的，pc端下和移动端下我们设置的font-size统一为16px。可以看出，字体都是16px，显然在pc端中文字正常显示，而在移动端文字很小，几乎看不到，说明在css中1px并不是固定大小，直观从我们发现在移动

2020-07-07 22:12:26 2068

原创 vue的flex布局整理

1.flex-direction:设置容器内部元素的排列方向flex-direction:row 默认值。灵活的项目将水平显示，正如一个行一样。（从左到右）flex-direction:row-reverse 与 row 相同，但是以相反的顺序。flex-direction:column 灵活的项目将垂直显示，正如一个列一样。（从上到下）flex-direction:column-reverse 与 column 相同，但是以相反的顺序。flex-direction:initial 设置该属性为

2020-07-07 21:59:24 1055

原创什么是vuex

1、vuex是什么？vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。chrome安装调试工具 devtools extension2、单向数据流State：驱动应用的数据源（单向数据流）View：以声明方式将 state 映射到视图（静态显示出来的数据源）Actions：处理用户在view上面操作而导致的状态变化（数据源变化追踪）一个简单的demo案例：<template>

2020-07-07 21:39:53 349

原创 vue-router懒加载

1、路由正常模式：// 1、先引入页面组件import Home from '@/components/Home'// 2、使用组件 { path: '/home', component: Home}2、懒加载模式大项目中，为了提高初始化页面的效率，路由一般使用懒加载模式，一共三种实现方式。（1）第一种写法：component: (resolve) => require(['@/components/One'], resolve)（2）第

2020-07-07 21:35:17 104

原创 vue-router的路由钩子

路由钩子，即导航钩子，其实就是路由拦截器vue-router一共有三类：全局钩子：最常用路由单独钩子组件内钩子1、全局钩子在src/router/index.js中使用，代码如下：// 定义路由配置const router = new VueRouter({ ... })// 全局路由拦截-进入页面前执行router.beforeEach((to, from, next) => { // 这里可以加入全局登陆判断 // 继续执行 next();});

2020-07-06 08:30:46 233

原创 vue-router的mode模式和404

1、mode模式代码示例：export default new Router({ mode: 'history', //mode模式 routes: [...]})mode取值说明：（1）histroy：URL就像正常的 url，示例：http://localhost:8080/home（2）hash：默认值，会多一个“#”，示例：http://localhost:8080/#/home2、404页面设置如果访问的路由不存在，或者用户输入错误时，会有一个404友好的提示页面

2020-07-06 08:28:16 519

原创 vue-router过渡动画

1、代码示例（1）在标签的外部添加标签，标签还需要一个name属性，代码如下：<transition name="fade" mode="out-in"> <router-view /></transition>（2）加入CSS，一共4个CSS类名，四个类名与transition的name属性有关，比如name=”fade”，相应的css如下：/*页面切换动画*//*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/.fade-en

2020-07-05 21:37:45 833

原创 PS出现“不能完成命令，因为没有足够内存(RAM)”的解决方案

一、解决没有足够内存RAM的问题给与足够的内存空间，具体操作如下1.下面选择菜单栏中的编辑，弹出编辑列表选择性能，或者随便单击一个，进入首选项设置2.设置首选项中的暂存盘，将C盘以外的其他暂存盘勾选起来，然后确定。3.设置首选项中的性能，增加性能中内存使用情况中内存占用比率，建议是75-85%区间内，然后确定。注意：如果内存占用拉至100%，可能影响电脑其他软件的使用。4.进入首选项设置中的Camera Raw(W)5. 然后清空高速缓存，并重新设置高速缓存储存位置（C盘以外），设置储

2020-07-04 15:57:15 71817 4

原创 2020web前端面试题总结

h5新增的标签有哪些？为什么要加强语义化？，便于开发者理解代码结构，方便网络抓包。行内元素，块级元素有内些？有什么不同？行内(内联)元素：< em >,< input >, < a >, < big >块级元素：< div >,< p >,< h >, < ul >不同：块级元素会独立成行，会有padding，margin等属性，第一行！docctype是做什么用的？定义该页面渲染模式，分为严格模

2020-07-04 01:01:56 884

原创 2020前端面试题大全

说一下PromisePromise是什么？Promise是一种用于解决异步问题的思路、方案或者对象方式。Promise怎么用？Promise是一个对象，所以先用new的方式创建一个，然后给它传一个函数作为参数，这个函数有两个参数，一个叫reolve,另一个叫reject、紧接着，就用then来进行调用Promise原理在Promise内部，有一个状态管理器的存在，有三种状态: pending、fulfilled、rejected(1) promise初始化状态为pending(

2020-07-04 00:53:54 559

原创面试中常见的人事问题

1、请你自我介绍一下自己好吗？说姓名、工作经验，最强的技能、最深入研究的知识领域、个性中最积极的部分、做过的最成功的事，主要的成就等在回答每个问题之后都说一句“谢谢”，企业喜欢有礼貌的求职者。2、你觉得你个性上最大的优点是什么？沉着冷静、条理清楚、立场坚定、顽强向上、乐于助人和关心他人、适应能力和幽默感、乐观和友爱。3、说说你最大的缺点？绝对不要自作聪明地回答“我最大的缺点是过于追求完美”，有的人以为这样回答会显得自己比较出色，但事实上，他已经岌岌可危了。企业喜欢求职者从自己的优点说起，中间加一些

2020-07-04 00:45:02 2442

原创 vue-router命名路由-命名视图-重定向-别名

1、命名路由给一个路由命一个唯一的名称，然后跳转调用这个名称即可。（1）在src/router/index.js中加一个带name的路由，代码如下：{ path: 'one', // 子页面1 name: 'one', // 路由名称-命名路由 component: One // 页面组件}（2）在src/component/Home.vue页面中调用，代码如下：// template跳转调用<router-link :to="{name: 'one'}"&gt

2020-07-03 18:39:18 472

原创 vue-router路由传递参数

1、通过标签中的to传参基本语法：valueStringPS：上面to前边是带冒号，后边跟的是一个对象形势的字符串name：在路由配置文件中起的name值。叫做命名路由，下一节会讲到。params：要传的参数，它是对象形式，在对象里可以传递多个值。具体实例如下：（1）在src/components/Home.vue里面导航中添加如下代码：<router-link :to="{name: 'one', params:{username:'test123'}}">子页面1</

2020-07-03 18:36:20 405

原创 vue-router子路由-路由嵌套

定义：子路由，也叫路由嵌套，采用在children后跟路由数组来实现，数组里和其他配置路由基本相同，需要配置path和component，然后在相应部分添加来展现子页面信息，相当于嵌入iframe。1、src/components/Home.vue（父页面）<template> <div class="hello"> <h1>{{ msg }}</h1>

2020-07-03 18:31:34 3598

原创前端DOM兼容性问题

IE8事件模型和DOM事件模型有何不同？如何处理DOM事件模型与IE8事件模型的兼容性DOM的浏览器兼容性问题：事件模型:DOM：3个阶段:外向内：捕获目标触发内向外：冒泡IE8: 2个阶段没有捕获阶段目标触发内向外：冒泡事件绑定: DOM: elem.addEventListener(“click”,function(){},false) 第三个参数capture: 是否在捕获阶段就提前触发 IE8: elem.attachEvent(“onclick”,funct

2020-07-02 00:14:08 331 2

原创前端面试题

1、ng中ngFor和ngIf的使用注意事项不能在一个元素上同时使用结构行指令，同时使用可以通过ng-container来避免报错2、ng的生态圈(技术栈)中常见技术Angular官方集成的各种模块：FormsModule,HttpClientModule、rxjs。。第三方技术:ionic\NgZorro\AngularMaterial3、ng中如何实现一个服务①通过cli工具创建服务：ng g service my-service②在my-service.service.ts中封装数据

2020-07-02 00:07:16 199 1

原创面试题python

1. 列出python的常见基础数据类型答案：数值（整数浮点数布尔值）字符串、列表、元组、字典、集合2 文件常用操作方法Open/read/readline/readlines/write/close3、异常的处理Try :passexcept 异常类型passfinally:pass4、有哪些常见的标准库和第三方库标准库re time datetime urllib…第三方库numpy Pandas Matplotlib tensorflow beautifulSou

2020-07-02 00:03:06 120

原创前端面试题react

1. ReactJS中渲染根组件的方式以及注意事项答案：ReactDOM.render(A,B);将A渲染到B指定的容器中注意事项:不允许一次渲染多个标签，但是可以放在同一个顶层标签每一个标记都要有对应的结束2. ReactJS中父子组件通信的方式(1) 父与子通信借助于属性往下传值传值:接受值:this.props.myName(2) 子与父通信通过属性传递有参数的方法让子组件调用是传值①定义有参数的方法rcvMsg(msg){}②传递给子组件③子组件来调用Th

2020-07-01 23:58:57 113

原创前端面试题angular

1. Angular中组件之间通信的方式答案：Props down1、调用子组件时通过自定义属性传值2、子组件内部通过Input来接受属性的值Events up在父组件中定义一个有参数的方法调用子组件时，绑定自定义事件和上一步的方法子组件内部通过Output和EventEmitter来触发事件并传值2. Angular的八大组成部分并简单描述答案：Module 是Angular开发中的基本单位，是一个容器，可以包含组件、指令、管道等Components 是可被反复使用的带有特

2020-07-01 23:56:25 531

原创微信小程序面试题（二）

0 小程序onPageScroll方法的使用注意什么由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次。1 小程序视图渲染结束回调使用setData(data, callback)，在callback回调方法中添加后续操作代码2小程序同步API和异步API使用时注意事项像wx.setStorageSync这种以Sync结尾的API为同步API，使用时使用try-catch来查看异常，如果判

2020-06-30 17:37:07 213

干货！！（vue全家桶）

VUE个人项目（mypro.rar）

空空如也