关于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月份)

属于混合开发

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. 引入

<script  src=""></script>

3. 初始化

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

<div id="app"></div>

2. 初始化

new Vue(options)

• el 表示装载， 将上面id为app的模板装载在 new Vue的实例中，也确定了一个作用范围
• data 数据
  注意：
  学习vue.js即要学习配置项 && api

3. 数据绑定（声明式渲染）
   名词：
   mustauch语法糖： 双大括号语法 {{}} 支持js语法
   注意事项：
4. 模板中的 this 指的是 new Vue得到的实例 ， 在模板中 this可以省略不写

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

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