Vue 基础

2. 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. 认识 尤雨溪

9. vue.js是一个MVVM框架

10. vue.js 数据也是单向的， 我们称之为， 单向数据流

11. vue.js是不兼容ie8及其以下浏览器

前端框架的发展历程

js
jquery
MVC架构思维从后端引入到前端
backbone.js
angular.js (15年)
react.js(15年)
vue.js(16年10月份)

研发12年以后了， 但是发布

混合开发

MV* 模式

MVC 后端引入 架构思维

前端MVC vs 后端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. 引入

3. 初始化

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

5. 初始化
   new Vue(options)

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

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

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

   1. 模板中的 this 指的是 new Vue得到的实例 ， 在模板中 this可以省略不写

   {{ this.$data.msg }}

   {{ this.msg }}

   {{ msg }}

   推荐的 2. data选项在根实例中是对象， 除了跟实例以外是函数
   3. 如何激活浏览器中 vue detools工具
      必须有服务器