写在前面
? ? ? 知道Vue已经有“一段”时间了，粗枝大叶的了解了点，因为当时资料比较少，正式项目中也没有开始用到，也就没怎么去研究。
? ? ? 接下来可能会去用到这个，所以准备去钻研下。
? ? ? ? 上面的没啥用，请直接略过。。。
? ? ? ? 官网链接：https://cn.vuejs.org/
? ? ? 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 表达式支持：
? ? ? 这些表达式会在所属 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
? ? ? ? ↑ ?不添加 ?track-by="$index" ?循环中command相同的内容不重复显示
filter（过滤器 / 格式化数据）
? ? ? ? |：通道操作符
? ? ? ? pipe -> 通道：前者表达式的计算值作为后表达式的计算参数
? ? ? ? 过滤器可以用在两个地方：mustache 插值和v-bind表达式。
? ? ? ? filter：currency(默认带$、保留两位小数)/lowercase/uppercase/capitalize(首字母大写)
v-bind
? ? ? ? <div v-bind:class="{className:boolean,className2:boolean}"></div>
? ? ? ? <img v-bind:src="variable"/>? ? ? —>? 缩略写法：<img :src="variable"/>
自定义指令
? ? ? ?vue.directive('指令名',function(){
? ? ? ? ? ? ? this.el ?—>对应的DOM节点
? ? ? ?})
计算属性
模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。
这就是对于任何复杂逻辑，都应当使用计算属性的原因。
计算缓存 VS Methods
? ? ? ? 我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。
? ? ? ? 然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。相比而言，只要发生重新渲染，method 调用总会执行该函数。
? ? ? ? 根据实际情况分析，确定是否需要缓存，从而确定使用computed 或 methods
Computed属性 VS Watched属性
? ? ? ? ?上面代码是命令式的和重复的。将它与 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。最终的渲染结果不会包含元素。
用key管理可复用的元素
? ? ? ? Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处。例如，允许用户在不同的登录方式之间切换:
? ? ? ? 在上面的代码中切换loginType将不会清除用户已经输入的内容。因为两个模版使用了相同的元素，<input>不会被替换掉——仅仅是替换了它的的placeholder。
? ? ? ? Vue 提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的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相同的内容不重复显示
Template ?v-for
Vue组件
作者持续更新中。。。
友情链接：http://08643.cn/p/5ba253651c3b?从环境搭建到发布
文笔有限，欢迎吐槽?。?！
