Vue学习笔记（一）

一、前端流行框架

1. Bootstrap：CSS框架，移动设备优先的前端开发框架。
   http://www.bootcss.com/
2. Layui：口碑极佳的web弹层组件，是一款采用自身模块规范编写的前端 UI 框架，适合快速开发。
   https://www.layui.com/
3. ElementUI：饿了吗团队推出的基于vue.js 2.0的PC端UI框架
   http://element-cn.eleme.io/#/zh-CN
4. Mint UI：饿了吗团队推出的基于vue.js的移动端组件库
   http://mint-ui.github.io/
5. angular：前端JS框架，核心是MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
   http://www.angularjs.net.cn/
6. React：起源于 Facebook 的内部项目，用来架设Instagram 的网站。
   http://react-china.org/
7. vue.js：构建数据驱动的 web 界面的渐进式框架，尽可能简单的 API 实现响应的数据绑定和组合的视图组件。很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。
   https://cn.vuejs.org/

二、渐进式框架

1. 主张最少

   每个框架都有特点，要求开发者按照一定要求书写，这些要求就是主张。

   angular排他性很强，必须使用他的模块机制、依赖注入以及特殊形式定义组件。如果不是从头开始写的项目，需要不断集成别的，这些主张会很麻烦。

   React主张主要是函数式编程的理念，看似没有angular侵入性强，其实是软性侵入。视图层虽然可以单用，但是用了以后需要引入Flux，Redux，Mobx之中的一个，需要纠结很多外部依赖的问题，看看业务开发过程中每个东西的副作用，纯不纯，不纯会导致同样不加参数调用两次结果不同。开发人员熟悉OO设计模式，思想转换到函数式编程需要时间。

   Vue是渐进式的，没有强主张，可以当作组件使用，作为jQuery。也可以用来全家桶开发，当作angular用，还可以用整个视图搭配自己的下层用。可以在数据逻辑的地方用OO，也可以函数式。

2. 过程：

• 维护管理后台，form表单的提交或jQuery收集数据
• 常规业务开发，DOM用VUE操作，。这时候Query没什么用了，列表v-for循环，模块抽象为组件
• 移动端网站，webpack解决，前端可以控制路由
• 微信，vuex 处理数据在组件之间的流动得心应手。
• 白屏时间长，用vue 2.0 的 ssr

三、Vue框架

1. v-for

• 在jQuery中，想要动态添加数据需要通过js中append到HTML中。Vue在html中就可以完成该操作。

json 数据

jsont={
A:[{name: "阿坝", spellName: "aba", id: 5780, fullname: "四川/阿坝", sortLetters: "a"},{name: "阿克苏", spellName: "akesudi", id: 6474, fullname: "新疆/阿克苏", sortLetters: "a"},{name: "阿拉善", spellName: "alashanmeng", id: 3862, fullname: "内蒙古/阿拉善", sortLetters:"a"}],
B:[{name: "白城", spellName: "baicheng", id: 4041, fullname: "吉林/白城", sortLetters: "b"},{name: "百色", spellName: "baise", id: 5527, fullname: "广西/百色", sortLetters: "b"}]

数据显示结果如下

vue方式

<div class="area" v-for="(item,key) of jsont">//遍历对象类型的数据
  <div class="title ">{{key}}</div>
  <div class="item-list">
      <div class="item" v-for="innerItem of item">
          {{innerItem.name}}
      </div>
  </div>
</div>

jquery方式

<div class="area" >//遍历对象类型的数据
</div>

$.each(jsont,function(key,value){
 $('.area').append('<div class="title ">'+key+'</div>');
 $('.area').append('<div class="item-list ">'+key+'</div>');
 $.each(value,function(k,v){
 		$('.area .item-list').append('<div class="item" v-for="innerItem of item">'+v.name+'</div>');
 });
})

• 如果想要显示10个相同布局元素，也可以用v-for

<-- vue -->
<div>
	<-- n从1开始 -->
  <span v-for="n in 10">{{ n }} </span>
</div>

//jquery
var box=$('div span').copy;
for(var i=0;i<10;i++){
	box.append(box);
}

2. v-if / v-else / v-show

<div v-if="Math.random() > 0.5">
	 Now you see me
</div>
<div v-else>
	 Now you don't
</div>

• v-show与v-if区别
  v-if和v-show都可以通过判断条件显示或隐藏元素
  v-show通过display：none；控制不操作DOM，v-if直接删除，每次都会重新删除或创建元素
  v-if切换性能消耗更大，v-show初始渲染消耗更大

3. 事件处理 v-on

4. 系统修饰键

.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

5. 双向数据绑定：v-model

只能用在表单元素里

6. 值绑定

在单选、多选、选择框的情况下，可以通过绑定特殊值，显示当前选中元素

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

7. 样式绑定

<--  对象是无序键值对的集合 -->
:style="{  color:'red'  }"

如果属性里包括’-‘例如（margin-left），则样式名必须加引号

8. 类绑定

: class="obj"

四、Vue框架网页

1） https://www.bilibili.com （bilibili）
2） http://m.sohu.com （手机搜狐网）
3） https://juejin.im/timeline （掘金）
4） http://element.eleme.io/#/en-US （element）
5） https://classics.autotrader.com （New&Used Classic Car for sale）
6） http://qiqu.uc.cn （奇趣百科）
7） https://m.uhouzz.com/apartments （异乡好居）

五、与jQuery相比

1.DOM操作少了

当DOM操作影响到布局的时候，浏览器的渲染引擎会进行计算，DOM操作的越多，计算量越大，页面性能降低，因此减少DOM操作是好的。

• 浏览器减少DOM操作的方式
  通过js对象模拟DOM，在虚拟DOM中进行操作，直到所有操作进行完毕，更新结果产生的变化。

2.支持双向数据绑定

双向绑定其实就等于单向绑定+UI时间监听，只不过Vue将过程采用黑箱封装起来了。
优点：方便，数据更新可以实时反馈到UI页面，同时UI页面修改数据也会更新
缺点：更新的时间和更新的数据在哪个元素不知道

3.支持组件化

五、缺点

1. SEO问题，解决需要做服务器渲染
2. 新框架

六、最优用处

代替jQuery，加强交互。