初步了解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.$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绑定

总结

以上就是一些vue的基本知识，本文仅仅简单介绍了些许vue使用，有不足之处还请指正。