一、什么是VUE(官网 :https://cn.vuejs.org/)
官方给出的概念 :Vue (读音?/vju??/?,类似于?view)?是一套用
于构建用户界面的前端框架
渐进式的?JavaScript?框架
二、VUE的特点
易用 :基础只需HTML、CSS、JAvaScript
灵活 :可以只在一个库和一套完整框架之间伸缩自如(渐进式)
高效 :运行大小20kb ,超快的虚拟DOM
Vue框架的特性主要是数据驱动试图,双向数据绑定
▲?面试?:?为?什?么?要?使?用?虚?拟DOM???
Web界面由DOM树(树的意思是数据结构)来构建,当其中一部分发
生变化时,其实就是对应某个DOM节点发生了变化
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前,
若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,?而是将这10次更新的diff内容保存到本地一个JS对象中,最终将
这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量
无谓的计算量。所以,用JS对象模拟DOM节点的好处是,页面的?更新可以先全部反映在JS对象(虚拟DOM)上,操作内存中的JS对?象的速度显然要更快,等更新完成后,再将最终的JS对象映射成
真实的DOM,交由浏览器去绘制。
三、vue的底层原理—?MVVM模式
MVVM:model、view、ViewModel。MVVM架构一样是M、V分离,但?中间是以VM(ViewModel)来串接,这个VM就像View?的一个代理?程序,它负责直接对Model做沟通。而View可以通过一些机制例?如双向数据绑定来和VM沟通以获取资料,再抛给model做存储工作。
▲?面试?题?:?那?你?能讲?一讲MVVM吗??
MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据。
四、Vue的优势
.?轻量级:vue只关注视图层,是一个构建数据的视图集 合,大小只有几十kb,angular学习成本高,使用复杂。?Vue相对简单,直接所以vue使用更加友好
.?数据绑定:vue是一个MVVM框架,数据发生变化时,视?图就会发生变化,视图变化相应的数据也会变化,保??留了angular的特点,双向数据绑定
.?指令:指令有内置指令和自定义指令,以“v-?”开头,?作用于html元素,将指令绑定在元素上,会给绑定的??元素添加一些特殊行为
.?插件:常用的扩展插件vue-router、Vuex等
.?视图,数据,结构分离:使数据的更改更为简单,不?需要进行逻辑代码的修改,只需要操作数据就能完成?相关操作;
.?虚拟DOM:dom操作是非常耗费性能的, 不再使用原生?的dom操作节点,极大解放dom操作,但具体操作的还??是dom不过是换了另一种方式;
.?运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。
五、vue初体验
VUE的三部曲?引包、留坑、实例化
>?引包
1、直接引入<script></script>
2、CDN:内容分发网络(将一套东西放服务器里面让别人去访问)
3、Npm下载:Npm install vue?(配合官方提供的脚手架去使用)
>?留坑
即在html中留了一个vue模板插入的地方或是vue代码对其生效的地方
<div?id="app">?
?{{message}}
</div>
实例化
new Vue({
????????e1:目的地,//e1:挂载点//(选择器可以是css的选择器类型,但建议用ID选择器)
????????template:模板内容`,//(根节点只能有一个,不能并列标签)????????Data:{},//(可以是函数也可是对象,但基本用函数)
})
关于初始化的选择器:
1.选择器只能选中一个范围,默认选择第一个,所以建议使用id选择器
2.根标签不能用body(el挂载不能用Boby也不可以用HTML),一般都在body里面放一个根标签
3.能够使用vue的标签只能是双目标签
4.new Vue可以在一个页面用多次(后面的组件化也能够支撑这一点)
六、VUE的模板渲染(模板引擎)
{{}}(vue?就是用的两个花括号的模板引擎方式,是借鉴了
Mustache?语法?(双大括号/胡子语法)?的文本插值)
模板引擎的本质: ?正则的替换
目的: 为了增强html功能
Vue模板引擎的用法:
1.?{{数据绑定}}
2.?{{简单计算}}
3.?{{简单逻辑运算}}(三元运算)
4.?{{做简单js判断}}
注意:不能写语句、不能解析html渲染、不能放在在属性身上