2020年06月_AyayaOVO

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

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 239

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

1. 微信小程序组件的生命周期答案：生命周期函数-onLoad: 页面加载一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。-onShow: 页面显示每次打开页面都会调用一次。-onReady: 页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。-onHide: 页面隐藏当navigateTo或底部tab切换时调用。-onUnload: 页面卸载2 简单描述下微信小程序的相关文件类型答案：微信小程序项目结构主要

2020-06-30 17:34:59 299

原创前断面试题vue

1. vuex作用？哪种功能场景使用它答案：vue框架中状态管理。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车2. 解释vuex最常用的二种属性答案：分别是 State、 Gettervuex的State特性A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的dataB、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新C、它通过m

2020-06-30 17:32:52 170

原创前端面试题HTML5(二)

1、Html5 视频常用的方法和事件有哪些-controls -是否显示播放控件-autoplay -是否自动播放-loop -是否循环播放-muted -是否是静音播放-poster -在播放视频之前广告-preload -预加载策略auto:预加载一定时长视频与元数据metadata:预加载元数据none:不预加载数据-volume:1 当前音量 (0~1)-playbackRate 回放速率大于1快放小于1慢播-paused:true 当前视频是否处理暂停状

2020-06-28 20:58:10 197

原创前端面试题HTML5(一)

1. sessionStorage和localStorage的区别答案：sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。2. Canvas和SVG的区别是什么答案：canvas绘制2d位图svg绘制2d 矢量图canvas通过j

2020-06-28 20:54:30 197

原创 vue-router页面跳转

一、router-link标签跳转在html标签内使用router-link跳转，相应于超链接a标签，使用方式如下：<router-link to="/">[显示字段]</router-link>to：导航路径使用示例如下：<p>导航： <router-link to="/">首页</router-link> <router-link to="/hello">hello</router-link>

2020-06-27 18:52:59 534 1

原创 vue-router路由属性配置说明

