![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Frontend technology
文章平均质量分 82
LorneNote
程序员,徜徉在技术海洋中的漫游者、探索者与实践者。
展开
-
web-project-platform.js-not-found
Web Project Set Up | Platform.js 无法下载构建环境:macOS 10.15.7vs code 1.60.2报错:PhantomJS not found on PATH下载时会提示:saving to …/var/folders/…/ phantomjs-2.1.1-macosx.zip重点是:var/folders这个文件在哪里?其实这是个隐藏文件,在磁盘的根目录,和Library、Applications 文件夹在同一层次。需要先显示隐藏文件,然后原创 2021-10-24 19:50:26 · 194 阅读 · 0 评论 -
JavaScript 原语
在JavaScript,一个原语(primitive–原语值,原语数据类型)是一个数据,不是一个对象并且没有方法。有七种原语数据类型:stringnumberbigintbooleannullundefinedsymbol一般,原语表现为语言实现的最底层。所有的原语是不可改变的(immutable)。这里面不要混淆一个原语本身和一个被分配类原语值的变量。一个变量可以重新分配一...原创 2020-01-03 13:52:44 · 571 阅读 · 0 评论 -
极简Webpack | 手写打包器
极简Webpack | 手写打包器Webpack是现代JavaScript应用的静态模打包器。它能够内建一个被称为dependency graph的依赖关系图并生成一个或多个包。作为前端开发者,我们经常和它打交道,理解它如何工作可以使我们更好的处理我们的代码。今天我们通过一个简化版的模块打包器来理解一些它的底层逻辑。模块打包器摘要步骤官网给了我们一个简化版的模块打包器的例子,大体上分为三个步...原创 2019-12-29 23:48:47 · 244 阅读 · 0 评论 -
nvm & npm 使用教程
nvm这里推荐使用nvm进行node的版本管理,进行多版本切换比较方便。What | 是什么node version manager – node版本管理工具,可以同时切换node的多个版本在本地运行。How | 如何使用1.安装nvm以curl为例,打开终端,复制粘贴如下命令后,按回车键等待安装完成即可。curl -o- https://raw.githubusercontent....原创 2019-11-23 14:26:45 · 4587 阅读 · 0 评论 -
Vue | 26 工具 - 单元测试
主要内容:简单的断言写可测试的组件断言的异步更新Vue CLI已经为单元测试构建了操作项,使用Jest或Mocha开箱即用。我们也提供了官方的单元测试库Vue Test Utils,为自定义配置提供了更为细节的指导。简单的断言你不必为了组件的可测试性提供任何特殊操作,导出原生的操作即可:<template> <span>{{ message }}...转载 2019-01-17 19:09:55 · 186 阅读 · 0 评论 -
Vue | 24 可用性&组合 - 过滤器
Vue.js允许你去定义过滤器,可用于一些常见的文本格式化。过滤器在两个地方可以使用:双花括号插值和v-bind 表达式(在2.1.0+被支持)。过滤器应该被加到JavaScript表达式的末尾,由管道符号表示:<!-- 在双花括号内 -->{{ message | capitalize}}<!-- 在 v-bind --><div v-bind:id="r..转载 2019-01-11 20:25:36 · 179 阅读 · 0 评论 -
Vue | 23 可用性&组合 - 插件
内容提要:使用一个插件如何写一个插件插件常常为Vue添加全局级功能。插件没有严格定义的作用域 - 通常有几种类型的插件:添加一些全局的方法或属性。例如: vue-custom-element添加一个或多个全局资源:指令/过滤器/过渡 等等. 例如:vue-touch通过全局mixin添加一些全局组件项。例如。vue-router添加一些Vue实例方法,通过把他们添加到Vue...转载 2019-01-10 19:42:49 · 175 阅读 · 0 评论 -
Vue | 20 可复用性&组合-混入
内容提要:基础的混入方式操作项的合并全局的混入方式自定义操作项合并策略混入是一种非常灵活的分发Vue组件中可复用的功能模块的方式。一个混入对象能包含任何组件操作项。当一个组件使用一个混入对象的时候,在混入对象的所有操作项被‘混合’进组件自己的操作项。例如:// 定义一个混入对象var myMixin = { created: function () { ...转载 2018-12-24 18:55:39 · 274 阅读 · 0 评论 -
Vue | 18 过渡&动画-进入/离开&列表过渡
内容提要:单个元素或组件的过渡: 过渡类、CSS过渡、CSS动画、自定义过渡类、动画和过渡在一起使用、声明过渡持续时间、JavaScript钩子初始渲染的过渡元素间的过渡组件间的过渡列表的过渡:列表进入/离开过渡,列表项移动过渡,交错列表过渡可复用的过渡动态的过渡概览当项目从DOM插入、更新或删除的时候我们提供了多种方式去使用过渡效果。这包含以下工具:使用CSS过渡和...转载 2018-12-18 20:15:13 · 1400 阅读 · 0 评论 -
Vue | 27 工具 - TypeScript 支持
主要内容:JavaScript在官方的声明及推荐配置创建工程及编码的开发工具推荐基本用例演示基于类风格的Vue组件插件使用中的参数类型注释返回类型Vue CLI提供了构建 TypeScript工具支持。在Vue的下一个主要版本(3.x)我们也计划更多的提供我们对TypeScript的支持,使用基于类组件的API和TSX支持在NPM包的官方声明一个静态的系统能阻止许多潜...转载 2019-01-19 08:58:02 · 282 阅读 · 0 评论 -
Vue | 22 可复用性&组合-渲染函数 & JSX
内容提要:渲染函数基本用法节点、树和虚拟DOMcreateElement参数详解使用普通的JavaScript代替模板特性JSX插件介绍函数式组件的用法:传递属性和事件给子元素或子组件,slots() vs children模板编译的demo演示基础在大部分情况下我们推荐使用template去构建HTML页面。然而在某些情况下,你需要JavaScript的全部编程能力。这...转载 2019-01-08 20:56:04 · 575 阅读 · 0 评论 -
Vue | 29 规模化 - 路由
官方路由对于大多数单页面应用,推荐使用官方支持的vue-router library,对于更多的细节,查看vue-router的文档。从零开始简单的路由如果你仅仅需要一个非常简单的路由,但不需要包含一个完整功能的路由库,你可以像这样动态渲染页面级别的组件:const NotFound = { template: '<p>Page Not found</p>' }c...转载 2019-01-24 17:35:00 · 568 阅读 · 0 评论 -
Vue | 30 规模化 - 状态管理
类Flux官方实现由于多个状态分散在不同的组件和组件直接的交互中,大型应用常常变得复杂。为了解决这个问题,Vue提供了vuex:我们有受到Elm启发的状态管理库。它甚至集成进了vue-devtools,无需配置即可进行时光旅行调试。React 开发者参考以下信息如果你来自React开发者,你可能想知道vuex和redux的差异,Redux是Flux生态中最流行的实现。Redux事实上无法感知...转载 2019-01-24 19:39:05 · 173 阅读 · 0 评论 -
Vue | 28 工具 - 产品部署
主要内容:打开生产模式的几种配置方式预编译模板提取组件CSS的方式追踪运行时错误如果你使用Vue CLI以下大部分建议是默认可用的。如果你使用的是自定义的构建设置时,这章才是相关的。打开生产模式在开发阶段,Vue对于常见的错误和陷阱提供了许多警告来提醒你。然而,这些警告在生产环境变得没有用了,并且增加了app的尺寸。另外,这些警告检查所产生的时间花费也是应该在生产环境避免...转载 2019-01-20 08:59:46 · 254 阅读 · 0 评论 -
Vue | 31 规模化 - 服务端渲染
完整的服务端渲染指南我们为在服务端渲染Vue应用创建了一个完整的指导。对于那些已经熟悉Vue客户端开发、服务端Node.js开发和webpack的人来说,很适合阅读这份更深入的指南。请移步ssr.vuejs.org。Nuxt.js正确配置可用于生产环境的服务器渲染应用可能是相当复杂的,幸运的是,有一个非常好的社区项目使这一切变的容易:Nuxt.js。Nuxt.js是一个更高层的框架构建在Vu...转载 2019-01-25 19:05:06 · 143 阅读 · 0 评论 -
Vue | 32 内部 - 深入响应式原理
主要内容:改变是如何被追踪到的改变检测的一些说明及声明属性的方式声明响应式属性的形式及原因异步更新队列的方式及如何在nextTick下手动更新数据现在是时候深入研究一下了!Vue最独特的功能之一就是非侵入式的响应系统。模型仅仅是纯JavaScript对象。当你修改他们,视图更新。它使状态管理更加简单直观,然而理解他们是如何工作的以避免一些常见的陷阱。在这章,我们将深入研究Vue的...转载 2019-01-26 07:47:12 · 177 阅读 · 0 评论 -
Vue | 25 工具 - 单文件组件
内容提要:单文件组件的意义关于新手和高级用户如何使用单文件组件的建议介绍在一些Vue项目中,全局组件将使用Vue.component定义,而后通过new Vue({ el: '#container' })在页面内找到一个容器元素。这在小型到中型的项目中可以完美工作,JavaScript仅仅用于改善某些特定的视图,然而在一些复杂的项目中,或当你的前端完全通过JavaScript驱动...转载 2019-01-16 19:11:28 · 289 阅读 · 0 评论 -
Vue | 21 可复用性&组合-自定义指令
内容提要:自定义指令基本用法介绍自定义指令内部包含哪些钩子函数指令钩子内部传递哪些元素值自定义指令函数的缩略写法用例在JavaScript对象中传递多个字面值介绍除了在核心附带的默认的指令集合(v-model和v-show)外,Vue也允许你注册自定义指令。注意在Vue 2.0,代码重用和抽象的主要形式是组件-然而,可能某些情况下你可能需要针对原生元素进行一些底层的DOM访问...转载 2018-12-28 22:13:16 · 197 阅读 · 0 评论 -
Vue | 17 组件深入-处理边界情况
内容提要:元素和组件的访问:根实例、父组件实例、子组件实例和子元素的访问方式以及依赖注入程式化事件监听器循环应用的产出原因及解决方式使用inline Templates、X-Templates替代模板定义数据更新的控制:强制更新和加载静态内容的方式这页假设你已经读了基本组件 Components Basics,如果你不了解组件知识,首先读它。这页记录了所有和处理边界情况...转载 2018-12-11 19:38:25 · 376 阅读 · 0 评论 -
Vue | 04 模板语法
内容提要:如何在HTML中插入值(包括插入纯文本、生成原生HTML、属性绑定v-bind、JavaScript表达式的使用)指令(指令的表示方式、参数与修饰符的含义、写法、用法)速记(速记的意义、使用场景、v-bind和v-on速记的写法)Vue.js使用基于HTML的模板语法,该模板允许你将呈现的DOM绑定到Vue实例的数据之下。所有的Vue.js模板都对HTML有效,能够被遵守H...原创 2018-11-10 20:56:08 · 164 阅读 · 0 评论 -
Vue | 01 安装
对于兼容性解释Vue不支持IE8和以下的浏览器,因为它所使用的ECMAScript 5的特性在IE8是不可调的,然而它支持所有兼容ECMAScript 5的浏览器。Vue 开发工具Vue推荐在浏览器中使用 Vue Devtools,可以使你检查和调试Vue界面更加友好。如何在Chrome中安装Vue Devtools下载链接:Get the Chrome Extension (bet...原创 2018-11-06 01:11:04 · 166 阅读 · 0 评论 -
Vue | 02 入门
什么是Vue.js?Vue(读/vjuː/)是一个用于构建用户界面的渐进式框架,不同于其它的大框架,Vue是被设计为自底向上适应的,核心库集中在视图层,容易使用以及和其它的库或已经存在的项目集成。另一方面,当和 modern tooling 和 supporting libraries 结合的时候,Vue完全能够为单网页应用提供支持。如果你是一个有经验的前端开发人员,想要知道Vue和其他库的对...原创 2018-11-08 13:30:33 · 160 阅读 · 0 评论 -
Vue | 05 计算属性和监听器
内容提要:计算属性的使用场景及表示方法计算缓存与方法的差异计算属性与监听器属性的使用比较计算属性的Setter表示方法监听器的使用方式计算属性在模板内写表达式是非常方便的,但它们仅仅能做一些简单的操作,把太复杂的表达式放在模板中可能会导致臃肿和难以维护。例如:<div id="example"> {{原创 2018-11-13 20:05:33 · 350 阅读 · 0 评论 -
Vue | 06 类和样式绑定
内容提要:绑定HTML classes的语法:对象语法、数组语法、在组件上的使用绑定内联样式的语法:对象语法、数组语法、自动加前缀与多个值的使用对于数据绑定的一种常见需要是操作元素的类列表和它的内联样式。由于它们都是属性,我们能用v-bind管理他们。我们仅仅需要使用我们的表达式计算最后的字符串。然而,字符串串联的干扰是令人烦恼和易于出错的。因为这个原因,当v-bind用于class...原创 2018-11-15 15:28:49 · 142 阅读 · 0 评论 -
Vue | 09 事件处理
内容提要:事件监听、方法事件的处理、内联方法处理事件修饰符、键修饰符、系统修饰符键(.exact修饰符、鼠标事件修饰符)在HTML中监听事件的好处监听事件当事件被触发的时候我们可以使用v-on指令去监听DOM事件和运行一些JavaScript。例如:<div id="example-1"> <button v-on:click="cou原创 2018-11-20 19:07:04 · 172 阅读 · 0 评论 -
Vue | 07 条件渲染
v-if的用法详解v-show的用法v-if与v-show的用法比较v-if与v-for联合使用的建议v-if在字符串模板里,例如 Handlebars,我们像这样写一个条件模块:<!-- Handlebars template -->{{#if ok}}<h1>Yes</h1>{{/if}}在Vue我们使用v-if指原创 2018-11-19 14:08:12 · 131 阅读 · 0 评论 -
Vue | 08 列表渲染
内容提要:v-for映射数组与对象的用法key值的作用与用法数组变化检测3.1 数组可变方法3.2 如何替换数组3.3 数组index/length赋值不能响应变化的处理方法对象无法响应变化的处理如何显示过滤/或排序的结果v-for与范围、template上使用v-forv-for与v-if的优先级处理v-for在自定义component上的...原创 2018-11-19 20:17:28 · 161 阅读 · 0 评论 -
Vue | 10 表单输入绑定
内容提要:基本用法:文本、多行文本、复选框、单选框、下拉列表;复选框、单选框、列表选项的值绑定;.lazy .number .trim修饰符。基本用例你能用v-model指令去创建双向的数据绑定在表单的输入框,文本框,和选项元素。它会自动的选择正确的方式去更新元素基于输入的类型。虽然很神奇,v-model是一个语法糖,它在用于输入的事件中更新数据,加上一些边缘情况的特殊处理。...原创 2018-11-22 19:31:34 · 205 阅读 · 0 评论 -
Vue | 11 组件基础
内容提要:组件的复用;组件的组织:全局组件与局部组件使用Props传递数据给子组件组件必须拥有单独的根元素使用事件发送消息给父组件:用一个事件发送一个值、在组件中使用v-model用Slots内容限制动态组件的使用DOM模板解析说明先看一个例子Vue.component('button-counter',{data: function() { return { ...转载 2018-11-26 21:46:29 · 145 阅读 · 0 评论 -
Vue | 14 组件深入-自定义事件
内容提要:事件名称命名注意事项自定义组件v-model的不同用法为组件绑定本地事件.sync修饰符的用法这页假定你已经阅读了组件基础Components Basics,如果你是组件新手请先阅读它。事件名称不像组件和props,事件名称不存在自动大小写转换。相反,事件被发出的名字必须与被监听的名字完全一致,例如,如果发送了一个 cameCased的事件名称:this.$e...转载 2018-12-04 20:24:46 · 534 阅读 · 0 评论 -
Vue | 12 组件深入-组件注册
内容提要:横线分割的组件命名全局注册组件的方式局部注册组件的方式模块系统:在模块系统中本地注册组件的方式、全局自动创建基本组件的方式这页假设你已经读了组件基础Components Basics,如果你不了解组件先读它组件名称在注册组件的时候我们必须给一个名字,它是组件的第一给参数:Vue.componnet('my-component-name', {/* ... */...转载 2018-11-28 20:44:11 · 213 阅读 · 0 评论 -
Vue | 16 组件深入-动态的&异步的组件
内容提要:避免内容更新—keep-alive与动态组件异步加载组件的处理方式这页假定你已经了解组件基础 Components Basics,如果你不了解组件请先读它。keep-alive与动态组件之前,我们使用is属性去切换组件在标签栏界面:<component v-bind:is="currentTabComponent"></component>...转载 2018-12-07 20:11:35 · 323 阅读 · 0 评论 -
Vue | 13 组件深入-Props
这页假设你已经读了Components Basics,如果你不了解组件首先读它。Prop大小写(cameCase vs kebab-case)HTML属性名是大小写不敏感的,所以浏览器将解释任何大小字符作为小写字母。那意味着当你在DOM模板里使用的时候,camelCased(驼峰命名法) prop 名字会用它的等价物kebab-cased(以连字符分隔):Vue.component('b...转载 2018-12-03 19:40:43 · 152 阅读 · 0 评论 -
Vue | 15 组件深入-插槽
内容提要:插槽的内容命名的插槽默认插槽内容插槽的编译范围作用域插槽解构slot-scope这页假定你已经阅读组件基础( Components Basics),如果你不了解组件,请先阅读它。插槽内容Vue实现了一套内容分发的API。该API基于当前Web组件规范草案 Web Components spec draft。使用slot元素去作为内容分发的出口。这允许你去像...转载 2018-12-06 13:06:23 · 204 阅读 · 0 评论 -
Vue | 19 过渡&动画-状态过渡
内容提要:动画的状态与监听器动态状态过渡在组件内组织过渡为设计赋予生命Vue的过渡系统提供了许多简单的方式去实现动画的进入、离开和列表的动效。但是怎么样对你的数据本身进行动画处理呢?例如:数字和计算颜色显示可缩放的矢量图形节点的位置元素的大小和其他属性所有这些或者被存储为原始数据或者被转化为数字。一旦我们这样做了,我们可以使用第三方库去把这些改变的状态做成动画,再结...转载 2018-12-21 19:31:17 · 620 阅读 · 0 评论 -
Vue | 03 实例
创建一个Vue实例每一个Vue应用都需要从使用Vue函数创建一个Vue实例开始:var vm = new Vue({ //options})虽然和 MVVM pattern 不太相关,Vue的设计部分来自于它的灵感,例如习惯上,我们常常使用vm(ViewModel的简写)代指一个Vue实例。在创建了一个Vue实例的时候,在里面写我们的操作。这个指南会告诉我们怎样使用这些操作去实...原创 2018-11-09 21:08:51 · 232 阅读 · 0 评论