Vue.js基本介绍

Vue介绍

1. 尤雨溪 google实习 阿里任职 weex研究团队（访问原生设备的库） vue.js是属于他的个人项目
2. vue.js目前适用于中小型项目
3. vue.js借鉴了 react 和 angular
4. 和vue.js很类似一个库 avonlon.js也是一个个人项目 作者:司徒正美
5. 尤雨溪微博:尤小右
6. vue.js是一个前端的js的渐进式框架
   渐进式： 越学越难（ 上手门槛低 ）
7. vue.js什么时候正式发布？
   2016年10月份
   github关注度： 136K (不代表大陆地区)
8. vue.js是一个MVVM框架
9. vue.js 数据也是单向的， 我们称之为， 单向数据流
10. vue.js是不兼容ie8及其以下浏览器

前端框架的发展历程
js
jquery
MVC架构思维从后端引入到前端
backbone.js
angular.js (15年)
react.js(15年)
vue.js(16年10月份)
angular.js研发在12年前后， 但是发布在15年

混合开发 MV* 模式 前端MVC由后端MVC架构思维引入 前端MVC 和 后端MVC 完全不同

MVC 衍生架构

backbone.js
MVP
MVVM

名称解释：

M Model 数据
V View 视图
C Controller 控制器（ 业务逻辑 ）
P Presenter 提出者；推荐者；赠送者；任命者 ( 中介 媒婆 )
VM ViewModel 视图模型

库 vs 框架
库： 工具
框架： 工具+生态圈
vue.js使用：

1. 下载

 cdn  [https://cdn.bootcss.com/vue/2.6.10/vue.js]

本地保存vue.js文件
模块化安装

npm i vue -D/-S
cnpm
yarn

2. 引入

<script src="basic-source/vue.js"></script>

3. 初始化

new Vue({
el: '#app'
})

i. 必须有一个html容器， 决定vue.js的作用范围

<div id="app"></div>     //举个例子

ii. 初始化

new Vue(options)

• el 表示装载， 将上面id为app的模板装载在 new Vue的实例中，也确定了一个作用范围
• data 数据

注意：学习vue.js即要学习配置项 && api

4. 数据绑定（声明式渲染）
   名词：
   mustauch语法糖： 双大括号语法 {{}} 支持js语法

注意事项：模板中的 this 指的是 new Vue得到的实例 ， 在模板中 this可以省略不写

<p> {{ this.$data.msg }} </p>
<p> {{ this.msg }} </p>
<p> {{ msg }} </p>  推荐使用

5. data选项在根实例中是对象， 除了跟实例以外是函数

6. 如何激活浏览器中 vue detools工具
   必须有服务器

   7.vue.js是MVVM框架
   M --> options 中 data
   V --> options 中 el(模板)
   VM --> new Vue() 得到的实例， 这个实例身上有很多的属性和方法