如下代码：export default new Router({ mode: 'history', //路由模式，取值为history与hash base: '/', //打包路径，默认为/，可以修改 routes: [ { path: string, //路径 ccomponent: Component; //页面组件 name: string; // 命名路由-路由名称 components: { [nam

2020-06-27 18:50:31 1790 1

原创 vue-router快速入门

一、简单介绍vue-router是vue官方的路由解决方案，简单易用，中文官方地址如下：vue-router中文手册二、安装vue-router是一个插件包，需要用npm来进行安装的。如果采用vue-cli构建初始化项目会提示安装，也可以自己使用命令安装：npm install vue-router --save三、解读核心文件用vue-cli构建项目之后，在src/router/index.js文件中，看到以下的路由核心文件：// 引入vue框架import Vue from 'vue

2020-06-27 18:47:20 199 1

原创前端面试题webpack(2)

8. Loader和Plugin的不同• loader 加载器Webpack 将一切文件视为模块，但是 webpack 原生是只能解析 js 文件. Loader 的作用是让 webpack 拥有了加载和解析非 JavaScript 文件的能力在 module.rules 中配置，也就是说他作为模块的解析规则而存在，类型为数组• Plugin 插件扩展 webpack 的功能，让 webpack 具有更多的灵活性在 plugins 中单独配置。类型为数组，每一项是一个 plugin 的实例，参数

2020-06-27 18:42:33 277

原创前端面试题webpack(1)

1. 对webpack的了解本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，将项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件核心概念：• 入口(entry)入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始可以通过在 webpack 配置中配置 entry

2020-06-26 08:49:52 441

原创 VUE-CLI项目结构

一、总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握，其余了解即可。文件夹目录如下：每个文件夹目录详细说明如下：二、配置目录文件讲解1、build目录（webpack配置）2、config目录（vue项目配置目录）config文件主要是项目相关配置，常用的就是当端口冲突时配置监听端口，打包输出路径及命名等，目录详情如下：3、node_modules（项目依赖包）node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法

2020-06-26 08:42:26 1658 1

原创 VUE-CLI初始化项目

1、vue init命令讲解用vue init命令来初始化项目，具体使用方法如下：vue init <template-name> <project-name>init：表示要用vue-cli来初始化项目：表示模板名称，vue-cli官方提供的5种模板：webpack：一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。webpack-simple：一个简单webpack+vue-loader的模板，不包含其他功能，让

2020-06-26 08:32:03 923 1

原创 VUE-CLI的安装

首先安装vue-cli的前提是你已经安装了npm，在命令行工具中输入npm -v 命令来检测npm的安装以及版本情况。1、npm安装node下载地址： http://nodejs.cn/download/安装成功提示：npm -v3.10.52、vue-cli安装全局安装vue-cli，命令行：npm install vue-cli -gPS：-g代表全局安装，然后查看版本：vue -V2.9.6PS: 注意这里的V是大写...

2020-06-26 08:27:01 197 1

原创前端面试题vue

1. Vue的双向数据绑定原理是什么？答案：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile解析模板指令，将模板中的变量替换成数

2020-06-25 05:57:23 294 1

原创 VUE插槽slot

1、单个slot单个插槽，别名默认插槽、匿名插槽，不用设置name属性<div id="app"> <children1> <span>12345</span> </children1></div><script type="text/javascript"> var app = new Vue({ el: '#app', components

2020-06-25 05:52:38 213 1

原创 VUE制作模板

1、选项模板<div id="app"></div><script type="text/javascript"> // 实例化 new Vue({ el: '#app', data: { message: 'hello' }, template:`<h1 style="color:red">我是选项模板</h1>` });&l

2020-06-25 05:49:03 319 1

原创 VUE组件基础

1、组件注册（1）全局注册// scriptVue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">全局组件显示： {{ count }}</button>'});new Vue({ el: '#app'})

2020-06-25 05:45:27 193 1

原创 VUE自定义指令

1、调试步骤（1）chrome打开控制器查看（2）控制台输入“app.num=’通过控制台设置的新name’”（3）点击解绑按钮2、参数说明el：指令所绑定的元素，可以用来直接操作DOMbinding：一个对象，包含指令的很多信息vnode:：Vue编译生成的虚拟节点3、生命周期自定义指令有五个生命周期（也叫钩子函数），分别是bind、inserted、update、componentUpdated、unbind，说明如下：bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函

2020-06-24 23:32:46 230 1

原创前端面试题JQuery

1. $的原理答案：$(“选择器”) 是先查找DOM元素，再将DOM元素放入jQuery对象中其中自带优化:如果选择器是#id，则自动调用getElementById如果选择器是.class，则自动调用getElementsByClassName如果选择器是标签名，则自动调用getElementsByTagName否则，其它选择器，都自动调用querySelectorAll()$(DOM元素) 是直接将DOM元素放入jQuery对象中$(“HTML片段”) 是创建一个新元素$(func

2020-06-24 08:23:44 201

原创前端面试题DOM

利用冒泡和不利用冒泡的差别答案：绑定位置不同: 不利用冒泡绑定在目标元素上，利用冒泡绑定在父元素上监听对象的个数不同: 不利用冒泡会反复创建多个监听，利用冒泡始终只有一个监听动态生成的元素: 不利用冒泡无法自动获得事件处理函数，必须反复绑定利用冒泡可让动态添加的子元素自动获得父元素的处理函数，无需反复绑定按HTML查找和按选择器查找的差别答案：返回值不同: 按HTML查找返回动态集合，按选择器查找返回非动态集合效率不同: 按HTML查找效率高，按选择器查找效率低易用性不同: 当条件复杂.

2020-06-24 08:00:34 299

原创 VUE实例事件

vue有实例属性，实例方法，实例事件，前两个跟选项类似，不是很常用。1、$on（在构造器外部添加事件）$on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法app.$on('reduce',function(){ console.log('执行了reduce()'); this.count--;});2、$once（执行一次的事件）app.$once('reduceOnce',function(){ console.log('只执行一次的方法');

2020-06-24 07:56:03 205 1

原创 VUE常用选项

1、computed计算属性：主要是对原数据进行改造输出。改造输出：包括格式化数据（价格，日期），大小写转换，排序，添加符号computed: { newPrice () { return '￥' + this.price + '元'; }}2、methods方法属性：用于绑定html中的事件对应的方法methods:{ add (num) { this.count += num; }}3、watch数据变化监听器：主要用

2020-06-24 07:52:06 200 1

原创 vue生命周期

1. 意义beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用created 在实例创建完成后被立即调用，完成数据观测，属性和方法的运算，初始化事件，$el属性未见beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用，只在虚拟DOM生成HTMLmounted 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html

2020-06-23 15:53:08 181 1

原创 vue内部指令

1、v-if 、v-else、 v-show、v-else-if这几个条件指令用于显示与隐藏各类元素，使用方式如下：（1）v-if<div v-if="isLogin">你好</div>（2）v-else<div v-else>请登录后操作</div>（3）v-show<div v-show="isLogin">你好</div>（4）v-else-if<div v-if="type === 'A'">

2020-06-23 15:09:57 206 1

原创 vue入门

1，安装CDN导入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>NPM安装npm install vueHELLO WORLD<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt

2020-06-23 15:03:42 150 1

原创前端面试题JavaScript高级

判断以下程序的输出结果:var age=100;function test(){ this.age=50; return function(){ return this.age; }}var m=new test();alert(m()); var n=test();alert(n()); 答案：100 50构造函数一旦返回一个对象，就不再创建新对象m获得的是function(){ return this.age; }n=test()，this指向windo.

2020-06-22 16:21:05 494

原创什么是sass

意义Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。sass、scss有什么区别呢？两者都称之为 Sass，不同之处有以下两点：1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号和分号，而 SCSS 的语法书写和我们的

2020-06-22 16:14:00 478

原创面试题前端bootstrap

1.用bootstrap中的栅格做网页布局的基本结构是什么？默认将一行分为多少列？答案：容器中设置行，行内设置列默认将一行分为12个单元格（列）2.如何编写响应式网页？答案：(1)声明viewport元标签(2)所有容器/文字/图片使用相对尺寸(3)流式布局+弹性布局(4)使用CSS3 Media Query技术3.同时监听多个scss文件的命令是什么？答案：node-sass -w scss文件夹 –o css文件夹4.在scss中如何定义混合器以及引用？答案：@mixi

2020-06-22 16:05:59 925

原创前端面试题Bootstrap

1.用bootstrap中的栅格做网页布局的基本结构是什么？默认将一行分为多少列？答案：容器中设置行，行内设置列默认将一行分为12个单元格（列） 2.如何编写响应式网页？答案： (1)声明viewport元标签 (2)所有容器/文字/图片使用相对尺寸 (3)流式布局+弹性布局 (4)使用CSS3 Media Query技术 3.同时监听多个scss文件的命令是什么？答案：node-sass -w scss文件夹 –o css文件夹 4.在scss中如何定义混合器以及引用？答案： @mixin 混

2020-06-22 16:04:06 1142

原创前端面试题AJAX

1.用post方式异步向服务器端提交数据时，需要在发送请求前设置什么？提交的数据放在什么位置？答案：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");数据放在send（）括号中2.什么是异步数据加载？答案：浏览器在向服务器发送请求的时候，不耽误用户在网页上做其它操作，可以同时开启多个任务，并且可以以无刷新的效果来更改页面中的局部内容。3.异步请求数据的步骤分为哪几步？答案：创建异步对象，绑定监听事

2020-06-22 16:02:00 279

原创什么是前端

用HTML/CSS/JavaScript以及更多的框架技术，编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用，通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端工程师在项目中可以与UI设计师和后台程序员合作，实现设计意图并调用后台接口，也可以独立工作完成强用户交互的各类应用。...

2020-06-22 15:58:31 257

原创什么是uni-app

什么是 uni-app1 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。官方的体验例子：2 uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势。uni-app的特点周边生态丰富学习成本低开发成本低跨端数量更多平台能力不受限性能体验更优秀使用规范 * 页面组件我们要遵循Vue 单文件组件 (SFC) 规范 *

2020-06-22 15:51:41 1010

原创前端面试题HTML+CSS3

一．HTML**1. img标记属于什么类型元素？答案：属于行内(inline)元素2.结构标记有哪些？他们与div有什么相同之处，又有什么不同之处？答案：header，nav，section，aside，footer，article都是用来做布局的，但结构标记提高了语义性和可读性3. 行内元素，块元素，空元素有哪些？答案：（1）行内元素：a， span，i，img，b ,s,u，sup,sub,label（2）块元素：div ，dl，dt，dd，ul，li，ol，p，h1，h2，h

2020-06-20 18:44:00 453

原创对webpack的了解

1. 对webpack的了解**本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，将项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件核心概念：• 入口(entry)入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始可以通过在 webpack 配置中配置 entr

2020-06-20 18:40:31 209

干货！！（vue全家桶）

VUE个人项目（mypro.rar）

空空如也