2017年07月_WinSolstice

原创 21-Vue单文件组件的使用方式介绍

通过之前我们定义组件的方式，就已经感觉很不爽了，尤其是模板的定义，而且样式怎么处理也没有很好的进行规整。 Vue 可以通过 Webpack 等第三方工具实现单文件的开发的方式。当然这里会牵扯到很多 es6 的语法、第三方工具实现前端模块化等很多知识，我们大概看一眼指导 Vue 的组件可以直接写一个文件中，其他地方就可以直接导入这个模块了。 “`

2017-07-28 15:19:02 1577

原创 20-入门之组件化开发

组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。前端组件化确实让大的前端团队更高效的开发前端项目。而作为前端比较流行的框架之一，Vue 的组件化也做的非常彻底，而且有自己的特色。尤其是她单文件组件开发的方式更是非常方便，而且第三方工具支持也非常丰富，社区也非常活跃，第三方组件也呈井喷之势。当然学习和使用 Vue 的组件也是我们的最重要的目标。1. 全局扩展方法Vue.ex

2017-07-25 18:19:50 308

原创 20-Vue 组件

Vue的全局API提供大量的功能，我这里就给大家罗列几个常用的结果* Vue.nextTick*语法： Vue.nextTick( [callback, context] )参数： {Function} [callback]{Object} [context]用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。// 修改数据v

2017-07-24 20:52:24 671

原创 18-Vue实例的全局配置

1.Vue实例的全局配置可以在启动应用之前修改下列属性：silent 类型： boolean默认值： false用法：Vue.config.silent = true//取消 Vue 所有的日志与警告。optionMergeStrategies 类型： { [key: string]: Function }默认值： {}用法： Vue.config.optionMerge

2017-07-24 20:39:58 1853

Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。前面我们已经用了很多次 new Vue({…})的代码，而且Vue初始化的选项都已经用了data、methods、el、computed 等,估计您看到这里时，应该已经都明白了他

2017-07-24 20:37:51 370

原创 16-Vue事件处理

Vue 提供了协助我们为标签绑定事件的方法，当我们可以直接用 DOM 原生的方式去绑定事件，绑定也非常方便，而且能让 viewmodel 更简洁，逻辑更彻底。1. 监听事件的 Vue 处理 Vue 提供了 v-on 指令帮助我们进行事件的绑定，基本的内联事件处理方法：可以用 v-on 指令监听 dom 事件来触发一些 javascript 代码div id="example">

2017-07-24 18:39:38 370

原创 15-Vue 之计算属性

通常我们会在模板中绑定表达式，模板是用来描述视图结构的。如果模板中的表达式存在过多逻辑，模板会变得臃肿不堪，维护变得非常困难。因此为了简化逻辑，当某个属性的值依赖于其他属性的值时，我们可以使用计算属性。1. 什么是计算属性计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的 DOM 部分也会同步自动更新<div id="example"> <inpu

2017-07-22 17:05:00 906

原创 14-Vue自定义指令

在 AngularJs 中，它的指令使用 directive ( name,factor_function)来实现：angular.module( 'myapp' ,[]).directive (myDirective,function (){ return{ template : '', restrict: '',

2017-07-22 12:27:32 534

原创 13-Vue指令之其他

v-pre编译时跳过当前元素和它的子元素，可以用来显示原始的 mustache 标签，跳过大量没有指令的节点会加快编译v-cloak这个指令保持在元素上直到关联实例结束编译。当和 css 规则如 [v-clock] { diaplay:none} 一起使用时，这个指令可以隐藏为编译的 mustache 标签直到实例准备完毕，否则在渲染页面时，用户有可能会先看到 mustache 标签，然后看

2017-07-21 20:33:39 427

原创 12-Vue指令之v-ref

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）只有当它插入文档后，才会变成真实的 DOM Vue 中所有的 DOM 变动都现在虚拟 DOM 上发生，然后在将实际变动发生的部分，反映在真实的 DOM 中，这种算法叫 DOM diff 可以极大的提高网页的性能但是，有时需要从组建获取真实的 DOM 节点，这时就要用到 ref 属性

2017-07-21 20:08:26 6002

原创 11-Vue指令之V-on

v-on 指令用于绑定事件监听器。事件类型由参数指定，表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略使用在普通元素上时，只能监听原生 DOM 事件；使用在自定义元素组件上时，也可以监听子组件触发的自定义事件在监听原生 DOM 事件时，如果只定义一个参数，DOM event 为事件的唯一参数；如果在内联语句处理器中访问原生 DOM 事件，则可以用特殊变量 $event 把它传

2017-07-21 19:48:34 476

原创 10-Vue指令之V-bind

v-bind 指令用于响应更新 html ，将一个或多个 attribute 或者一个组件 prop 动态绑定到表达式，v-bind 可以简写：<img v-bind：src="imageSrc"><img ：src="imageSrc">在绑定 class 或者 style 时。支持其他类型的值，如数组或对象，如：<div id=

2017-07-21 19:12:35 516

原创 9-Vue指令之V-text/V-html

1. v-text + v-text 属性可以更新元素的 textContent . + 在内部， {{ Mustache }} 插值也被编译为 textNode 的一个 v-text 指令 <div id="app"> <span v-text = 'msg'></span><br/> <span> {{ msg }} </span> </div> var vm

2017-07-21 17:48:02 1151

原创 7-表格显示案例

下面是一个综合的案例，每秒钟往表格中添加一条数据。本案例综合使用了v-if 和 v-for循环综合案例。<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Vue入门之动态显示表格</title> <script src="https://unpkg.com/vue/dist/vue.js"></

2017-07-20 18:01:25 310

原创 8-Vue指令之列表渲染 V-for

1. v-for循环渲染标签 + v-for 指令根据一组数组的选项列表进行渲染。 + v-for 指令需要以“ item in items ”形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 + 模板引擎都会提供循环的支持，基本的用法类似于foreach的用法。 <div id="app"> <table> <thea

2017-07-20 17:43:34 1808

原创 4-Vue入门之数据绑定

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。1. 什么

2017-07-19 20:55:59 866

原创 5-Vue指令之双向数据绑定 V-model

喂你吃一口 v-model 的语法糖v-model 指令用来在、、 text、 checkbox、radio 等表单控件元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素这样说有些神奇，但 v-model 本质上不过是语法糖：它负责监听用户的输入事件以更新数据，并处理一些极端的例子语法糖语法糖（Syntactic sugar），也译为糖衣语法，指计算机语言中

2017-07-15 15:59:25 7347

原创 6-Vue指令之条件渲染 V-if/else

1.内部指令 Vue 的指令和 HTML 的原生指令相似，这指令容易记忆并且好理解，因为它仅是在原生标签前面加上了 V-前缀：v-show v-htmlv-else v-onv-model v-bindv-repeat v-refv-for v-prev-text v-clockv-

2017-07-14 20:59:49 2149

原创 3-vue实例

数据绑定是将数据和试图相关联，当数据发生变化时，可以自动更新视图语法 1.Vue构造器每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的 var vm = new Vue();Vue 并不完全遵循 MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例。在实例化 Vue

2017-07-14 17:58:16 418

原创 03-MVVM模式

MVVMMVVM是 Model-View-ViewModel 的简写 MVVM 模式使用数据绑定基础架构,这种结构将 View 和逻辑分离出来由一个为 View 量身定制的 modeViewModel 的视图的绑定属性来获得二者之间的松散耦合View 绑定到 ViewModel，然后执行一些命令在向它请求一个动作。而反过来，ViewModel 跟 Model 通讯，告诉它更新来响应。因为 V

2017-07-14 17:08:03 348

原创 02-MVP模式

MVP Model-View-Presenter MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的所有的交互都发生在P

2017-07-14 16:34:22 641

原创 01-MVC模式

1. MVCMVC (Model View Controller)MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式MVC用一种业务逻辑、数据、界面显示分离的方法组织代码 Controller（控制器）处理输入，（写入数据库记录），控制器接受用户的输入并调用模型和视图去完成用户的需求，它只是接收请求并决定调用哪个模型

2017-07-14 15:59:50 514

原创 2-Vue 的实现

1.声明式渲染DOM应尽可能是一个函数式到状态的映射。 DOM状态只是数据状态的一个映射。如图所示，所有的逻辑尽可能在状态的层面去进行当状态改变时，View应该是在框架帮助下自动更新到合理的状态，而不是当你观测到数据变化之后手动选择一个元素，再命令式地去改动它的属性。在模板语法上，Vue跟Angular是比较相似。把模板直接做成在浏览器里面 parse 成 DOM 树，然后去遍历这个树

2017-07-13 22:12:06 398

原创 1-关于Vue

Vue.jsVue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。 Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动学习 vue 之前，我们需要对渐进式框架有一个基础的认识框架库和框架都是一种有

2017-07-13 21:31:59 552

原创版本控制

关于版本控制版本控制（Version Control Systems）是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。这个系统可以自动帮我们备份文件的每一次更改，并且可以非常方便的恢复到任意的备份（版本）状态。实现版本控制的软件有很多种类，大致可以分为: 本地版本控制系统集中式版本控制系统分布式版本控制系统。1. 本地版本控制系统借助软件我们可以记录下文件的每一次

2017-07-06 04:05:29 1382

原创 SSH 安全秘钥登录

工作中，我们常常需要将本地代码推送到远端服务器，或者从远端服务器获取任务进程，就需要频繁的登陆到远端服务器。使用 SSH Key 可以实现安全秘钥证书的方式登陆远端服务器，这样所有传输的数据都会被加密，数据传输的过程会更加安全，避免遭受恶意攻击。常见有两种加密技术，分别是对称性加密和非对称性加密，SSH属于后者。对称加密算法在加密和解密时使用的是同一个密钥；而非对称加密算法需要两个密钥来进行加密

2017-07-06 04:00:04 999

原创 Git

1. git安装Window安装： http://git-scm.com/download/win下载Git客户端软件，和普通软件安装方式一样。Linux安装： CentOS发行版：sudo yum install git Ubuntu发行版：sudo apt-get install gitMac安装：打开Terminal直接输入git命令，会自动提示，按提示引导安装即可。2. g

2017-07-06 03:48:38 320

原创 shell执行命令顺序二

shell执行命令示例经过前面的介绍，相信你对shell已经有了大致的了解，下面我们将根据示例来解析shell执行命令的过程$ mkidr /tmp/x 建立临时性目录$ cd /tmp/x 切换到该目录$ touch f1 f2 建立文件$ f=f y="a b" 赋值两个变量$ echo ~+/${f}[12] $y $(echo cmd subst )$ ((

2017-07-06 03:45:02 710

原创 shell 命令执行顺序一

shell 命令执行顺序一shell执行命令的步骤顺序如上图，看起来有些复杂。当命令行被处理时，每一个步骤都是在Shell的内存里发生的;Shell不会真的把每个步骤的发生显示给你看。所以，你可以假想这事我们偷窥Shell内存里的情况，从而知道每个阶段的命令行是如何被转换的。shell执行命令的原理 Shell 从标准输入或脚本中读取的每一行称为管道（pipeline）;它包含了一个或多

2017-07-06 03:43:40 6191

原创 vi编辑器

如同Windows下的记事本，vi编辑器是Linux下的标配，通过它我们可以创建、编辑文件。它是一个随系统一起安装的文本编辑软件。1. 三种模式vi编辑器提供了3种模式，分别是命令模式、插入模式、底行模式，每种模式下用户所能进行的操作是不一样的: 通过上图我们发现，输入模式是不能直接切换到末行模式的，必须要先切回到命令模式（按ESC键）2. 使用vi/vim编辑器 + 打开/创建文件， vi

2017-07-06 03:28:10 303

原创 shell

什么是shell在计算机科学中，shell俗称壳，用来区别于Kernel(核)，是指”提供使用者界面”的软件(命令解析器)文字操作系统与外部最主要的接口就叫做shell。shell是操作系统最外面的一层。它接收用户命令，然后调用相应的应用程序 Shell基本上是一个命令解释器，类似于DOS下的command。它接收用户命令（如ls等），然后调用相应的应用程序。作为命令语言，shell**交互

2017-07-06 03:25:01 401

原创 Markdown 语法

Markdown 语法以下是 Markdown 的常用语法！在以后的笔记中将持续使用 Markdown 语法进行编译，因此，将此分享给大家。概述Markdown 的目标是实现【易读易写】Markdown 语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。兼容HTMLMarkdown 语法的目标是：成为一种适用于网络书写的语言 Markdown 语法的理念是：让文档更容易读

2017-07-04 16:22:38 2739

WinSolstice的博客