目录

一、VUE框架原理 1. 了解VUE框架

Vue框架采用MVVM设计模式进行构建，该模式的核心是Vue对象，它充当了MVVM模式中的视图模型角色。

2. VUE框架原理

Vue对象会将页面中需要调整的元素与data中的变量实现关联，关联确立后，它会持续关注data中变量数值的变动。一旦变量值有所变动，系统便会自动定位到相应的绑定元素，并促使这些元素同步更新。这一更新过程无需人工介入，极大提升了开发速度。此外，这种方法相较于频繁的DOM操作来调整页面结构，仅需监控特定区域，从而进一步提升了执行效率。

3. MVC设计模式

把一个业务实现分成三部分：

：模型，数据模型 是服务器获取到数据的部分代码

View：视图，页面部分代码

：控制器，把数据模型中的数据，通过实现 展示到页面中

存在一个不足之处，即需频繁进行DOM操作，这会导致对整个文档对象模型进行多次全面扫描，一旦页面内容较多，扫描的效率便会降低。

4. MVVM设计模式

：模型，数据模型 是服务器获取到数据的部分代码

View：视图，页面部分代码

视图模型，这一模型负责将页面中可能发生变化的元素与相应的变量进行关联。一旦变量发生变动，与之绑定的元素值亦会同步更新。此过程无需进行频繁的扫描，从而显著提升了处理效率与用户的使用体验。

二、引入VUE框架 1. 本地引入

将框架文件下载至个人电脑，随后在通过外部引入的过程中，利用本地链接完成导入操作。

2. 网络引入

直接从服务器端导入项目，而在使用JS进行外部引用时，则通过指定网络路径来完成导入操作。

三、安装Vue插件

将文件进行转换，接着执行搜索操作查找Vue，安装完成程序后，请重启IDEA。

完成上面准备工作就可以用Vue框架 完成开发工作了。

四、使用方式 1. 文本相关

在标签中定义的变量，通过插值的方式，将文本内容与变量实现关联。

v-text属性用于在标签内，实现文本内容与变量之间的关联绑定。

v-html属性：在标签内部使用，用于将元素的显示内容与变量进行关联绑定。

2. 属性绑定

将元素属性数值与变量实现单向关联，一旦属性数值出现变动，变量亦随之调整。

结构：

v-bind:属性名=“变量”;

或 :属性名="变量";

3. 双向绑定

在标签定义中实现，控件数值与变量间的双向关联，变量变动同步反映于页面，反之，页面的任何修改也会相应地作用于变量。

结构：v-="变量"

4. 事件绑定

绑定元素的事件，当条件满足触发时，会触发方法

如：

当鼠标点击发生时，会触发的事件：使用v-on指令绑定方法，或者通过@符号指定方法。

5. 遍历

让元素显示数量和数组进行绑定，变量数组中每一个对象

在遍历数组变量时，通过v-for指令，我们可以将每个元素及其索引分别赋值给变量和i，其中i代表当前元素的索引值。

汽车列表

编号	品牌名称	售价	类型
{{i+1}}	{{car.name}}	{{car.price}}	{{car.type}}

禁止对以下车辆进行修改：比亚迪汉，售价为25万元，属于轿车类别。 该车型名为特斯拉M3，售价为23万元，属于轿车类别。 该车型名为蔚来ES8，售价为55万元，属于SUV类别。 } })

6. 判断

将元素的呈现状态与变量相连接，当变量值为真时，元素将显现，反之则不呈现。

结构：v-if = ”变量“ 和 v-else

基本信息就这些，可以进行简单使用了