Vue.js 核心特性
1. 数据驱动视图
- 数据变化会自动更新到对应元素中,无需手动操作 DOM,
这种行为称作单向数据绑定。
- 对于输入框等可输入元素,可设置双向数据绑定。
- 双向数据绑定是在数据绑定基础上,可自动将元素输入内容更新给数据,
实现数据与元素内容的双向绑定。
- Vue.js 的数据驱动视图是基于 MVVM 模型实现的。
- MVVM (Model – View – ViewModel )是一种软件开发思想
Model 层,代表数据
View 层, 代表视图模板
ViewModel 层,代表业务逻辑处理代码
数据视图的优劣势:
• 基于MVVM 模型实现的数据驱动视图解放了DOM操作
• View 与 Model 处理分离,降低代码耦合度
• 但双向绑定时的 Bug 调试难度增大
• 大型项目的 View 与 Model 过多,维护成本高
2. 组件化开发
• 组件化开发,允许我们将网页功能封装为自定义 HTML 标签,复 用时书写自定义标签名即可。
• 组件不仅可以封装结构,还可以封装样式与逻辑代码,大大提交 了开发效率与可维护性。
Vue.js 的安装
1、本地引入
• 开发版本:cn.vuejs.org/js/vue.js • 生产版本:cn.vuejs.org/js/vue.min.…
开发版本:是一个未压缩的代码,可以查看内部的代码功能,学习Vue的一些书写方式
生产版本:提供的是一个压缩过后的代码,没有可读性,但体积小,通常用于上线使用
2、cdn引入
• 最新稳定版: cdn.jsdelivr.net/npm/vue
• 指定版本: cdn.jsdelivr.net/npm/vue@2.6…
现在非常常用的一种方式,他的加载速度要比本地文件放进服务器中加载更快
可以将版本号2.6.12换成我们需要的版本号
3、npm安装
• 最新稳定版: npm install vue
• 指定版本: npm install vue@2.6.12
npm是Node进行包管理的工具,也可以通过npm管理Vue的功能