第一节:Vue的认识与了解

1. 认识Vue

1.1 Vue是什么

vue.js是一套渐进式 JavaScript 框架,
vue是一款友好的,多途径且高性能的JavaScript框架,可维护和测试更强的代码

作用: 动态构建用户界面

和其他前端框架的关联

  1. 借鉴了angular的模板和数据绑定技术
  2. 借鉴了react的组件化和虚拟DOM 技术

1.2 了解库和框

  1. 框架 vue
    ​ 拥有一个完整的解决方案.,我们开发好以后,他就能调用我们的代码
    ​ vue的核心是库,使用他vue核心库和一些插件就是框架,

  2. 库 jQuery
    ​ 库是别人开发好以后,我们去调用库的方法

库的的概念和意义是用来提供一些方法的集合,避免重复定义相同功能的函数,并具有一定的模式兼容性。

框架,更应该是规范开发者按照框架的设计去做一些事,而非简单的工具集的概念,框架可以提供相应的库或者基于库来实现的插件,但库一般不会具备框架的规范性。

1.3. vue的特点

  1. 核心只关注视图层
  2. 易学,轻量,灵活的特点
  3. 编码简洁,体积小,运行效率高,适合移动/PC开发
  4. 渐进式框架
  5. 遵循MVVM模式

1.4. 渐进式的理解

通过组合,完成一个完整的框架

通俗的来说,渐进式,就是vue有一个核心库, 和一堆的插件, 当核心库能完成的内容就用核心库就行了, 如果需要什么插件在下载什么插件使用

渐进式.jpeg

Vue全家通, vuejs + vue-router + vuex+ axios

  1. 声明式渲染 (不关心是如何实现的用就可以了)

  2. 组件系统 (大型项目,很多部分可以复用,这就是组件)

  3. 客户端路由(vue-router)

  4. 大规模状态管理(vuex)

  5. 构建工具(vue-cli)

1.5. MV**

  1. MVC 单向

    model 模型 view 视图 controller 控制器
    mvc.jpg

  2. MVVM 双向

    model 模型 view 视图 viewModel 视图模型

mvvm.jpg

1.6 Vue扩展插件

  1. vue-cli: Vue 脚手架
  2. vue-resource: ajax请求, 官网已经不推荐使用了,推荐axios
  3. vue-router: 路由
  4. vuex: 状态管理
  5. vue-lazyload: 图片懒加载
  6. vue-scroller : 页面滑动相关
  7. element-ui: 基于vue的UI组件库(PC端)
  8. mint-ui: 基于vue的UI组件库(移动端)

2. 安装vue

2.1. 了解vue的兼容性

Vue不支持IE8及以下版本,因为Vue使用的是IE8无法模拟的ECMAScript 5特性。vue.js支持所有兼容ECMAScript 5的浏览器.

Object.definedProperty(es5) 的没有替代方案,所以不支持IE8及以下


2.2. 直接用<script>引入

  1. 直接下载并用<script>标签引入,Vue会被注册位一个全局变量。
  2. 引入在线cdn
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

2.3. npm安装

npm init

会生成一个package.json文件,这个文件用来描述项目的依赖,

不能有大写 特殊字母 中文,而且不要和安装的包的名字相同

也可以一键生成

npm init -y

需要注意的点:

  1. 一键生成要主要,项目的名字会自动使用文件夹的名字,
  2. 所以此时文件夹的名字不能是中文,特殊大写字母

安装vue

npm install vue
  • 25
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值