Vue官网学习（查缺补漏）
Vue官网地址
1.基础
1.vue是一套用于构建用户界面的渐进式框架。
2.可以自底向上逐层应用（从基层做起，把基础的东西写好，再逐层网上添加效果和功能）。
2.Polyfill
Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。
polyfill : polyfill是一个代码块，主要用来为旧的浏览器提供对于一些新的功能的支持，通常会是一些JavaScript代码。
数据响应式
当我们Vue实例中的数据发生改变时，视图会重新进行渲染，但值得注意的是，只有放实例被创建时就已经存在于data中的数据才是响应式的，即如果你知道之后会使用某个属性时，那么你之前一定要在data中进行定义，可以在刚开始将其设置为空/false/0/[]/{}等。
上述说法中，唯一的一个例外是Object.freeze()，该方法可以冻结一个对象，当对象被冻结后将不再进行修改，不能添加新的属性，不能删除已有属性，不能修改已有属性的值，这也意味着系统无法再追踪其中的变化。
eg:
var obj = {
name:'FTTx',
age:23
}
Object.freeze(obj)
var vm = new Vue({
el:'#app',
data:obj,
})
Vue实例暴露的实例Property与方法
- 访问数据 vm.$data
- 访问挂载元素 vm.$el
- 访问监听方法 vm.$watch(‘someData’,function(newVal,prevVal){})
实例生命周期钩子
每个Vue实例在被创建时都要经过一系列的初始化过程。例如，设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给用户在不同阶段添加自己的某些功能的机会。
比如：我们会在created/mounted中获取本页面渲染时的一些数据，beforeCreate时没有el,data；created时还没有el，但data已被初始化，beforeMount/mounted时el和data都存在。所以具体要在哪个钩子来执行数据的获取可以根据自己的需求进行使用
比如：我们会在beforeUpdate和updated钩子函数时调用方法，对数据发生变动时进行监听，beforeUpdate中是数据更新前的状态，updated是数据更新完成之后的操作。
比如：在一个实例被销毁时会走beforeDestroy和destroyed方法，我们通常会在beforeDestroy中清除定时器事件。
模板语法
Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有的Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。
v-html
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
什么是XSS攻击(跨站脚本攻击)
详情关注：XSS攻击
模板表达式
1.模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
2.百度百科沙盒（英语：sandbox，又译为沙箱），计算机术语，在计算机安全领域中是一种安全机制，为运行中的程序提供的隔离环境。 通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。 沙盒通常严格控制其中的程序所能访问的资源，比如，沙盒可以提供用后即回收的磁盘及内存空间。
修饰符
详情关注：修饰符详解
动态参数
详情关注：动态参数详解
计算属性
在一个操作过程中，计算属性和方法确实能够达到同样的效果，但为什么有的时候使用计算属性而不使用方法呢？
Vue官网给出答案：
因为，计算属性有缓存作用，
如果我们有一个性能开销比较大的属性A，
它需要遍历一个巨大的数组并做大量的计算，
然后还有可能有其他的属性依赖于A的值，
如果没有缓存，我们不可避免的要多次执行A的getter。
而方法则不同，
每次触发渲染的时候，无论结果是否改变，
调用方法将总会再次执行函数。
那么计算属性和侦听属性又改如何比较呢？
Vue官网给出答案：
如果你在监听多个值发生变化，
最终得出一个值的时候，
使用watch，那么将会多次监听不同的值，值发生变化，
多次监听得到最终的结果。
而如果用计算属性的话，
可以直接将两个变化的值一起返回给最终的值。
计算属性不但有getter对值进行获取，还有setter对值进行操作
Vue官方文档中给出了非常优秀的例子：
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
这样，但我们运行vm.fullName= 'Ting feng'时，setter会被调用，firstName、lastName的值也会随之被更新。
Class
class还可以这样设置动态
方法一：内联形式设置
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
通过这个例子我们可以看出，
这个div元素默认有一个static的Class,可以在其中设置相应的样式。
还有两个Class分别是active和text-danger,
这两个Class是否会生效，取决于isActive和hasError的值，
若为true则生效，若为false则不生效。
我们可以通过操控这两个的值，从而在不同的状态实现不同的效果。
方法二：对象设置类
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
方法三：计算属性设置
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
根据值设置最终选择的类
方法四：数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染后：
<div class="active text-danger"></div>
方法五：组件上定义类
若你在自己封装组件的时候抽出来的组件上面是有class的，
在使用组件的时候又在组件上面增加了class，
那么最终渲染的结果是两个class会同时作用在这个上面。
在组件使用时也可以动态添加class，与正常普通添加class效果相同。
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
<my-component class="baz boo"></my-component>
渲染后的结果：
<p class="foo bar baz boo">Hi</p>
如果在使用这个组件的时候，
使用时定义的类和组件定义类名字相同时，
使用时定义类的样式优先级最高，会覆盖定义组件时的类。
Style
内联样式，将看着非常像CSS，但其实是一个JavaScript对象的语句写在标签上面并执行该样式。CSS属性名可以用驼峰式或者短横线分隔的形式来命名
类型一：变量形式控制样式
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
类型二：对象形式包含各种样式
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
类型三：数组语法，将多个对象绑定在同一个元素对象中
<div v-bind:style="[baseStyles, overridingStyles]"></div>
data: {
baseStyles: {
color: 'red',
fontSize: '13px'
},
overridingStyles:{
background:'red'
}
}
自动添加前缀：
当v-bind:style使用需要添加浏览器引擎前缀的CSS property时，如transform，vue.js会自动侦测并添加相应的前缀。
条件渲染(key)
Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，如果当你使用v-if和v-else渲染相同结构的输入内容框时，切换的时候只是修改了placeholder，其他的内容并没有发生改变，这时之前输入的数据还会作为保留，此时，如果你不喜欢这样的方式，就可以给两个元素增加key完全区分开来，这样，每次切换时，输入框都会被重新渲染。
不区分key之前：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
加key区分后：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
此时，加了key的input框不会被复用，而没有加key的label元素仍然会被高效地复用。
v-if与v-show的区别
v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if是惰性的，如果在初始渲染时条件为假，则什么也不做，直到第一次变为真时，才会开始渲染条件块。
相比较之下，v-show的渲染就简单的多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
一般来说，v-if有着更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show更好，如果在运行时条件很少改变，则使用v-if更好。
v-if与v-for
不推荐同时使用v-if和v-for在同一个元素标签上，v-for具有比v-if更高的优先级。所以在同一个标签上使用时，v-for每次循环的结果都会执行一次v-if，过于耗费性能。
v-for
v-for在处理数组时，可以用item in items也可以用item of items。
v-for在处理数组时，(item,index) in items,item表示循环出来的对象，index表示对应的索引。
v-for在处理对象时，(value,name) in obj,value表示值，name表示键。
v-for在处理对象时，还有第三个参数(value,name,index) in items,value表示值，name表示键，index表示索引下标。
v-for的维护状态
当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保他们在每个索引位置正确渲染。这个默认的模式是高效的，只适用于不依赖子组件状态或者临时DOM状态(例如：表单输入值)的列表渲染输出。
为了给Vue一个提示，以便他能跟踪每个节点的身份，从而重用和重新排序现有元素，我们需要为循环出的每一个元素提供一个唯一的key属性。
<template>
<ul class="vuefor">
<li v-for="(item,index) in arr" :key="index">{{index}}--{{item}}</li>
</ul>
</template>
<script>
export default{
data(){
return {
arr:['1','2','3','4','5']
}
},
mounted(){
setTimeout(()=>{
this.arr.unshift('6')
},1000)
}
}
</script>
渲染结果：
从
0--1
1--2
2--3
3--4
4--5
一秒后到
0--6
1--1
2--2
3--3
4--4
5--5
key属性在使用过程中，不要使用对象或数组之类的非基本数据类型值作为v-for的key，使用字符串或数值类型的值作为key。并且在使用v-for时一定要加上key属性进行区分，大多数情况下,可以直接使用index作为key进行区分，但如果是循环某个组件，向组件中传值，在组件内部可能会对该条数据进行修改等时，最好用该对象本身的id进行区分，避免一些不必要的麻烦。
数组更新检测
Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发试图更新。以下方法直接在原数组上进行更改
1.push() 从尾部添加新的元素，
直接修改当前数组，返回数组长度
2.pop() 删除数组的最后一个元素，
并返回删除元素的值，
如果数组为空则返回undefined
push()方法和pop()方法使用数组提供的先进后出栈的功能。
pop和push都是操作数组的最后一个元素，本着先进后出栈的原则。
3.shift() 从数组中第一个元素删除，并返回该元素的值，
更改的是数组的长度，如果数组为空则返回undefined。
4.unshift() 向数组的开头添加一个或更多元素，
并返回新的长度，该方法改变数组的长度。
shift和unshift都是想数组的开头进行操作。
push与unshift都是添加元素，返回都为数组长度。
pop与shift都是删除元素，返回的都是被操作的元素。
5.splice() 向数组添加或删除项目，然后返回被删除的项目。
该方法改变原始数组。
splice(index,deleNum,newVal1,newVal2....)
表示从下标为index处开始，删除deleNum个元素，新增了newVal1和newVal2两个元素
6.sort()对数组元素进行排序，数组在原数组上进行排序，不生成副本。
sort的使用，直接是arr.sort()
如果()里面不传参数，默认会有一种排序的形式
如果()里面传参数，可以是一个方法，令数组元素按照某种规则进行排序
7.reverse()用于颠倒数组中元素的顺序，只改变原数组，不会创建新的数组。
使用方式['apple','banana','cemon'].reverse()
以下方法不会修改原数组，而是生成一个新的数组
1.filter()返回一个符合条件的数组
filter不会修改原数组，不会对空数组进行检测。
arr.filter(function),function中要有返回值哦
2.concat()用于连接两个或者多个数组
concat不会改变原有数组，而是会生成一个新的数组
可以
arr1.concat(arr2,arr3)
也可以
arr1.concat(3,4,5)
3.slice()可以提取字符串的某个位置，并返回一个新的值。
slice可以提取一个数组，括号可以传递参数
slice(index1,index2)表示截取下标[index1,index2)的位置。
数组操作
有时候我们想要渲染一个经过过滤或者排序后的数组，但并不想实际上对原数组进行修改，我们就可以结合计算属性来实现
一、计算属性计算值
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
二、使用方法过滤值
<ul v-for="(set,i) in sets" :key="i">
<li v-for="(n,index) in even(set)" :key="index">{{ n }}</li>
</ul>
sets: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
},
使用v-on的好处
1.扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法。
2.因为你无需在JavaScript里面手动绑定事件，你的ViewModel代码可以是纯粹的逻辑，和DOM完全解耦，更易于测试。
3.当一个ViewModel被销毁时，所有的事件处理器会自动被删除。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
