Vue学习笔记（一）
这里写自定义目录标题
- 一、前端流行框架
- 二、渐进式框架
- 三、Vue框架
-
-
- 1. v-for
- 2. v-if / v-else / v-show
- 3. 事件处理 v-on
- 4. 系统修饰键
- 5. 双向数据绑定：v-model
- 6. 值绑定
- 7. 样式绑定
- 8. 类绑定
-
- 四、Vue框架网页
- 五、与jQuery相比
-
-
-
-
-
- 1.DOM操作少了
- 2.支持双向数据绑定
- 3.支持组件化
-
-
-
-
- 五、缺点
- 六、最优用处
一、前端流行框架
- Bootstrap：CSS框架，移动设备优先的前端开发框架。
http://www.bootcss.com/ - Layui：口碑极佳的web弹层组件，是一款采用自身模块规范编写的前端 UI 框架，适合快速开发。
https://www.layui.com/ - ElementUI：饿了吗团队推出的基于vue.js 2.0的PC端UI框架
http://element-cn.eleme.io/#/zh-CN - Mint UI：饿了吗团队推出的基于vue.js的移动端组件库
http://mint-ui.github.io/ - angular：前端JS框架，核心是MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
http://www.angularjs.net.cn/ - React：起源于 Facebook 的内部项目，用来架设Instagram 的网站。
http://react-china.org/ - vue.js：构建数据驱动的 web 界面的渐进式框架，尽可能简单的 API 实现响应的数据绑定和组合的视图组件。很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。
https://cn.vuejs.org/
二、渐进式框架
-
主张最少
每个框架都有特点，要求开发者按照一定要求书写，这些要求就是主张。
angular排他性很强，必须使用他的模块机制、依赖注入以及特殊形式定义组件。如果不是从头开始写的项目，需要不断集成别的，这些主张会很麻烦。
React主张主要是函数式编程的理念，看似没有angular侵入性强，其实是软性侵入。视图层虽然可以单用，但是用了以后需要引入Flux，Redux，Mobx之中的一个，需要纠结很多外部依赖的问题，看看业务开发过程中每个东西的副作用，纯不纯，不纯会导致同样不加参数调用两次结果不同。开发人员熟悉OO设计模式，思想转换到函数式编程需要时间。
Vue是渐进式的，没有强主张，可以当作组件使用，作为jQuery。也可以用来全家桶开发，当作angular用，还可以用整个视图搭配自己的下层用。可以在数据逻辑的地方用OO，也可以函数式。
-
过程：
- 维护管理后台，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(''+key+'');
$('.area').append(''+key+'');
$.each(value,function(k,v){
$('.area .item-list').append(''+v.name+'');
});
})
- 如果想要显示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
<input @keyup.alt.67="clear">
<div @click.ctrl="doSomething">Do somethingdiv>
5. 双向数据绑定：v-model
只能用在表单元素里
6. 值绑定
在单选、多选、选择框的情况下，可以通过绑定特殊值，显示当前选中元素
<input type="radio" v-model="picked" value="a">
<input type="checkbox" v-model="toggle">
<select v-model="selected">
<option value="abc">ABCoption>
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.支持组件化
五、缺点
- SEO问题，解决需要做服务器渲染
- 新框架
六、最优用处
代替jQuery，加强交互。