Web前端—Vue

   Vue是一套前端框架，免除原生JS中的DOM操作，简化书写。基于MVVM思想，实现了数据的双向绑定，将编程的关注点放在数据上。

框架

框架是一个半成品软件，是一套可重用的，通用的，软件基础代码模型。基于框架进行开发，更加快捷高效。

• 框架规定了自己的编程方式，是一套完整的解决方案
• 使用框架的时候，由框架控制一切，我们只需要按照规则写代码

MVVM

Model是数据模型

VIEW是视图层，负责数据的展示，也就是HTML文件的标签，也就是DOM元素

• 在前端中经常要通过 JS代码 来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM

• MVVM通过数据双向绑定让数据自动地双向同步

  • V（修改数据） -> M随之修改
  • M（修改数据） -> V随之修改
  • 数据是核心

VUE使用方式

1.在HTML页面引入vue.js文件

这个文件是官方提供的一个文件，要使用vue必须引入这个文件

2.在JS代码区域创建vue对象，定义数据模型

• el是vue控制的区域，类似于CSS的选择器
• data是数据模型对象

3.编写视图

• 视图中的message是绑定的数据模型
• {{ }}是插值表达式，作用是把数据模型的内容展示出来，内容可以是变量，三元运算符，函数调用，算数运算

常用的vue指令

下面举几个例子：

1.通过v-bind绑定href

2.通过v-on让点击按钮绑定事件

3.通过v-if输入数字展示对应文本

4.通过v-for进行列表渲染展示

生命周期

指一个对象从创建到销毁的整个过程。

生命周期的八个状态：每触发一个生命周期事件，会自动执行一个生命周期方法

我们常常在mounted方法来发送请求到服务端来请求数据