Vue - 基础知识介绍

Vue.js

2.0和1.0发生改变比较大。

学习要点：
1.Vue基础知识介绍（Vue是什么，能做什么）
2.案例
3.地址列表案例

选择一个好的前端框架很好。

预备知识：
基于js的MVVM框架。
我们需要知道js知识，

图片.png

vue-resource：类似于jQuery的AJAX功能，可以使用多种请求方式，如GET,POST。我们还可以使用JSONP。vue-resource同时具备这样的功能。我们不想使用jQuery这么大的库，我们可以使用它去与后台进行交互。

Vue 基础知识介绍：
特点：易用，灵活-渐进式

1）易用：
声明式的渲染。
html:

    {{ message }}

js:

var app = new Vue(
    el: '#app',
    data: {
        message: 'Hello, world!'
    }
)

效果：

图片.png

如果是jQuery的话，就需要先获取 #app这个元素，去掉用 text()方法，或者 html()方法来使用这个字段。
比如我们的详情界面，字段比较多的时候，就不能使用jQuery去一个个渲染，这样就显得比较笨重。
Vue是一个 模型，基于 模型视图的这样的一个框架。

2）灵活 - 渐进式

图片.png

不管我们开发单页面应用还是开发多页面应用，首先我们是通过声明式地来渲染我们的每一个字段，这是我们的基本的要求。

声明式渲染：渲染页面每一个字段 。每个功能都应该声明式地渲染每个细节。展现信息就需要通过渲染来实现。 
组件系统：我们在做一个页面的时候，就需要把公共的头部，公共的尾部抽取出来做成一个组件，这里需要做组件系统。
客户端路由：多页面。
大规模状态管理：如果系统比较大，Vuex可以大规模管理状态。
构建工具：使用构建工具来build我们的系统，提升我们的效率。

渐进式：
当我们需要与后台进行交互，我们就去加入一个vue-resource的插件。
当我们需要路由的话，我们就去加一个vue-router的插件。
当我们的项目足够复杂，就去加一个vuex，来进行状态管理。
最后，可以使用构建工具来构建我们的系统。
从简单到复杂，却什么就补什么。这就是渐进式构建。

3）高效

a.16kb min+gzip 的运行大小，很小。（v2.0）

vue的功能往往比那些模板引擎强大的多。

b.超快虚拟DOM
1.0版本是没有虚拟DOM的，是直接去创建，直接去生成现有的DOM。
从2.0开始，所有的更改只会在最后一次从虚拟的DOM向现有的DOM去写入。

比如我们修改了10次，10次都会在Virtual DOM 去操作，操作完了之后，才向现实的DOM里面去写入。因此效率很快，在虚拟DOM中修改本来就比在现实DOM中快。

c.最省心的优化
js能最做的，就不会再Vue里面去实现这样的功能，因为是多余的，最主要的目的是减轻Vue的大小，提升效率。

Vue基础指令的介绍

1）指令的使用：

v-model   # 主要在表单里面使用。 文本框，单选，复选，textarea等控件可以使用。v-model是一个双向的功能。我们向文本框中输入以后，模型也会相应的改变。反之亦然。
v-text  # 主要是对文本的渲染。 我们使用v-text与使用{{}}是一个意思。但是如果{{}}在vue没有初始化完成之前，就会显示{{}}在页面，所以我们在使用文本渲染的时候，更多的是去使用vue-text。
v-show  # 显示与隐藏。控制DOM的显示与隐藏。
v-if
v-bind # 绑定属性。给DOM元素添加属性。（eg: 给img节点绑定src属性）
v-for  # 循环。主要用在表格，li标签去循环生成数组。
v-on # 事件绑定。

v-show与v-if都可以使用显示与隐藏的功能，区别是：
v-show是添加display: block与display:none去显示与否。这个DOM对象还是存在的。
v-if如果这个DOM不显示的话，那么整个DOM就没有。不存在于整个DOM树中。

2）过滤器filter

使用情景，我们与后台进行交互。后台返回的数据我们未必全部需要，或者说有些字段我们需要进行转换，那么我们可以使用filter。

比如后台接口返回了字段type，type值有1,2,3,4，我们想1,2,3,4对应地展示中国，美国，俄罗斯，德国，我们就可以使用filter。

3）组件Component

Component，模块化。把一个网页拆分为多少个组件。
每一张网页，可以看成很多小组件合成的网页。每一种组件可复用。