大家好，我是轻风乍起，本人从事前端8年了，总结了很多学习资料，有时间我会普及一些入门和提升建议，思想提升了，路线明确了自然就好了，于是就整理了一些学习笔记，
供大家学习，干货福利内容 在文末↓
VueJS 1
复习 3
一、百度图片布局 4
二、VUE 5
2.1 github地址 6
2.2官网 6
2.3中文官网 6
2.4兼容性 6
2.5获取Vue 7
三、体验vue 7
3.1 vue实例化对象 7
3.2 el设置容器元素 7
3.3绑定数据 7
四、插值 8
下午复习 10
五、数据动态绑定 11
六、数据丢失 13
七、模板指令 14
八、循环模板指令 14
九、 支付宝案例 15
复习
MVC 用户 => 控制器， 用户 => 视图， 控制器 => 视图， 控制器 => 模型， 视图 => 模型， 模型 => 视图
模型 两种创建方法，模型实例化对象，defaults， initialize，get， set {silent} change， unset 删除校验， toJSON
视图 两种创建方式， el， setElement， 视图实例化对象， initialize， render， events
集合 两种创建， 集合实例化对象， initialize， model， url， 去重 id（idAttribute） cid， toJSON， add add， remove remove， get，事件
事件 on(type, fn, context), trigger(type, ...arg), off(type, fn), once, listenTo(obj, type, fn), stopListening()
underscore template， forEach， map， groupBy， sortBy， filter
拉去数据 url，fetch
路由
1 拓展路由类 routes
2 实例化
3 启动路由
一、百度图片布局
特点
1 同一行只能有两张图片
2 间隔是相等的
3 两张图片是等高的
4 图片是等比例放缩的
分析变量：
左图（第一张图片）：ow1， oh1， sw1， sh1
右图（第二张图片）：ow2， oh2， sw2， sh2
容器的宽度 w， h
分析已知量 ow1， oh1，ow2， oh2，w
分析未知量 sw1， sh1， sw2， sh2， h
注意： h = sh1 = sh2 （第一个方程）
未知量 sw1， sw2， h （三元一次方程）
说明 w 就认为是两张图片的宽度（对于空白，我们在计算的时候，将其减去）
找方程
同一行只能有两张图片
w = sw1 + sw2 （第二个方程）
图片是等比例放缩的
第一张图片
ow1 / oh1 = sw1 / sh1
sw1 = ow1 / oh1 * sh1 (1)
第二张图片
ow2 / oh2 = sw2 / sh2
sw2 = ow2 / oh2 * sh2 (2)
将（1）和（2）等式带入第二个方程中
w = sw1 + sw2
w = ow1 / oh1 * sh1 + ow2 / oh2 * sh2
带入第一个方程
w = ow1 / oh1 * h + ow2 / oh2 * h
w = ow1 * oh2 * h / (oh1 * oh2) + ow2 * oh1 * h / (oh2 * oh1)
w = (ow1 * oh2 * h + ow2 * oh1 * h) / (oh2 * oh1)
w * oh2 * oh1 = (ow1 * oh2 + ow2 * oh1) * h
w * oh2 * oh1 / (ow1 * oh2 + ow2 * oh1) = h
h = w * oh2 * oh1 / (ow1 * oh2 + ow2 * oh1)
将h带入（1）和（2）中
sw1 = ow1 / oh1 * h
sw2 = ow2 / oh2 * h
例如 第一张图片原始宽高640 * 400， 第二张图片原始宽高954 * 722， 页面宽度 320 - 6 * 3 = 302
h = w * oh2 * oh1 / (ow1 * oh2 + ow2 * oh1)
= 302 * 400 * 722 / (640 * 722 + 954 * 400)
= 103.3775839180732
sw1 = ow1 / oh1 * h
= 640 / 400 * 302 * 400 * 722 / (640 * 722 + 954 * 400)
= 165.40413426891715
sw2 = ow2 / oh2 * h
= 954 / 722 * 302 * 400 * 722 / (640 * 722 + 954 * 400)
= 136.59586573108285
二、VUE
MVVM模式：分成三个部分：模型，视图，视图模型
模型表示机器可读性强的数据（通常后端传递的数据）
视图表示人眼可读性强的数据（通常指代页面）
视图模型
将机器可读性强的数据【模型】，转化成人眼可读性强的数据【视图】，数据绑定实现的
将人眼可读性强的数据【视图】，转化成机器可读性强的数据【模型】，事件的监听
以上数据的两个方向的传递，称之为数据的双向绑定
Vue就是基于MVVM模式实现的一套框架，在VUE中
model：指代js中的数据，如对象，数组等等
view：指代页面视图
viewModel： 指代的就是vue实例化对象，
在早期，js只负责创建一些页面交互，解析数据等等，最主要的问题是浏览器的兼容性问题，为了解决这类问题，jquery一类库火了起来，非常好用，实现某个功能效率极高，没有兼容问题，随着技术的发展，如今，前端的项目越来越大，因此对于项目代码的可维护性，可拓展性，安全性等等成为了主要的问题，但是jquery一类库没有实现对业务逻辑的分成，所以写的代码可维护性，可拓展性极差。所以才出现了Backbone等一类框架库，他们对业务逻辑进行了拆分（模型，视图，控制器等），帮助我们管理项目的代码，但是开发效率低，很多业务需要手动的实现，所以才有了MVVM模式一类框架的出现，例如vue，通过数据的双向绑定，极大的提高了开发效率
2.1 github地址
https://github.com/vuejs/vue
2.2官网
http://www.vuejs.org/
2.3中文官网
https://cn.vuejs.org/
2.4兼容性
vue基于ES5语法实现的一个框架，因此不支持ie6,7,8，只支持高级浏览器（移动端的框架）
2.5获取Vue
bower install vue
三、体验vue
通过new Vue创建vue实例化对象
通过el属性绑定视图
通过data属性绑定数据
3.1 vue实例化对象
$el 绑定的容器元素
_data 绑定的数据备份
如果为vue绑定了数据，数据中的属性会添加在vue实例化对象中，并设置了特性，
数据的绑定正是因为数据设置了特性
3.2 el设置容器元素
el属性实现将视图绑定给vue实例化对象，
属性值可以是常用的css选择器
id选择器，类选择器，元素名称选择器，自定义元素名称选择器等等
其中自定义元素名称选择器是为组件使用的
页面中如果出现了多个选择器，渲染第一个，后面的被忽略了，所以一定是一个选择器对应一个vue实例化对象（在一个项目中，尽量只有一个vue实例化对象）
3.3绑定数据
通过data属性绑定数据
绑定过程中
1 将数据存储在_data中
2 将数据中的每一个属性添加给vue实例化对象，并设置了特性
正是因为设置了特性的缘故，所以绑定的数据data中的属性始终与vue实例化对象中添加是数据属性保持同步，不论是何种类型（不区分值类型和引用类型）
对于绑定的时候，对于数据中不存在的（直接属性）数据，我们新增一份是不会同步的，这份数据就是丢失的数据，在vue中叫数据丢失
绝对数据丢失：在使用之前，没在数据中定义出来（设置了特性），即可解决数据丢失的问题
数据的绑定是单向的，只能由模型中的数据流向视图中，
而不能由视图流入模型，可以通过事件监听实现
传统对象：值类型复制，引用类型引用
1 var app = new Vue({
2 // 绑定视图
3 el: '#app',
4 // 绑定数据
5 data: data
6 })
四、插值
数据绑定的本质将模型中的数据绑定给vm（vue实例化对象），存储在vue实例化对象中的数据，在页面中是看不到的，想看到这些数据就要使用插值
插值的作用：将vue实例化对象中的数据，渲染到页面中
语法 {{插值内容}}
插值语法提供了一个js环境，因此我们可以在插值语法内使用js表达式
v-bind指令
vue2.0不支持属性插值，使用属性插值要使用v-bind指令
指令：指令就是对DOM元素的拓展，让其具备一定的功能特征，
v-bind指令，就是让属性值变成一个js环境，我们可以使用vue中数据变量
语法糖 :
语法糖：对某个功能的一种简化，例如将v-bind指令简化成冒号，冒号就是一个语法糖
插值表达式
插值提供了一个js环境，所以我们可以直接使用js表达式
插值过滤器
为了复用插值表达式的业务逻辑，vue提供了插值过滤器
1.0 语法 {{数据 | 过滤器名称}}
1.0
内置了过滤器
可以使用属性插值
可以使用单次插值
语法 {{*数据}}
只能渲染一次，后面数据更新也不会重新渲染
可以使用渲染html插值
语法 {{{}}}
可以将dom元素渲染出来
1 <div id="app">
2 <!-- 冒号就是v-bind的语法糖 -->
3 <h1 v-bind:style="{color: color}" :title="msg">{{msg.toUpperCase()}}</h1>
4 <h2>面积：{{width * height}}</h2>
5 <h3>{{msg.toUpperCase()}}</h3>
6 <!-- 1.0中可以使用属性插值 -->
7 <h4 title="{{msg}}">{{msg | uppercase}}</h4>
8 <!-- 单次插值 -->
9 <h5>{{*msg}}</h5>
10 <!-- 过滤html插值 -->
11 <h2>{{{msg}}}</h2>
12 </div>
下午复习
Vue 基于MVVM模式
创建vue实例化对象
el 绑定视图的
data绑定数据模型
属性添加给vue实例化对象，设置了特性
插值
语法 {{数据}}
v-bind指令，:
表达式
过滤器
1.0
属性插值
单次插值 {{*数据}}
渲染html插值 {{{}}}
内置了过滤器
五、数据动态绑定
数据动态绑定又叫计算数据属性
data绑定的数据，在渲染到页面过程中，想修改只能通过插值表达式或者插值过滤器来修改
这里的修改是在数据获取后，页面渲染的时候修改的
我们如果想在数据获取之前，将其改变，我们可以使用动态数据绑定的语法
渲染页面的时候，有两次可以更改数据的时间点，
1 动态数据绑定
2 插值过滤器或者插值表达式
相对于动态数据绑定来说，通过data绑定的数据我们认为是静态绑定的数据
动态数据绑定跟静态数据绑定定义的语法相似
通过computed绑定数据，属性值也是对象
key表示属性名称
value 是一个函数
参数是vue实例化对象
作用域是vue实例化对象
返回值就是获取的数据
在动态绑定数据的属性值方法中，获取vue中的数据有两种方式
其一，通过参数vue实例化对象（面向过程的）
其二，通过作用域this访问实例化对象（面向对象的）
动态绑定的数据跟静态绑定的数据一样，都会直接添加给vue实例化对象，并设置了特性
1 var app = new Vue({
2 // 绑定视图
3 el: '#app',
4 // 绑定数据
5 data: {
6 width: 100,
7 height: 20
8 },
9 // 动态数据绑定
10 computed: {
11 // size表示属性名称，会添加给vue实例化对象
12 size: function(v) {
13 console.log(this, arguments)
14 // 计算面积
15 // return v.width * v.height;
16 return this.width * this.height;
17 }
18 }
19 })
数据双向绑定
数据由模型到视图（数据绑定和插值）
数据由视图到模型（事件监听）
vue提供了v-model指令，实现了数据双向绑定的功能
获取dom的内容，存储在vue中
v-model的属性值就是绑定的数据，一定要在vue中绑定
vue中，指令的属性值都是js环境，我们可以直接使用js表达式
1 <div id="app">
2 <!-- 将input的内容，渲染在h1中 -->
3 <input type="text" v-model="msg">
4 <h1>{{msg}}</h1>
5 <input type="text" v-model="title">
6 <h1>{{title}}</h1>
7 </div>
类的绑定
我们在工作中，时常会操作元素的类，因此我们要绑定类
在vue2.0中，绑定类有三种方式
第一种 v-bind:class=”[]”
数组每一个成员代表一组类（成员可以出现空格，表示多个类）
1.0中，不能出现空格，只能表示一个类
第二种 v-bind:class=”{}”
key 表示类的名称
可以出现空格，表示多个类
1.0中，不能出现空格，只能表示一个类
注意：由于类的名称会出现-，因此出现-我们就要加上引号
value是一个布尔值
true表示保留这个类
false表示删除这个类
第三种 v-bind:class=”字符串”
字符串中可以出现空格
v-bind的语法糖是:，所以也可以写成 :class
在1.0中，支持属性插值，因此可以使用插值语法绑定类，不建议使用
注意：字符串加引号，变量不带引号，除了一些关键字（true, null, false）
1 <div id="app">
2 <!-- 第一种方式 -->
3 <h1 v-bind:class="['red bg-pink', 'fz-50']">爱创课堂</h1>
4 <!-- 第二种方式 -->
5 <h1 :class="{
6 red: true,
7 'fz-50': true,
8 'bg-pink cricle': 100,
9 'blue': false
10 }">爱创课堂</h1>
11 <h1 :class="cls + ' bg-red'">爱创课堂</h1>
12 <h1>爱创课堂</h1>
13 </div>
样式绑定
跟类一样，我们会经常操作dom的样式，因此我们就要绑定样式
绑定样式也有三种方式
第一种 v-bind:style=”[]”
每一个成员是一个对象，表示一组样式
key表示样式名称
由于样式名称中，经常出现横线，因此我们要加引号（不建议）
vue建议我们可以样式的名称时候，使用驼峰式命名
value表示样式属性值
第二种 v-bind:style=”{}”
key表示样式名称
value表示样式属性值
第三种 v-bind:style=”行内样式字符串”
字符串加引号，变量不要带引号，要在vue中绑定
vue1.0中，可以使用属性插值，因此可以将样式通过插值语法插入，2.0不允许
六、数据丢失
1 在没有绑定的时候使用数据，数据会丢失
解决：在使用前，将其预绑定
2 对于已有的数组，如果我们为其添加新的成员，新的成员数据也丢失了
解决：定义新的数据，覆盖该数组
1 <div id="ickt">
2 <!-- 第一种方式 -->
3 <h1 v-bind:style="[
4 {
5 color: 'red',
6 background: bg
7 },
8 {
9 'border-bottom': '10px solid blue'
10 }
11 ]">爱创课堂</h1>
12 <!-- 第二种方式 -->
13 <h1 :style="{
14 borderBottom: bt,
15 color: 'orange'
16 }">爱创课堂</h1>
17 <!-- 第三种方式 -->
18 <h1 :style="'border: 10px solid purple;' + color">爱创课堂</h1>
19 </div>
js环境
在插值语法中，提供了js环境
在指令中，提供了js环境
七、模板指令
条件模板指令 v-if可以控制元素是否创建
true 创建元素
false 删除元素
是真正的创建和删除，可不是显示或隐藏（设置样式）
v-else 当v-if不满足条件的时候，创建v-else元素
v-show 显示或隐藏元素的，是设置的样式，而不是创建删除元素
原理：切换display: none属性
v-show不能与v-else一起使用
想控制多个元素的创建，vue建议我们使用h5中的模板元素template
template特点：是一个模板标签，跟普通的dom元素一样，可以添加属性，样式，指令等等，唯一区别点，不会渲染到页面中，
1 <div id="ickt">
2 <span class="type" v-else>其他</span>
3 <span class="type" v-if="type">{{type}} | </span>
4 <!-- v-show控制元素的显隐 -->
5 <span class="type" v-show="type">{{type}} | </span>
6 <!-- 可以借助template控制多个元素 -->
7 <template v-if="type">
8 <span class="type">{{type}}</span>
9 <span class="type"> | </span>
10 </template>
11 <span>{{title}}</span>
12 </div>
八、循环模板指令
v-for：循环创建dom元素
语法 v-for=“item in data”
item 数组中的每一个成员
data 要遍历的聚合数据（数组）
在1.0还提供了一个$index循环变量，访问循环的索引值，2.0移出了
第二套语法
1.0中： v-for=“(index, item) in data”
index 就是索引值
item 就是成员值
2.0中： v-for=”(item , index) in data”
index 就是索引值
item 就是成员值
注意：这里的item和index都是我们自定义的，因此可以是任意的变量（见谅不要与绑定的数据同名）
循环变量只能在循环中使用，在外部无法使用
我们也可以通过template模板元素，控制多个子元素的循环创建
1 <div id="ickt">
2 <ul>
3 <!-- 循环创建谁，为谁设置v-for指令 -->
4 <li v-for="item in list">{{$index}}--{{item}}</li>
5 <li v-for="(index, item) in list">{{index}}--{{item}}</li>
6 <!-- 2.0中 -->
7 <!-- 斑马线 -->
8 <li v-for="(item, index) in list" v-bind:style="{
9 background: index % 2 ? 'red' : 'green'
10 }">{{index}}--{{item}}</li>
11 <!-- 控制多个元素 -->
12 <template v-for="(item, index) in list">
13 <li v-bind:style="{
14 background: index % 2 ? 'red' : 'green'
15 }">{{index}}--{{item}}</li>
16 <br>
17 </template>
18
19 </ul>
20 <!-- 循环变量，在外部无法使用 -->
21 <!-- <h1>{{index}}--{{item}}</h1> -->
22 </div>
九、支付宝案例
1
1
1
想要学习前端的小伙伴，可以加qq：3252897743 分享你前端视频资料
来源：https://blog.csdn.net/qq_39625091/article/details/100899353