企业级开发框架-Vue
介绍
作者:尤雨溪
渐进式框架:根据自身需求,选择框架的中的工具,VUE不强求你一次性接受并使用它的全部功能特性
提示:以下是本篇文章正文内容,下面案例可供参考
一、前端三大主流框架
1.Vue
数据驱动
渐进式框架
基于MVVM软件设计模式
2.React
开发大型项目最严谨的框架(学习成本较高,适用于中级或者高级前端开发工程师)
3.Anagle
适用于大型项目,项目开发较为沉重,不够灵活
二、MVVM(软件设计模式)
Vue.js根据这种模式设计出来
M: model数据模型
V:view 视图层
VM:View-Model视图模型
数据模型发生修改=》通知VM=》通知View视图做出响应的更新
View更改后=》通知VM=》通知Model数据模型,更新数据
三、生命周期
生命周期的第一步首先是创建vue实例,并且进行初始化。
vue实例初始化阶段
beforeCreate
在初始化的时候调用了beforeCreate,完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能访问数据模型中的data和methods中的方法。
created
在初始化完毕之后,完成vue的数据注入以及数据监听操作,该构造的执行意味着vue实例创建完毕,可以进行data数据模型和和methods方法的访问
vue实例挂载阶段
beforeMount
在created之后,vue会判断实例中是否含有el属性,如果没有vm.
m
o
u
n
t
(
e
l
)
,
接
着
会
判
断
是
否
含
有
t
e
m
p
l
a
t
e
属
性
,
如
果
有
将
其
解
析
为
一
个
r
e
n
d
e
r
f
u
n
c
t
i
o
n
,
如
果
没
有
将
e
l
指
定
的
外
部
h
t
m
l
进
行
解
析
。
这
里
只
完
成
了
模
板
的
解
析
但
是
数
据
并
没
有
绑
定
到
模
板
中
。
m
o
u
n
t
e
d
创
建
v
m
.
mount(el),接着会判断是否含有template属性,如果有将其解析为一个render function,如果没有将el指定的外部html进行解析。这里只完成了模板的解析但是数据并没有绑定到模板中。 mounted 创建vm.
mount(el),接着会判断是否含有template属性,如果有将其解析为一个renderfunction,如果没有将el指定的外部html进行解析。这里只完成了模板的解析但是数据并没有绑定到模板中。mounted创建vm.el替换el,实际上完成的是数据绑定操作,在其间执行乐render函数,将模板进行了解析,将数据进行了动态绑定
vue实例更新阶段
beforeUpdate
更新虚拟dom节点
updated
完成了页面的重新渲染
vue实例销毁阶段
beforeDestroy
销毁之前调用,此时可以访问vue实例
destroyed
完成了监听器,子组件,事件监听等移除,销毁vue实例对象。
四、模板语法
简单介绍
vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有 Vue的模板都是合法的 HTML,所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接编写渲染函数及render,使用可选的 JSX 语法(react采用的就是jsx语法)。
文本插值
{{msg}} 用双大括号将data数据模型中的字段渲染到页面中
{{ msg + ‘Nihao’ }} 双大括号内部可以放js表达式
指令
v-bind:动态绑定元素上的属性
v-bind:title 简写=> :title=“title”
v-html:绑定html代码片段
富文本编辑器
有格式的内容 => 相应html代码片段
v-on:动态绑定事件
v-on:click=“clickHandler”
简写 => @click=“clickHandler”
条件渲染
v-if v- else
v-show
区别:
v-if v-else 通过控制dom节点的渲染,实现显示与隐藏
v-show 通过控制dom节点css样式中display,来实现显示与隐藏
频繁的显示与隐藏某个组件时,用v-show较好
v-if会频繁渲染dom树,占用资源,影响代码运行效率
列表渲染
v-for
class绑定
style绑定