kwame211的博客

1、watch理解：监听器,监听某个数据的变化从而来执行一些操作，当data里面的数据发生变化的时候来执行一下开销较大或异步的操作1、监听值类型(简单类型)数据//在一个vue实例中 new Vue({ el:"#myApp", data:{ num1:1, num2:2 }, methods:{}, watch:{ //这里两个属性.

1.em在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。2.rem这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。参照后面给的demo3.vhvh就是当前屏幕可见高度的1%，

1. 首先是一般的渐变div{ background:linear-greadient(70deg,#0f0 0%, 00f 100%);}比较简单不做过多的解释2. 颜色块渐变 div{ background:linear-gradient(30deg,#00d 60%,#0aa 60%);}这里有一个地方需要我们注意的就是两个渐变的颜色位置要在同一位置，或者后一个渐变的位置小于前一个渐变的位置。至于原因很简...

生命周期 是否获取dom节点 是否可以获取data 是否获取methods beforeCreate 否 否 否 created 否 是 是 beforeMount 否 是 是 mounted 是 是 是 在beforecreate阶段，对浏览器来说，整个渲染流程尚未开始或者说准备开始，对vue来说，实例尚未被初始化，data observer和 event/watcher也还未被调用，在此阶.

要了解css、sacc和scss的关系就要从css预处理器开始说起。什么是css预处理器？css预处理器是用一种专门的语言，进行网页的样式设计，之后在被编译为正常的css文件，以供项目使用。使用css预处理语言的好处：是css更加简洁、方便修改、可读性强、适应新强并且更易于代码的维护。css和sass的关系：sass是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。sass和scs

随着前端开发的不断发展，CSS也逐渐延伸出了很多新的语言，less和Sass就是其中两种，下面我们就一起来看看它们到底有何区别。SASS和LESSSASS（英文全称：Syntactically Awesome Stylesheets）Sass 诞生于 2007 年，使用Ruby 编写，是一种对css的一种扩展提升，增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写，然后编译成css。比如说，sass中可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们

通过注入路由，我们可以在任何组件内通过this.$router访问路由器，也可以通过this.$route访问当前的路由。注入路由，在 mian.js 中引入 路由，并且注入。import router from './router';new Vue({ el: '#app', router, ... mounted() { }})可以理解为：this.$router相当于一个全局的路由对象，包含路由相关的属性、对象 (如 history 对象) 和方...

原因：eslint代码检查到你注册了组件但没有使用，然后就报错了。比如代码：比如Vue中注册了File组件，而实际上却没有使用到：... import File from "../../components/file"; export default { components: {Pagination, File},...此时你可以取消注册即可，当然，有些时候我们并不想要取消，不更改代码，可以有两种解决办法：方法一：修改项目的package.json在pack

action函数的参数setMenustate({commit},value){commit(types.SET_MENUSTATE,value)},action函数可以接收一个与store实例具有相同方法的属性context，这个属性中包括下面几部分：context:{ state, 等同于store.$state，若在模块中则为局部状态 rootState, 等同于store.$state,只存在模块中 ...

let [a, b, c] = [1, 2, 3];console.log(a); // 1console.log(b); // 2console.log(c); // 3对象的解构赋值let { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"把数组当对象解构let {0: x, 2: z} = ['a', 'b', 'c'];console.log(x,z); // a c字符串的..

Chrome V8chrome v8也可以简单的说成v8, 是一个开源的javascript引擎, 它是由谷歌Chromium项目团队开发, 应用在chrome和基于chromium浏览器上. 这个项目由Lars Bak创建. V8引擎的第一个版本发行时间和Chrome的第一个版本发行时间是一样的: 2008年9月2号. 它同样也用在Couchbase, MongoDB和node.js上.V8在执行javascript之前, 会将javascript编译成本地机器代码, 来代替更多的传统技术, 比如

1、定义子组件<template> <div> 子组件: <span>{{childValue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childClick"> </div></template><script> export default

1、定义父组件<template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName="name"></child> </div></template><script> import

.gitignore

下面说下“3 errors and 0 warnings potentially fixable with the --fix option”报错解决方法隐藏.eslintrc.js中的’@vue/standard’

require的基本语法：在导出的文件中定义module.export,导出的对象的类型不予限定（可以是任何类型，字符串，变量，对象，方法），在引入的文件中调用require()方法引入对象即可，换一种说法就是require相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么，对象、数字、字符串、函数……再把require的结果赋值给某个变量,代码实现首先如： 1 2 3 4 5 6

看这个解释有一点抽象，我们就拿被做了无数次示例的add函数，来做一个简单的实现。// 普通的add函数function add(x, y) { return x + y}// Currying后function curryingAdd(x) { return function (y) { return x + y }}add(1, 2) // 3curryingAdd(1)(2) // 3实际上就是把add函数

1、第一种方法：拼接方式:methods：{v_test(id) {//直接调用$router.push 实现携带参数的跳转?this.$router.push({path: `/detail/${id}`,})}对应路由配置：{path:'/detail/:id',name:'detail',component: detail}?获取参数方式：?this.$route.params.id2、第二种方法：params传参 （通过路由属性中的name来确定匹配的路由

Default Parameters（默认参数） in ES6 Template Literals （模板文本）in ES6 Multi-line Strings （多行字符串）in ES6 Destructuring Assignment （解构赋值）in ES6 Enhanced Object Literals （增强的对象文本）in ES6 Arrow Functions （箭头函数）in ES6 Promises in ES6 Block-Scoped Constructs Let a

初始化项目脚手架用的是vue-cli,vite还不太稳定，很多第三方库也存在兼容问题，为了能正常在实际项目中使用，还是选择了vue-cli。如果不是最新的脚手架，就需要重新安装一下了：npm install -g @vue/cli# ORyarn global add @vue/cli创建项目：vue create vue3-ts-template// 选择Manually select features composition-api ([Vue 2] router,

vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。1.安装vue-cli①使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack..

说明此仓库为vue-cli webpack的配置分析，其实只是在源码中加上注释而已。大家查看详细分析，可以从后面提到的入口文件开始查看。分析不包括check-versions.js文件，因为check-versions.js是检测npm和node版本，不涉及webpack，所以就没有对check-versions.js进行分析。同时，也不包括测试部分的代码，该分析只是针对开发和生产环境的webpack配置进行分析。vue-cli 版本2.8.1入口从package.json可以看到开

1、引入Typescriptnpm install vue-class-component vue-property-decorator --savenpm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev vue-class-component：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持ts vue-property-decorat

Vue2.0和Vue3.0的区别

ES6新特性列表下面的表格给出了ES6包含的所有特性，新增特性 关键词 用法 描述 箭头操作符 Arrows v => console.log(v) 类似于部分强类型语言中的lambda表达式 类的支持 Classes - 原生支持类，让javascript的OOP编码更加地道 增强的对象字面量 enhanced object literals - 增强对象字面量 字符串模板 templat...

JS中分为七种内置类型，七种内置类型又分为两大类型：基本类型和对象（Object）。基本类型有七种：null，undefined，boolean，number，string，symbol。其中JS的数字类型是浮点类型的，没有整型。NaN也属于number类型，并且NaN不等于自身。对象（Object）是引用类型，在使用过程中会遇到浅拷贝和深拷贝的问题。...

1.严格模式使用严格模式，可以在函数内部进行较为严格的全局和局部的错误条件检查 严格模式的编译指示，"use strict" 创建全局变量，未声明变量，非严格模式下为创建全局变量；严格模式下为抛出ReferenceError 对变量调用delete操作符，删除变量，非严格模式下为静默失败；严格模式下为抛出ReferenceError 操作对象情况下：a，只读属性赋值会抛出TypeError；b，对不可配置的属性使用delete操作符会抛出TypeError；c，为不可扩展的对象...

首先，这两个都属于js包管理工具，都可以安装包或者模块yarn 是由facebook、google等联合开发推出的区别：npm 下载包的话 比如npm install它是按照包的排序，也就是队列挨个下载，一个下载完成后，再下载另一个yarn是将要下载的包进行同时下载yarn 在下载模块或包时，命令行输出的信息更加简洁npm版本5.0 之后，会自带package.lock.json 文件，该文件主要描述了你项目中安装的包都是哪一个版本，你再进行npm install 的话，会安装指定版本的包。

代码示例Home / Components / Breadcrumb基础用法最基础的用法，通过设置to属性添加链接。<template> <Breadcrumb> <BreadcrumbItem to="/">Home</BreadcrumbItem> <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbIt

<!-- 表单 --><el-form ref="rulesForm" :rules="rules" :model="rules" label-width="200px"><el-form-itemprop="username"><el-inputtype="text"v-model="loginForm.username"autocomplete="off"placeholder="用户名"prefix-...

v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href<!-- 完整语法 --><a v-bind:href="url">123</a><!-- 缩写 --><a :href="url">123</a>v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click<!-- 完整语法 --><a v-on:click="doSometh...

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数const s

ECMAScript 2015开始，在对象初始器中引入了一种更简短定义方法的语法，这是一种把方法名直接赋给函数的简写方式。var obj = { property( parameters… ) {}, *generator( parameters… ) {}, async property( parameters… ) {}, async* generator( parameters… ) {}, // with computed keys: [property]( p.

Symbol标识符Symbol其实就是一种特殊的字符串。用做对象或者数组的key值。并且它是唯一的，有点类此uuid。 varsym=Symbol(); varsym=Symbol("mooshine"); 这个代码用来创建一个Symbol，第二种创建方式中的“mooshine”字符串，只是用作对Symbol的描述，对于创建并没有任何影响。Symbol每次调用都是创建一个新的Symbol，不会出现重复的情况。 var...

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 改数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。1.方法sessionStorage.key(int index) //返回当前 sessionStorage.

this.$el获取Vue实例关联的DOM元素；vue中也是允许进行dom操作的（但是不建议）注意this.$el关联的是真实Dom，所以需要在mounted渲染真实Dom之后才可以使用了this.$refs获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）this.$options获取Vue实例的自定义属性（如this.$options.methods...

普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框等需要配合CSS一起设置。一.做导航，居中<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&...

标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。为什么要清除浮动呢？清除浮动的本质是什么？　　清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。清除浮动的方法：1. 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。..

Layui 分为单页版和iframe版 单页版　　　　通过将单页代码输出到div，不如要完整的html代码。　　　　刷新页面后，依然能够记录上一次的页面。　　　　此种方式不易于调试前端代码。 Iframe版 通过iframe的方式将加载另一个页面。需要完整的html代码，包括js代码。 属性页面后，不能够记录上一次的页面。 此方式需要耗费更多的网络宽带。...

一、W3C对HTML5的需求整体原则：新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash） 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备 开发进程应对公众透明二、什么是HTML:HTML是创建网页的标准标记语言 HTML描述了使用标记的网页结构 HTML元素由标签显示 浏览器不会显示HTML标签，而是使用它们呈现页面的内容三、DOCTYPE声明<!Doctype html&gt.