前端开发之Vue学习笔记分享
Vue.js的发展
前端发展的行业非常快，大部分学习者赶不上发展的速度，每天都在学习Google的AngularJS，Fackbook的ReactJS，这些前端MVC（MVVM）框架和组件化学习，加上Vue.js的出现，越来越多的前端投入了学习中。❤️
Vue.js是一个用来开发web界面的前端库，轻量级，具有响应式编程和组件化的特点。
hello world
引入vue.js
<script src="http://cdnjs.xxx"></script> // 使用CDN方法
通过NPM进行安装：
npm install vue
示例：
{{}}
({
: ,
: {
:
}
})
特点：数据绑定
在浏览器控制台vm.message='hello vue'，输出结果hello vue，表示vm.message和视图中{{message}}是绑定的。
绑定用户输入的数据，视图会随着用户的输入而变化
{{}}
vm.message的值会随着用户在input中输入的值的变化而变化，而无需我们手动去获取DOM元素的值再同步到js中。
特点:组件化
可以自己定义html标签，在模板中使用它
示例：
.({
: [],
:
})
.(, );
({
: ,
})
命令行工具：
$npm install --global vue-cli $vue init webpack my-project $cd my-project $npm install $npm run dev
Vue实例
vue.js的使用是通过构造函数Vue({option})创建一个vue的实例：var vm = new Vue({})。
一个Vue实例相当于一个MVVM模式中的ViewModel，做图如下：
在实例化的时候，可以传入一个选项对象（数据，模板，挂载元素，方法，生命周期钩子） 等。
模板
el类型是字符串，DOM元素或者是函数，作用是为实例提供挂载元素。前端培训一般来说我们会使用css选择符，或是原生的DOM元素。
如：el:'#app'，指定了el，实例将立即进入编译过程。
template类型为字符串，默认会将template值替换挂载元素，el值对应的元素，合并挂载元素和模板根节点的属性。
数据
vue实例中可以通过data属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。
示例：
{:}
({
:
})
.
. .
.
.
.
.
在模板中使用{{a}}就会输出vm.a的值，修改vm.a的值，模板中的值会随之改变，称为响应式数据。
组件类型的实例可以通过props获取数据，同data一样，也需要在初始化时预设好。
.(,{
: [,],
:
})
方法
在methods对象中来定义方法，示例：
:
({
: ,
: {:},
: {
: (){
.(.);
}
}
});
生命周期
beforeCreate，在实例开始初始化时同步调用，此时数据观测，事件等都尚未初始化。
created，在实例创建之后调用，此时已完成数据绑定，事件方法，但尚未开始DOM编译，即是未挂载到document中。
beforeMount，在mounted之前运行。
mounted，在编译结束时调用，此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档。
beforeDestroy，在开始销毁实例时调用。
destroyed，在实例被销毁之后调用，此时所有绑定和实例指令都已经解绑，子实例也被销毁。
updated，在实例挂载之后，再次更新实例并更新完DOM结构后调用。
activated，需要配合动态组件keep-live属性使用，在动态组件初始化渲染的过程中调用该方法。
文本插值
数据绑定基础形式是文本插值，使用{{}}，为Mustache语法：
{{}}
单次插值：
{{}}
HTML属性
示例：
: :
绑定表达式
放在Mustache标签内的文本内容称为绑定表达式。每个绑定中只能包含单个表达式，并不支持JavaScript语句，不支持正则表达式。
过滤器
vue允许在表达式后添加可选的过滤器，以管道符 "|"指示，可以有多个过滤器链式使用：
{{ }}
计算属性
({
: ,
: {
: ,
: ,
}
: {
: () {
. .
}
}
});
{{}}{{}}
Setter
示例：
({
: ,
: {
: ,
}
: {
: {
: (){
. ;
},
: () {
(.).();
}
}
}
});
表单控件
输入框示例：
{{}}
单选框示例：
{{}}
checkbox复选框，单个勾选框和多个勾选框
{{}}
多个勾选框，v-model使用相同的属性名称，且属性为数组：
{{.()}}
select:
单选：
: {{}}
多选：
: {{.()}}
绑定value
表单控件的值同样可以绑定在vue实例的动态属性上。
: :
.. ..
class与style绑定
class属性，绑定的数据可以是对象和数组
:
: {
:
}
渲染结果：<div class="tab active"></div>
数组语法
:
: {
: ,
: ,
}
渲染结果：`<div class="class-a class-b'>
内联样式绑定
对象语法：直接绑定符合样式格式的对象
:
: {
: {
: ,
:
}
}:
数组语法：v-bind:style允许将多个样式对象绑定到统一元素上。
:
模板渲染
前端渲染的优点：
第一，业务分离，后端只需要提供接口，前端在开发时也不需要部署对应得后端环境，通过一些代理服务器工具就能远程获取后端数据进行开发，能够提升开发效率。
第二，计算量得转移，原本需要后端渲染得任务交给了前端，减轻了服务器得压力。
后端渲染的优点：
第一，对搜索引擎比较友好。
第二，首页加载时间端，后端渲染加载完成后就直接显示html，但前端渲染在加载完成后还需要有段js渲染的时间。
条件渲染
v-if和v-else的作用是根据数据值来判断是否输出该DOM元素，以及包含的子元素。
v-else必须紧跟v-if，不然该指令不起作用。
v-show元素的使用会渲染并保存在DOM中。只是切换元素的css属性display。
v-if和v-show的条件发生变化时，v-if引起了dom操作级别的变化，而v-show仅仅发生了样式的变化，从切换的角度来说，v-show消耗的性能要比v-if小。
v-if切换时，vue.js会有一个局部编译/卸载的过程，因为 v-if 中的模板也可能包括数据绑定或子组件。v-if 会确保条件块在切换当中适当地销毁与中间内部的事件监听器和子组件。
v-if 是惰性的，如果在初始条件为假时，v-if 本身什么都不会做，而v-show 则仍会进行正常的操作，然后把 css 样式设置为 display:none。
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗
列表渲染
示例：
{{.}}
{{.}}
({
: ,
: {
: [
{ : , : },
{ : , : },
{ : , : },
{ : , : }
]
}
});
v-for 内置了 $index 变量，输出当前数组元素的索引，也可以自己指定索引的别名。<li v-for="(index,item) in items">{{index}} – {{$index}} – {{item.title}}</li>
在vue.js中提供了$set方法，修改数据的同时进行试图更新。
.(, {: })
修饰符
.stop: 等同于调用 event. stopPropagation()。
.prevent: 等同于调用 event.preventDefault()。
.capture: 使用 capture 模式添加事件监听器。.self: 只当事件是从监听元素本身触发时才触发回调。
示例：
:. :.. :..
Vue.extend()
Vue.js 提供了 Vue.extend(options) 方法，创建基础 Vue 构造器的“子类”
.(, )
.
.({
: ,
: () {
{
.
}
}
.
})
内置指令
v-bind用于动态绑定DOM元素属性attribute，元素属性实际的值是由vm实例中的data属性提供的。
:
({
: {
:
}
})
v-text 需要绑定在某个元素上，能避免未编译前的闪现问题。
v-ref作用于子组件上，实例可以通过$refs访问子组件。
示例：
:
:
.({
: [],
:
});
.(, );
v-pre指令，表示跳过编译这个元素和子元素，显示原始的{{}}Mustache标签，用来减少编译时间。
v-clock指令相当于在元素上添加一个[v-cloak]的属性，直到关联的实例结束编译。可以和css规则[v-cloak]{display:none}一起使用，可以隐藏未编译的Mustache标签直到实例准备完毕。
{{}}
v-once指令是用于标明元素或 组件只渲染一次，即使随后发生绑定数据的变化或更新，该元素或组件以及包含的子元素都不会再次被编译和渲染。