Vue基础
一、兼容
Vue不兼容IE8及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。
但它支持所有兼容 ECMAScript 5 的浏览器。
二、版本
在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告！
三、指令
1、v-once： 执行一次性地插值，当数据改变时，插值处的内容不会更新。
2、v-html、v-text
3、v-if：绑定在元素上，或template上，v-else，和v-else-if需要紧跟
4、v-for：遍历对象时可以有三个值
<div v-for="(value, name, index) in object">
会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
5、v-bind：
:class="{ active: isActive }"，也可以从data中取
<div v-bind:class="[activeClass, errorClass]"></div>
6、v-bind：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
或者绑定data中的对象，也可使用class类似的数组，数组下可用多重值
7、:key= 添加key属性可以独立元素，拒绝复用
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
8、v-show：简单切换display
9、v-if & v-show：v-for 的优先级比 v-if 更高，
这意味着 v-if 将分别重复运行于每个 v-for 循环中。
当你只想为部分项渲染节点时，这种优先级的机制会十分有用
10、is="todo-item" attribute：这种做法在使用 DOM 模板时是十分必要的，
因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。
这样做实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误
11、@click
内联时可以用$event把事件变量传入函数
12、事件修饰符
.stop、.prevent、.capture、.self、.once
.passive
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
13、按键修饰符
:keyup.enter、:keyup.page-down
按键码：.enter、.tab、.delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、.right
14、系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl、.alt、.shift、.meta
请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。
换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。
而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
鼠标按钮修饰：.left、.right、.middle
15、v-model
在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替
多个复选框，绑定到同一个数组
单选按钮绑定到一个变量
！！！如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。
在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。
因此，更推荐像上面这样提供一个值为空的禁用选项。但是用v-for渲染不用
v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。
你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步
### 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
### 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
四、数组方法
filter()、concat() 和 slice()：它们不会变更原始数组，而总是返回一个新数组
push()、pop()、shift()、unshift()、splice()、sort()、reverse()，会改变原数组
五、计算属性
1、计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，
多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
2、计算属性的setter
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
六、<keep-alive>
注意这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册
七、Prop
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的kebab-case (短横线分隔命名) 命名
###传入一个数字：需要用v-bind，虽然是静态的，但是他是JS的表达式
###传入一个布尔值：
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>
###传入对象和数组也都是表达式
###每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。
这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
###注意那些 prop 会在一个组件实例创建之前进行验证
所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的
###非Prop的Attribute
八、插槽
###默认值<slot>default</slot>
###具名插槽
<slot name="header"></slot>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
一个不带 name 的 <slot> 出口会带有隐含的名字“default”
注意 v-slot 只能添加在 <template> 上
缩写：#header
###作用域插槽
只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法
###动态插槽名
九、处理边界情况
- 当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组
- 依赖注入：provide和inject
- 程序化的事件侦听器
- 循环引用
- 模板定义的替代品
- 控制更新
十、自定义事件
1、不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。
推荐你始终使用 kebab-case 的事件名
2、自定义组件的model
3、将原生事件绑定到组件
4、.sync修饰符
十一、响应式无法捕获情况
- 实例创建时候就已经存在于data中的property才能响应式，VM.B="HI"就无法响应式
- Object.freeze()会阻止修改，无法响应式
十二、混入
- 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
- 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
- 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
- 自定义选项合并策略
十三、自定义指令
十四、过渡
条件渲染 (使用 v-if)、条件展示 (使用 v-show)、动态组件、组件根节点
过渡的类名：
v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to
CSS 动画用法同 CSS 过渡：区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，
而是在 animationend 事件触发时删除。
自定义过渡的类名：
enter-class、enter-active-class、enter-to-class (2.1.8+)、leave-class
leave-active-class、leave-to-class (2.1.8+)他们的优先级高于普通的类名
同时使用过渡和动画
显性的过渡持续时间
JavaScript钩子
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
</transition>
只用 JavaScript 过渡
在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
###推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
###初始渲染的过渡
appear属性设置
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class" (2.1.8+)
appear-active-class="custom-appear-active-class"
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
###多个元素的过渡
当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们
###模式
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
transition上加mode属性
###多组件过渡使用动态组件
###列表过渡（transition-group）
特点：
不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。
你也可以通过 tag attribute 更换为其他元素。
过渡模式不可用，因为我们不再相互切换特有的元素。
内部元素总是需要提供唯一的 key attribute 值。
CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
列表的排序过渡：
v-move class实现过渡曲线和切换时机
###可复用的过渡
###状态过渡
十五、API
1、silent：取消 Vue 所有的日志与警告
2、productionTip：设置为 false 以阻止 vue 在启动时生成生产提示
3、Vue.nextTick( [callback, context] )：{Function} [callback] {Object} [context]
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，
获取更新后的 DOM。
4、v-pre： 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签
5、v-cloak： 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none } 一起用时，
这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
十六、runtime-only和runtime+compiler
runtime-compiler(vue1)：template -> ast -> render -> vdom -> UI
runtime-only：render -> vdom -> UI
// 这种情况需要compiler
new Vue({
template: '<div>{{ hi }}</div>'
})
// 这种情况不需要
new Vue({
el:”#app”,
render (h) {
return h('div', this.hi)
}
})这里的h是createElement函数
普通用法：creatElement(标签，标签属性，标签内容)
creatElement(“h2”,{class:”box},[“hello world”])
h2会吧#app替换掉
组件用法：也可传入一个组件
.vue文件中的会被vue-loader引入，template会被vue-template-compiler解析，他们都是开发时依赖，所以最终的组件都不会有template，就不会经过template -> ast的流程
Runtime Only
我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的
vue-loader 工具把 .vue 文件编译成 JavaScript，因为是在编译阶段做的，
所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量。
在将 .vue 文件编译成 JavaScript的编译过程中会将组件中的template模板编译为render函数，
所以我们得到的是render函数的版本。所以运行的时候是不带编译的，编译是在离线的时候做的。
Runtime+Compiler
我们如果没有对代码做预编译，但又使用了 Vue 的 template 属性并传入一个字符串，则需要在客户端编译模板
十七、其他
1、不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，
经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
2、数据绑定可以嵌入表达式，如{{}}或v-bind:=""，但是不能访问用户定义的全局变量，有一个全局白名单可以访问，如Data和Math
3、动态参数
语法：<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
【】中可以是表达式或data中的变量
约束：动态参数表达式有空格，引号等约束，对求出的值会有约束，且内容中大写会全部转化小写再去data中找相应的值
4、浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(即“yes”或“no”)，请换用单选
1064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
