![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
JustinNeil
年少是你未醒的梦话,风华是燃尽的彼岸花
展开
-
Node-sass安装失败的坑
Node-sass安装失败的坑问题描述在引入Vue项目,执行npm run dev时报错,显示node-sass安装失败,一般来说是越少了某项依赖环境引起的解决方案根据报错信息找到缺少的依赖并配好环境,后执行以下操作npm install -g node-gypnpm install --global --production windows-build-toolsnpm insta...原创 2019-09-24 21:18:52 · 560 阅读 · 0 评论 -
Prop
PropProp的大小写(camelCase vs kebab-case)Prop类型传递静态或动态prop传入一个数字传入一个布尔值传入一个数组传入一个对象的所有属性单项数据流Prop验证类型检查非Prop的特性替换/合并已有的特性禁用特性继承Prop的大小写(camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。...原创 2019-08-21 14:00:31 · 630 阅读 · 0 评论 -
Vue组件注册
Vue组件注册组件名组件名大小写使用 kebab-case使用 PascalCase全局注册局部注册模块系统在模块系统中局部注册基础组件的自动化全局注册组件名 在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们可以看到:Vue.component('my-component-name', { /* ... */ })该组件名就是 Vue.component 的第一...原创 2019-08-21 11:41:33 · 96 阅读 · 0 评论 -
Vue特殊特性
Vue特殊特性keyrefisslot 废弃slot-scope 废弃scope 移除key预期:number | stringkey 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序...原创 2019-08-25 19:06:34 · 247 阅读 · 0 评论 -
Vue组件基础
组件基础基本示例组件的复用组件的组织通过prop向子组件传递数据单个根元素监听子组件事件使用事件抛出一个值在组件上使用 v-model通过插槽分发内容动态组件解析DOM模板时的注意事项基本示例这里有一个 Vue 组件的示例:// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () {...原创 2019-08-21 11:05:23 · 137 阅读 · 0 评论 -
Vue表单输入绑定修饰符
Vue表单输入绑定修饰符.lazy.number.trim.lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" >.number...原创 2019-08-21 09:58:38 · 253 阅读 · 0 评论 -
Vue指令
Vue指令v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-slotv-prev-cloakv-oncev-text预期:string详细:更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。示例:<span v-text="msg"...原创 2019-08-25 16:22:00 · 184 阅读 · 0 评论 -
Vue实例方法/生命周期
Vue实例方法/声明周期vm.$mount( [elementOrSelector] )vm.$forceUpdate()vm.$nextTick( [callback] )vm.$destroy()vm.$mount( [elementOrSelector] )参数:{Element | string} [elementOrSelector],{boolean} [hydrating]返...原创 2019-08-25 13:56:41 · 172 阅读 · 0 评论 -
Vue值绑定
值绑定概述复选框单选按钮选择框的选项概述 对于单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值):<!-- 当选中时,`picked` 为字符串 "a" --><input type="radio" v-model="picked" value="a"><!-- `toggle` 为 true 或 fa...原创 2019-08-21 09:23:50 · 258 阅读 · 0 评论 -
表单输入绑定基础用法
表单输入绑定综述文本多行文本复选框单选按钮选择框综述 可以使用v-model指令在<input>、<textarea>及select元素中创建双向数据绑定。它会根据控件类型自动选取正确的方式来更新元素。v-model本身只是语法糖。他负责监听事件以及更新数据,并对一些极端情况做一些特殊处理。 v-model会忽略所有表单元素的value、check、selec...原创 2019-08-21 08:44:18 · 215 阅读 · 0 评论 -
Vue实例方法/事件
Vue实例方法/事件vm.$on( event, callback )vm.$once( event, callback )vm.$off( [event, callback] )vm.$emit( eventName, […args] )vm.$on( event, callback )参数:{string | Array<string>} event (数组只在 2.2.0+...原创 2019-08-25 12:42:59 · 168 阅读 · 0 评论 -
Vue实例方法/数据
Vue实例方法/数据vm.$watch( expOrFn, callback, [options] )unwatch()vm.$set( target, propertyName/index, value )vm.$delete( target, propertyName/index )vm.$watch( expOrFn, callback, [options] )参数:{string...原创 2019-08-25 11:38:33 · 182 阅读 · 0 评论 -
Vue实例属性
Vue实例属性vm.$datavm.$propsvm.$elvm.$optionsvm.$parentvm.$rootvm.$childrenvm.$slotsvm.$scopedSlotsvm.$refsvm.$isServervm.$attrsvm.$listenersvm.$data类型:Object详细:Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。...原创 2019-08-25 10:14:15 · 374 阅读 · 0 评论 -
Vue选项/其他
Vue选项/其他namedelimitersfunctionalmodelinheritAttrscommentsname类型:string限制:只有作为组件选项时起作用。详细:允许组件模板递归地调用自身。注意,组件在全局用 Vue.component() 注册时,全局 ID 自动作为组件的 name。指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当...原创 2019-08-25 09:08:35 · 265 阅读 · 0 评论 -
Vue自定义事件
Vue自定义事件事件名自定义组件的v-model将原生事件绑定到组件.sync修饰符事件名 不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:this.$emit('myEvent') 则监听这个名字的 kebab-case 版本是不会有任何效果的:<!-- ...原创 2019-08-21 14:51:01 · 127 阅读 · 0 评论 -
Vue内置组件
Vue内置组件componenttransitiontransition-groupkeep-aliveinclude and excludemaxslotcomponentProps:is - string | ComponentDefinition | ComponentConstructorinline-template - boolean用法:渲染一个“元组件”为动态组件...原创 2019-08-25 19:38:47 · 1252 阅读 · 0 评论 -
Vue自定义指令
自定义指令简介钩子函数钩子函数参数动态指令参数函数简写对象字面量简介 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 当页面加载时,该元素将获得焦点。事实上,只要你在打开这个页面后还没点击过任...原创 2019-08-23 11:44:55 · 234 阅读 · 0 评论 -
使用 JavaScript 代替模板功能
使用JavaScript代替模板功能v-if 和 v-forv-model事件 & 按键修饰符插槽v-if 和 v-for只要在原生的 JavaScript 中可以轻松完成的操作,Vue 的渲染函数就不会提供专有的替代方法。比如,在模板中使用的 v-if 和 v-for:<ul v-if="items.length"> <li v-for="item in it...原创 2019-08-23 14:37:16 · 298 阅读 · 0 评论 -
Vue渲染函数
渲染函数基础节点、树以及虚拟DOM虚拟DOMcreateElement参数深入数据对象完整示例约束基础 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你确实需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。 让我们深入一个简单的例子,这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题:<h1&...原创 2019-08-23 13:39:51 · 3248 阅读 · 2 评论 -
JSX
如果你写了很多 render 函数,可能会觉得下面这样的代码写起来很痛苦:createElement(‘anchored-heading’, {props: {level: 1}}, [createElement(‘span’, ‘Hello’),’ world!’])特别是对应的模板如此简单的情况下: Hello world!这就是为什么会有一个 Babel 插件...原创 2019-08-23 15:48:56 · 230 阅读 · 0 评论 -
Vue可复用的过渡
可复用的过渡 过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件,你需要做的就是将 <transition> 或者 <transition-group> 作为根组件,然后将任何子组件放置在其中就可以了。使用 template 的简单例子:Vue.component('my-special-transition', { template: '\ ...原创 2019-08-22 19:46:48 · 1223 阅读 · 0 评论 -
Vue列表过渡
列表过渡前言列表的进入/离开过渡列表的排序过渡列表的交错过渡前言目前为止,关于过渡我们已经讲到:单个节点同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group> 组件。在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>,它会以一个真实元素呈现...原创 2019-08-22 18:58:45 · 1542 阅读 · 1 评论 -
Vue多个组件的过渡
Vue多个组件的过渡 多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反,我们只需要使用动态组件:<transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component></transition>new Vue({ ...原创 2019-08-22 17:27:10 · 673 阅读 · 0 评论 -
Vue多个元素的过渡
多个元素的过渡 对于原生标签可以使用 v-if/v-else 。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素:<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>Sorry, no items ...原创 2019-08-22 16:22:37 · 1122 阅读 · 0 评论 -
Vue初始渲染过渡
初始渲染的过渡 可以通过 appear 特性设置节点在初始渲染的过渡<transition appear> <!-- ... --></transition> 这里默认和进入/离开过渡一样,同样也可以自定义 CSS 类名。<transition appear appear-class="custom-appear-class"...原创 2019-08-22 14:32:06 · 910 阅读 · 2 评论 -
Vue单元素/组件的过渡
单元素/组件的过渡过渡的类名CSS 过渡CSS 动画自定义过渡的类名同时使用过渡和动画显性的过渡持续时间JavaScript 钩子 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点这里是一个典型的例子:<div id="demo"> ...原创 2019-08-22 14:08:39 · 791 阅读 · 0 评论 -
Vue处理边界情况
处理边界情况访问元素 & 组件访问根实例访问父级组件实例访问子组件实例或子元素依赖注入程序化的事件侦听器循环引用递归组件组件之间的循环引用模板定义的替代品内联模板X-Template控制更新强制更新通过 v-once 创建低开销的静态组件访问元素 & 组件 在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过在一些情况下做这些事情也确实是合适的。...原创 2019-08-21 18:50:32 · 988 阅读 · 0 评论 -
动态组件&异步组件
动态组件&异步组件动态组件在动态组件中使用keep-alive异步组件处理加载状态动态组件在动态组件中使用keep-alive 我们可以在一个多标签的界面中使用 is 特性来切换不同的组件:<component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件...原创 2019-08-21 16:51:58 · 1063 阅读 · 0 评论 -
Vue插槽
插槽新语法插槽内容编译作用域后备内容具名插槽作用域插槽独占默认插槽的缩写语法解构插槽 Prop动态插槽名具名插槽的缩写其他示例废弃了的语法带有 slot 特性的具名插槽带有 slot-scope 特性的作用域插槽新语法 在 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在...原创 2019-08-21 16:03:56 · 465 阅读 · 0 评论 -
Vue选项/组合
选项/组合parentmixinsextendsprovide / injectparent类型:Vue instance详细:指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 ...原创 2019-08-25 08:13:47 · 481 阅读 · 0 评论 -
Vue选项/生命周期钩子
生命周期钩子概述beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivateddeactivatedbeforeDestroydestroyederrorCaptured错误传播规则概述 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周...原创 2019-08-25 07:43:50 · 351 阅读 · 1 评论 -
Vue事件处理
Vue事件处理监听事件事件处理方法内联处理器中的方法事件修饰符按键修饰符监听事件 可以使用v-on监听DOM事件,并在触发时执行一些Javascript代码。v-on可简写为@<div id="example"> <button v-on:click="counter += 1">Add 1</button> <p>The butt...原创 2019-08-20 20:58:38 · 129 阅读 · 0 评论 -
Vue侦听器
侦听器 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。例如:<div id="watch-example"> <p> Ask a yes/no question: <in...原创 2019-08-20 11:05:10 · 414 阅读 · 0 评论 -
Vue计算属性
计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div> 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 messag...原创 2019-08-20 10:28:17 · 211 阅读 · 0 评论 -
Vue过滤器
Vue过滤器 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 ...原创 2019-08-23 18:43:01 · 307 阅读 · 0 评论 -
Vue模板语法
Vue模板语法概述插值文本原始HTML特性JavaScript表达式指令参数动态参数对动态参数的值的约束对动态参数表达式的约束修饰符缩写v-bind 缩写v-on 缩写概述 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。 在底...原创 2019-08-20 08:37:35 · 120 阅读 · 0 评论 -
Vue函数式组件
函数式组件概述向子元素或子组件传递特性和事件slots() 和 children 对比概述 之前创建的锚点标题组件是比较简单,没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法。实际上,它只是一个接受一些 prop 的函数。 在这样的场景下,我们可以将组件标记为 functional,这意味它无状态 (没有响应式数据),也没有实例 (没有 this 上下文)。一个函数式...原创 2019-08-23 17:12:53 · 1082 阅读 · 0 评论 -
Vue实例生命周期
实例生命周期实例生命周期钩子生命周期图示实例生命周期钩子 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。 比如 created 钩子可以用来在一个实例被创建之后执行代码:new Vue({ ...原创 2019-08-19 18:57:03 · 107 阅读 · 0 评论 -
Vue的数据与方法
数据与方法 当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。// 我们的数据对象var data = { a: 1 }// 该对象被加入到一个 Vue 实例中var vm = new Vue({ data: data})// 获得这个实例上的属性// 返回源...原创 2019-08-19 17:25:39 · 226 阅读 · 1 评论 -
Vue实例创建
Vue实例创建 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:var vm = new Vue({ // 选项}) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。 当创建一个 Vue 实例时,你可以传入一个选项对象。这篇教程主要描...原创 2019-08-19 16:56:17 · 762 阅读 · 1 评论