写在前面
知道Vue已经有“一段”时间了，粗枝大叶的了解了点，因为当时资料比较少，正式项目中也没有开始用到，也就没怎么去研究。
接下来可能会去用到这个，所以准备去钻研下。
上面的没啥用，请直接略过。。。
Vue.js是当下很火的一个JavaScript MVVM框架(库)，它是以数据驱动和组件化的思想构建的。我暂时理解为它是一个轻量版的Angular。
Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。
它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
开启Vue之旅
Vue是什么？
一个MVVM框架(库)、和angular类似。官网有1.0和2.0两个版本，2.0对于1.0提高的地方，可以找度娘。。。
Vue优势
简单、易上手，掌握angular的朋友们，上手Vue就一句话，so easy!
vue的基础使用
Vue实例
1. 引入vue.js
2. 创建一个vue实例
创建
模板语法
插值
{{ variable }} -> 普通变量
{{* variable }} -> 一次性模板
{{{ variable }}} -> 转译模板
<input type="text" v-model="variable"> v-model 的模板语法
代码
通过使用v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：
<span v-once>my Message: {{ msg }}</span>
对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持：
Javascript 表达式
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。语句、流程控制等不生效。
指令
指令（Directives）是带有v-前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了v-for）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
vue事件
v-on:事件名
v-on:mouseenter/mouseleave
v-on:click —> 缩略 @click ("v-on:"可以缩略为"@")
v-on:contextmenu/keydown
v-on:keyup.键码/enter/delete/left/right/top/bottom/ctrl.v/prevent.stop(阻止默认事件)
。。。
事件
tips：@contextmenu.stop.prevent = "method"中，stop、prevent前面的点( . )为修饰符。
v-for 循环
1. <li v-for="value in variable"></li> —> array
2. <li v-for="(key,value) in json"></li> —> json
1.极简留言板
↑ 不添加 track-by="$index" 循环中command相同的内容不重复显示
json
网页中的显示结果
filter（过滤器 / 格式化数据）
|：通道操作符
pipe -> 通道：前者表达式的计算值作为后表达式的计算参数
过滤器可以用在两个地方：mustache 插值和v-bind表达式。
mustache and v-bind
filter—mustache
网页显示
other—filter
filter：currency(默认带$、保留两位小数)/lowercase/uppercase/capitalize(首字母大写)
自定义filter
v-bind
<div v-bind:class="{className:boolean,className2:boolean}"></div>
<img v-bind:src="variable"/> —> 缩略写法：<img :src="variable"/>
v-bind
自定义指令
vue.directive('指令名',function(){
this.el —>对应的DOM节点
})
计算属性
模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。
这就是对于任何复杂逻辑，都应当使用计算属性的原因。
computed
计算缓存 VS Methods
methods
我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。
然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。相比而言，只要发生重新渲染，method 调用总会执行该函数。
根据实际情况分析，确定是否需要缓存，从而确定使用computed 或 methods
Computed属性 VS Watched属性
↓
watch
上面代码是命令式的和重复的。将它与 computed 属性的版本进行比较：↓↓
computed
Watcher
计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。
Vue 提供一个更通用的方法通过watch选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。
Class与Style绑定
绑定HTML Class
v-bind:class="..." 可以跟对象、数组
绑定内联样式
v-bind:style="..." 可以跟对象、数组
当v-bind:style使用需要特定前缀的 CSS 属性时，如transform，Vue.js 会自动侦测并添加相应的前缀。
从 2.3 开始可以为style绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值：
<div:style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">
条件渲染
v-if、v-else-if、v-else
<h1 v-if="ok">Yes</h1> 使用v-if进行条件渲染
<h1 v-else>No</h1> 可以使用v-else添加一个“else”块
v-else、v-else-if 元素必须紧跟在v-if或者v-else-if元素的后面——否则它将不会被识别。
template中的v-if条件组
因为v-if是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个<template>元素当做包装元素，并在上面使用v-if。
最终的渲染结果不会包含<template>元素元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含元素。
template
用key管理可复用的元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处。例如，允许用户在不同的登录方式之间切换:
login
在上面的代码中切换loginType将不会清除用户已经输入的内容。因为两个模版使用了相同的元素，<input>不会被替换掉——仅仅是替换了它的的placeholder。
Vue 提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的key属性。
添加key属性
这样每次切换时，输入框都将被重新渲染。<label>元素仍然会被高效地复用，因为它们没有添加 key 属性。
v-show
v-show指令也用于根据条件展示元素的选项
<h1 v-show="ok">Hello!</h1>
不同的是带有v-show的元素始终会被渲染并保留在 DOM 中。v-show是简单地切换元素的 CSS 属性display。
tips：v-show不支持<template>语法，也不支持v-else。
v-if and v-show
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if较好。
v-if 和 v-for 一起使用
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
列表渲染
v-for
1.<li v-for="value in variable"></li> ——>array
2.<li v-for="(key,value) in json"></li> ——>json
极简留言板
↑ 不添加 track-by="$index" 循环中command相同的内容不重复显示
json
网页中显示结果
of 替代 in
Template v-for
v-for
Vue组件
作者持续更新中。。。
友情链接：http://www.jianshu.com/p/5ba253651c3b 从环境搭建到发布
文笔有限，欢迎吐槽！！！
网友评论