2018年11月_LorneNote

转载 Vue | 12 组件深入-组件注册

内容提要：横线分割的组件命名全局注册组件的方式局部注册组件的方式模块系统：在模块系统中本地注册组件的方式、全局自动创建基本组件的方式这页假设你已经读了组件基础Components Basics，如果你不了解组件先读它组件名称在注册组件的时候我们必须给一个名字，它是组件的第一给参数： Vue.componnet('my-component-name', {/* ... */...

2018-11-28 20:44:11 214

转载 Vue | 11 组件基础

内容提要：组件的复用；组件的组织：全局组件与局部组件使用Props传递数据给子组件组件必须拥有单独的根元素使用事件发送消息给父组件：用一个事件发送一个值、在组件中使用v-model 用Slots内容限制动态组件的使用 DOM模板解析说明先看一个例子 Vue.component('button-counter',{ data: function() { return { ...

2018-11-26 21:46:29 145

原创 Vue | 10 表单输入绑定

内容提要：基本用法：文本、多行文本、复选框、单选框、下拉列表；复选框、单选框、列表选项的值绑定； .lazy .number .trim修饰符。基本用例你能用v-model指令去创建双向的数据绑定在表单的输入框，文本框，和选项元素。它会自动的选择正确的方式去更新元素基于输入的类型。虽然很神奇，v-model是一个语法糖，它在用于输入的事件中更新数据，加上一些边缘情况的特殊处理。 ...

2018-11-22 19:31:34 206

原创 Vue | 09 事件处理

内容提要：事件监听、方法事件的处理、内联方法处理事件修饰符、键修饰符、系统修饰符键（.exact修饰符、鼠标事件修饰符）在HTML中监听事件的好处监听事件当事件被触发的时候我们可以使用v-on指令去监听DOM事件和运行一些JavaScript。例如： &lt;div id="example-1"&gt; &lt;button v-on:click="cou

2018-11-20 19:07:04 172

原创 Vue | 08 列表渲染

内容提要: v-for映射数组与对象的用法 key值的作用与用法数组变化检测 3.1 数组可变方法 3.2 如何替换数组 3.3 数组index/length赋值不能响应变化的处理方法对象无法响应变化的处理如何显示过滤/或排序的结果 v-for与范围、template上使用v-for v-for与v-if的优先级处理 v-for在自定义component上的...

2018-11-19 20:17:28 161

原创 Vue | 07 条件渲染

v-if的用法详解 v-show的用法 v-if与v-show的用法比较 v-if与v-for联合使用的建议 v-if 在字符串模板里，例如 Handlebars，我们像这样写一个条件模块： &lt;!-- Handlebars template --&gt; {{#if ok}} &lt;h1&gt;Yes&lt;/h1&gt; {{/if}} 在Vue我们使用v-if指

2018-11-19 14:08:12 131

原创 Vue | 06 类和样式绑定

内容提要：绑定HTML classes的语法：对象语法、数组语法、在组件上的使用绑定内联样式的语法：对象语法、数组语法、自动加前缀与多个值的使用对于数据绑定的一种常见需要是操作元素的类列表和它的内联样式。由于它们都是属性，我们能用v-bind管理他们。我们仅仅需要使用我们的表达式计算最后的字符串。然而，字符串串联的干扰是令人烦恼和易于出错的。因为这个原因，当v-bind用于class...

2018-11-15 15:28:49 142

原创 Vue | 05 计算属性和监听器

内容提要：计算属性的使用场景及表示方法计算缓存与方法的差异计算属性与监听器属性的使用比较计算属性的Setter表示方法监听器的使用方式计算属性在模板内写表达式是非常方便的，但它们仅仅能做一些简单的操作，把太复杂的表达式放在模板中可能会导致臃肿和难以维护。例如： &amp;lt;div id=&quot;example&quot;&amp;gt; {{

2018-11-13 20:05:33 350

原创 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

原创 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

什么是Vue.js? Vue（读/vjuː/）是一个用于构建用户界面的渐进式框架，不同于其它的大框架，Vue是被设计为自底向上适应的，核心库集中在视图层，容易使用以及和其它的库或已经存在的项目集成。另一方面，当和 modern tooling 和 supporting libraries 结合的时候，Vue完全能够为单网页应用提供支持。如果你是一个有经验的前端开发人员，想要知道Vue和其他库的对...

2018-11-08 13:30:33 160

原创 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

原创 macOS Mojave 新功能汇总

Dark Mode See your Mac in a different light Switch between the light and dark appearance: open System Preferences and click General 打开dark mode，可以获得一个非常良好的沉浸式体验，将焦点集中于你的内容。 Stacks Organize your deskto...

2018-11-04 08:19:42 1337

LorneNote