Vue介绍
尤雨溪
google实习 阿里任职 weex研究团队(访问原生设备的库) vue.js是属于他的个人项目- vue.js目前适用于中小型项目
- vue.js借鉴了 react 和 angular
- 和vue.js很类似一个库 avonlon.js也是一个个人项目 作者:
司徒正美
- 尤雨溪微博:
尤小右
- vue.js是一个前端的js的渐进式框架
渐进式: 越学越难( 上手门槛低 ) - vue.js什么时候正式发布?
2016年10月份
github关注度: 136K (不代表大陆地区) vue.js是一个MVVM框架
- vue.js 数据也是单向的, 我们称之为, 单向数据流
- 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使用:
- 下载
cdn [https://cdn.bootcss.com/vue/2.6.10/vue.js]
本地保存vue.js文件
模块化安装
npm i vue -D/-S
cnpm
yarn
- 引入
<script src="basic-source/vue.js"></script>
- 初始化
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
- 数据绑定(声明式渲染)
名词:
mustauch语法糖: 双大括号语法 {{}} 支持js语法
注意事项:模板中的 this 指的是 new Vue得到的实例 , 在模板中 this可以省略不写
<p> {{ this.$data.msg }} </p>
<p> {{ this.msg }} </p>
<p> {{ msg }} </p> 推荐使用
-
data选项在根实例中是对象, 除了跟实例以外是函数
-
如何激活浏览器中 vue detools工具
必须有服务器7.vue.js是MVVM框架
M --> options 中 data
V --> options 中 el(模板)
VM --> new Vue() 得到的实例, 这个实例身上有很多的属性和方法