03 2019 档案
摘要：为什么会获取不到里面的值 因为：vue data 里面值都是有这个属性的。这是被vue接管的数据，observer是Vue核心中最重要的一个模块（个人认为），能够实现视图与数据的响应式更新，底层全凭observer的支持。 在初次渲染以后，常规方法对data里面的数据(官方可以相应的操作只有7种，还
阅读全文
摘要：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 点开错误的文件，标注错误的地方是这样的一段代码： 就是module.exports; 百度查不到，google一查果然有。
阅读全文
摘要：1、在组件中data返回数组对象 2、在父级作用域中写入 （1）prop传值 （2）数据写入组件模板中 分析：数据应该写到哪里？ props中声明的数据和组件data函数返回的数据主要区别就是props的来自父级，而data中是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template
阅读全文
摘要：先简单看下效果图：（在原先基础上添加了删除和筛选操作） 代码： 修该：props传值 .
阅读全文
摘要：先看下案例效果：（简单的数量控制及价格运算） 代码： .
阅读全文
摘要：写一个简单的TodoList的更实用（文末有彩蛋）。 一，使用VUE-CLI脚手架快速搭建一个框架 利用VUE-CLI来自动生成我们项目的前端目录及文件，方法： npm install -g vue-cli vue init webpack my-project cd my-project npm
阅读全文
摘要：vue去掉严格开发，即去掉vue-cli安装时的eslint ： 1.vue-cli书写规范（主要是js规范） a、逗号、冒号后面要加空格 b、不能使用双引号，一律使用单引号 webpack的语法检查eslint，即安装项目时我选择了安装eslint 2.那么只需要注释掉 build/webpack
阅读全文
摘要：安装好后也是报这样的错，是因为WebStorm默认使用的是ES5的语法，改成ES6就可以了。 解决方案： 安装好后也是报这样的错，是因为WebStorm默认使用的是ES5的语法，改成ES6就可以了。 解决方案： 安装好后也是报这样的错，是因为WebStorm默认使用的是ES5的语法，改成ES6就可以
阅读全文
摘要：首先看看webstrom内置的vue插件,打上勾,没有这个选项就要自己去下载插件了 如果插件还是没有语法提示,可以用下面的方法,自己添加语法进去搜索 unknown HTML tag attributes ,将下面的指令复制到点开的窗口里v-textv-htmlv-oncev-ifv-showv-e
阅读全文
摘要：vue项目运行控制台输出太多警告信息，我们需要vue 忽略警告，如Expected indentation of 0 spaces but found 2 这种警告都提示，很影响视觉体验！ 解决办法： 找到build/webpack.base.conf.js 文件 找到 第43行 module: {
阅读全文
摘要：webpack-cli没被找到： 在webpack4.0之后，需要全局安装webpack-cli， 在全局安装webpack之后，cnpm i webpack-cli -g 在局部使用webpack时无需再安装了
阅读全文
摘要：问题： 解决： 命令： 以上就可以解决了。 运行命令： .
阅读全文
摘要：配置环境时，npm install一直遇到同一个错误： 检查了下log，发现npm在获取patternfly依赖包元数据的时候总是会遭遇不可预料的文件末端 1486 silly fetchPackageMetaData error for patternfly@>=3.27.2 unexpected
阅读全文
摘要：问题描述执行npm install的时候报错npm ERR! Unexpected end of JSON input while parsing near '...sh_time":141072930277'.如下图： 解决方案直接执行 npm cache clean --force, 如果执行成
阅读全文
摘要：（1）安装webpack 首先创建一个目录，比如demo，然后使用npm初始化配置 接下来填好选项后，完成后会在demo目录下生成一个package.json的文件。输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都
阅读全文
摘要：（1） 前端工程化 近几年来，前端领域飞速发展，前端的工作早已不再是切几张图，写几个页面那么简单，项目比较大时，很可能会多人协同开发，模块化，组件化，CSS预编译等技术也被广泛的使用。前端自动化（半自动化）工程已经成为现在的主流。前端工程化主要解决一下问题 Javascript、CSS 代码的合并和
阅读全文
摘要：1、package.json是什么？ 什么是Node.js的模块（Module）？在Node.js中，模块是一个库或框架，也是一个Node.js项目。Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json。 通
阅读全文
摘要：（1）问题描述 使用vue脚手架vue-cli搭建好项目架构后，在packages.json文件里，加入注释（如下所示）。接下来，运行npm run dev命令后出现报错 （2）问题解析 ①记得json的注释和js一样,所以要么package.json不是完全的json格式,要么就是npm无法识别中
阅读全文
摘要：很多人在玩完了官方文档的小例子之后，又不知道如何下手了。所以我这边帮大家把断层补上。大家首先要把vue的基本语法都熟悉了，然后再来这边学习。 有了前面webpack的铺垫，我们直接从vue的工程化开始入手，这也是vue的真正玩法。 （1）首先，我们将盘符切到d盘，打开命令行，输入： npm inst
阅读全文
摘要：一、什么 是脚手架工具vue-cli? 类似于工人手里面的脚手架一样，帮助工人搭架子用，同样的vue脚手架工具也是帮助我们更好更快速的开发代码的工具 二、vue-cli能做什么？ 三、vue-cli安装 前提条件: Node.js (>=4.x, 6.x preferred), npm versio
阅读全文
摘要：Firebug是网页开发的利器，能够极大地提升工作效率。 但是，它不太容易上手。我曾经翻译过一篇《Firebug入门指南》，介绍了一些基本用法。今天，继续介绍它的高级用法。 Firebug控制台详解 出处：http://www.ruanyifeng.com/blog/2011/03/firebug_
阅读全文
摘要：（1）概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 Jav
阅读全文
摘要：vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。 生命周期探究 对于执行顺序和什么时候执行，看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。 create 和 mounted 相关 咱们在chrome浏览器里打开，F12看console
阅读全文
摘要：（1）访问元素&组件 ①访问根实例 在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。例如，在这个根实例中： 所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。 案例demo： 计算属性VS方法： 可以将同一函数定义为一个方法而不是一个计算属性。两
阅读全文
摘要：（1）在动态组件上使用keep-alive 之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件。接下来简单回顾下 <component>元素是vue 里面的一个内置组件。在里面使用 v-bind: is，可以实现动态组件的效果。 结果：点击按钮时完成切换 当在这些组件之间切换的时候，你有时
阅读全文
摘要：（1）插槽内容 Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。 在父级组件里可以这样写 然后在 <navigation-link> 组件模板中： new Vue({ el:'.slot_are
阅读全文
摘要：首先简单回顾下组件事件及组件的复用 demo1：按钮事件 demo2：监听子组件事件 在开发 <event-area> 组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个可访问性的功能来放大博文的字号，同时让页面的其它部分保持默认的字号。在其父组件中，可以通过添加一个 blo
阅读全文
摘要：这里做个简单的拓展，之前做vue组件时，经常用到拼接字符串，换行时用到\，既费时又麻烦。这里介绍个ES6字符串模板方法 旧版拼接（各种换行拼接） 新版方法（里面直接换行，不用拼接） 输入`方式：CapsLk + ~，即可输出` .
阅读全文
摘要：（1）组件名 在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了： 该组件名就是 Vue.component 的第一个参数。你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，强烈推荐遵循 W3C
阅读全文
摘要：（1）基本示例 Vue组件示例 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用： 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项
阅读全文
摘要：【一】基础用法 用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理
阅读全文
摘要：（1）事件监听 v-on 指令监听 DOM 事件，并在触发时运行JS代码 案例2：计算按钮点击次数 监听事件 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。如下所示，调用add_num方法 解
阅读全文
摘要：Object函数提供了一个叫做assign的函数，用来合并多个对象。 Object.assign(...)； 你可以传递多个对象给该函数，这些对象中的自有且可枚举的属性，会被拷贝给第一个对象。 该方法会修改传入的第一个对象，所以要小心这种改变，由于，函数会在最后return这第一个对象， 你可以传一
阅读全文
摘要：定义：接收一个或两个参数，它可以创建一个由当前数组中的一项或多项组成的新数组，注意是新数组哦~ 也就是说它不会修改原来数组的值。 用法：slice( para1 ),会截取从para1开始的到原数组最后的部分； slice（para1,para2）会截取原数组的从para1开始的para2-para
阅读全文
摘要：filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。 和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。 （1）筛选过滤
阅读全文
摘要：首先简单回顾下v-for‘指令 （1）v-for指令 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-
阅读全文
摘要：（1）v-if条件渲染 v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 可以用 v-else 添加一个“else 块”： ①表达式 ②属性值 ③在 <template> 元素上使用 v-if 条件渲染分组（待验证） 因为 v-if 是一个指令，
阅读全文
摘要：【一】绑定HTML Class （1）对象语法 ①普通绑定class 此时会发现class类名为show_area ②内联绑定数据对象 我们可以传给 v-bind:class 一个对象，以动态地切换 class： 上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActi
阅读全文
摘要：方案1： JavaScript reverse() 方法：颠倒数组中元素的顺序 reverse方法用于颠倒数组元素顺序，无法直接作用于字符串，所以需要先将字符串拆分为数组，再进行处理。 方案2： charAt() 方法可返回指定位置的字符。 （3）拓展 charAt() indexOf() stri
阅读全文
摘要：【一】计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： 在这个地方，模板不再是简单的声明式逻辑。必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。想要在模板中多次引用此处的翻转字符串时，就会更加难以处
阅读全文
摘要：Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智
阅读全文
摘要：FFC(Flexible Formatting Context) CSS3引入了一种新的布局模型——flex布局(之前有文章介绍过)。flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布
阅读全文
摘要：Web页面的布局，我们常见的主要有“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等，在众多布局方法中，大家最为熟悉的就是浮动布局和网格布局
阅读全文
摘要：IFC布局规则: 在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始 这些盒之间的水平margin，border和padding都有效 盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐 在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含
阅读全文
摘要：BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本
阅读全文
摘要：ES6可以使用“箭头”（=>）定义函数，注意是函数，不要使用这种方式定义类（构造器）。 一、语法 基础语法 高级语法 实例 1. 具有一个参数的简单函数 2. 没有参数的需要用在箭头前加上小括号 3. 多个参数需要用到小括号，参数间逗号间隔，例如两个数字相加 4. 函数体多条语句需要用到大括号 5.
阅读全文
摘要：（1）数据和方法 ①响应式双向绑定 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性
阅读全文
摘要：【方案1】 错误如下： npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! travel@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.co
阅读全文
摘要：今天用cmd安装个库,结果发现node不是内部命令，检查后发现上次重装nodejs换了个安装位置，path环境变量忘改了. 找到变量值中node的安装地址,比如C:develop\nodejs,如果不是这个地址改成现在新的安装的地址,然后保存,重新打开cmd,输入 node -v 查看版本号,就会发
阅读全文
摘要：node.js简介 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。 以上是官网上的介绍。初步尝试使用node.j
阅读全文
摘要：（1）声明式渲染 Vue.js 的核心是采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： ①文本 现在已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打
阅读全文
摘要：【一】安装node.js 1、windows下的NodeJS安装（版本差别还是挺大的，这里安装8.0以上的），只需要登陆官网（http://nodejs.org/），便可以看到截图中红色框的，直接点击就会下载了。 2、安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直
阅读全文
摘要：1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。 2.第一轮的时候最后一个元素应该是最大的一个。 3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。
阅读全文
摘要：事件的节流（throttle）与防抖（debounce） 有些浏览器事件可以在短时间内快速触发多次，比如调整窗口大小或向下滚动页面。例如，监听页面窗口滚动事件，并且用户持续快速地向下滚动页面，那么滚动事件可能在 3 秒内触发数千次，这可能会导致一些严重的性能问题。 如果在面试中讨论构建应用程序，出现
阅读全文
摘要：最近很多前端的朋友去面试被问到let和var的区别，其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别。我简单总结一下，以便各位以后面试中使用。 ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约
阅读全文
