一： vue简介

1. 什么是vue

vue一词是法语，同英语中的view。
vue.js是一套构建用户界面的MVVM框架。
vue的核心库只关注视图层，经常与其他库或者已有的项目整合

MVVM简介：见vue特性

2. vue的目的

1). 解决数据绑定问题
2). vue框架生产的主要目的是为了开发大型单页应用(SPA:single page appliacation)，对移动端支持较好，PC端也支持，而angular对PC端支持好，移动端支持不是很好
3). vue支持组件化（方便复用），也就是将页面封装成若干个组件，采用积木式编程，使页面的复用度达到最高。实现一次开发多次复用的目的

SPA简介：在制作APP时，需要运用Android程序员，iOS程序员和.net程序员（Windows phone），很浪费财力物力，于是人们想用HTML5开发APP，但是遇到一个问题：从一个页面调到另一个页面会消耗很长的时间。解决方法是将APP所用到的所有页面构建出来放到一个网页上，根据JavaScript按照一定的规则来控制到底显示哪一个页面，所有切换通过router完成，这就是单页面应用。所以SPA主要是解决H5做APP卡顿的问题。

3. vue的特性

1). MVVM模型
2). 组件化
3). 指令系统
4). vue.js从2.0开始支持虚拟DOM，vue.js1.0操作的是真实的DOM，而不是虚拟的DOM（虚拟DOM可以提升页面的刷新速度）

MVVM模式 :
M：model 业务模式用处：处理数据，提供数据
V：view 用户界面，用户视图
业务模式model中的数据发生改变时，用户视图view也随之改变；用户视图view改变时，业务模式model中的数据也可以发生改变

二： vue 入门

1. vue.js和vue.min.js

vue.js是完整的vue文件，包括换行，空格，注释等，一般用于开发使用
vue.min.js是压缩之后的vue文件，在功能上与vue.js无差别，但它是压缩过的，文件比较小，没有注释，也将错误调试信息关闭了，它的下载速度更快，一般用于线上项目

2. vue.js是一个js库，直接在外部引入即可

<script src="js/vue.js"></script>

注意：script标签里已经引入一个外部文件，就不可以再在里边写JS代码了。只能再另写一个文件书写代码

3. vue.js提供了Vue类，它是一个对象

用Vue类创建一个对象，并保存在变量里。vue在使用时要传入一个对象作为参数。
var app = new Vue({});

4. 对象参数里常用的两个属性：el和data

JavaScript代码

var app = new Vue({
    el : '#app',    // 管理id为app的元素
    data : {}   // data的核心作用是存放显示在页面中的数据，data必须是一个对象

})

var app = new Vue({
    el : '.app'     // 管理class为app的元素
})

var app = new Vue({
    el : 'h1'       // 管理h1元素
})

HTML代码

<h1 id="app">范围之内</h1>
<h1 id="app1">范围之外</h1>

el表示这个对象管理的边界，属性值和CSS选择器是一样的，表示管理的那个元素。其中上边三种写法都是可以的，但是推荐使用id表示，来保证唯一性
上述表示vue对象管理的范围是第一个h1，和第二个h1毫无关联

5. 对象参数的其他属性：methods等

6. 创建一个实例

<div id="app">
    {{ message }}       
</div>

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

运行结果:
hello world

实例解析：
在用户界面view中，通过{{}}的形式将data中的数据显示在页面中而在用户界面中，{{}}绑定的是data的key值（这里是message），而页面中显示的是该key的value值（这里是hello world）

app这个变量会代理vue中data的数据，所以我们访问data中的数据时，直接用app.message就可以了
在控制台上的变化（注意左右）

最后编辑于：2019.02.18 16:33:33

vue学习-第一天

一 ： vue简介