1.如何理解Vue
vue是渐进式的基于MVVM设计模式的纯前端JS框架;
渐进式:可以在项目中逐步使用vue的功能,也可以与其他技术一同混合使用
2.为什么使用Vue框架
Vue是一款友好的、多用途且高性能的JavaScript框架,它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架,也就是说,如果你已经有了现成的服务端应用,你可以将Vue作为该应用的一部分嵌入其中,带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现,那么Vue的核心库及其生态系统也可以满足你的各式需求。
和其他框架一样,Vue允许你将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方。如果我们构建了一个大型的应用,可能需要将东西分割成为各自的组件和文件,使用Vue的命令行工具,使快速初始化一个真实的工程变得非常简单。
总结:(多用途,高性能,可维护性高,组件复用)
3.Vue的优点
- 体积小:压缩后只有33k;
- 更高的运行效率:基于虚拟DOM,一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,由于这种DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM;
- 双向数据绑定:让开发者不用再去操作DOM对象,把更多的精力投入到业务逻辑上;
- 生态丰富、学习成本低:市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件,拿来即用实现快速开发;对初学者友好、入门容易、学习资料多;
总结:(体积小,运行效率高,免数据绑定操作,快速开发)
4.Vue常用指令与渲染DOM元素方式
v-model v-on v-if v-for v-text v-html v-show v-if v-else(与v-if需配合使用) v-else-if(与前两个一同使用) v-bind v-slot (常用)
v-pre v-cloak v-once (不常用)
v-for {{}} render (渲染DOM元素)
5.Vue适用哪些项目
Vue体积小,轻量,可维护性高,但其核心库只侧重于视图层,所以只适用做从简单到复杂的单页应用或单一权限类后台项目,中大型项目并不建议使用Vue。
6.Vue的生命周期钩子函数
beforeCreat:实例初始化后,创建前使用。(可进行数据侦听和事件/侦听器的配置之前同步调用)
created :实例创建完成后立即同步调用。(数据侦听和事件/侦听器的配置等已配置完毕)
beforeMount:在挂载示例前调用,相关render函数首次被调用
mounted:挂载实例完成后调用。官网提示:(mounted不保证所有子组件都挂载成功,若希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick )
beforeUpdate:在数据发生改变后,DOM被更新前调用。(适合在现有DOM将要被更新之前访问,比如移动手动添加的事件监听器等)
updated:在数据更改与虚拟DOM渲染完后调用
beforeDestroy:实例销毁前,(此时实例仍然可用)
destroyed:实例销毁后调用 (在此方法调用后,对应的vue实例指令解绑,所有事件监听被移除,子实例皆也销毁)
以上为针对界面DOM元素的整体生命周期方法
7.Vue自带的内置组件
component transition transition-group keep-alive slot
8.Vue基本事件处理的修饰符
事件修饰符:.stop .prevent .capture .self .native .once
按键修饰符: .keycode(按键事件,此处绑定按键code) .left .right .middle
9.MVVM设计模式
MVVM是基于组件开始,数据驱动开始的,是相对于MVC模式的改造创新。
可分为:- 界面View: 增强版的HTML和CSS,可跟据数据自动变化
- 模型数据Model:集中存储一个页面内的所有变化的数据。
- 视图模型ViewModel: 将View界面和Model模型数据包裹起来,统一管理,自动同步修改。
ViewModel中包含两大子系统
1.响应系统:
将模型数据包裹起来,为每个模型变量自动添加get()和set()属性,今后只要修改任何模型变量,都自动经过set(),set()中会触发通知: xx变量变为xx新值
通知会发给虚拟DOM树
2.虚拟DOM树:
创建new Vue时,通过扫描完整DOM树,仅提取可能变化的元素和属性,组成的一颗及精简的虚拟DOM树。
10.Vuex与Vue-router
Vuex与Vue-router都是基于vue使用的插件
Vuex:用于vue项目中数据状态集中管理,组件通讯,传值,处理数据等操作,相当于vue组件间的桥梁,
Vue-router:基于vue使用的路由管理器,可用动态路由,也可针对组件分配参数,以及获取路由中的参数
11.创建vue文件必备的基础标签
template与根目录