Java学习篇——JavaWeb：MVC，MVM设计模式，VUE（未完待续）

前端MVC设计模式

MVC设计模式:实际上就是把前端实现一个业务功能的代码划分为3部分

Model : 模型 , 指数据模型 对应的是从服务器获取到数据的部分代码.( 提交的数据  json)

// 通过自定义对象封装数据
    let arr = [{name:"小米手机",price:"3000",count:500},
        {name:"小米电视",price:"3000",count:500},
        {name:"华为手机",price:"3000",count:500},
        {name:"华为电视",price:"3000",count:500}]

View: 视图 , 指页面部分代码   网页部分代码

Controller: 控制器, 把数据模型的内容 展示到页面中的过程称为控制器部分     将请求到的数据展示到网页中

前端MVC设计模式的弊端: 需要在Controller部分 频繁进行DOM操作(遍历查找元素过程)会影响效率, 从而影响用户的体验度

M,V,VM设计模式

Model : 模型 , 指数据模型 对应的是获取到数据的部分代码.
View: 视图 , 指页面部分代码
VM: 视图模型, 将页面中可能发生改变的元素在内存中和某一个变量进行绑定, 当变量的值发生改变时,会自动从内存中找到和变量对应的元素并进行修改, 不需要像MVC设计模式中每次进行遍历查找, 从而提高了效率,提高了用户体验度.

VUE框架

VUE框架是基于MVVM设计模式的前端框架.

工作原理:（双向绑定是核心） Vue框架中的Vue对象是MVVM设计模式中的VM视图模型, 此对象负责将页面中改变的元素和data里面的变量进行绑定, 初始化时,变量的值是什么页面就显示成什么, 并且Vue对象会一直监听着data里面变量值得改变, 当值发生改变时,会自动找到与其绑定的元素并且让元素跟着发生改变,改变元素的过程是不需要程序员参与的, 从而提高了开发效率, 由于这个过程不需要频繁的进行DOM操作(遍历查找元素) 从而提高了执行效率.

引入前端 三方框架的两种方式:

1、把框架文件下载到本地,复制到自己的工程中进行引入
2、从CDN服务器直接引入到自己工程.

 

苍老师网站（私信获取，不方便发），配置文件下载最后一个--选择引入Vue--将代码粘贴到页面中（或者进入网页将源代码另存为文件，复制到当前目录下导入。）--如下：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script src="xxx/xxx/xxx/xxvue.js"></script>

Vue常用指令

• {{变量}} : 插值, 让此处的文本内容和变量进行绑定 ,不需要依赖某个标签存在  写在标签外
• v-text=“变量”: 让元素的文本内容和变量进行绑定, 需要依赖标签  写在标签内<p>
• v-html=“变量”: 让元素的标签内容和变量进行绑定
• v-bind:属性名=“变量” , 让元素的某个属性的值和变量进行绑定 , 简写可以把v-bind去掉

 

• v-model=“变量”: 让控件的value属性和某个变量进行双向绑定, 双向绑定: 变量会影响页面显示的内面元素的内容改变也会影响变量, 当需要从代码中获取控件的值时使用双向绑定
   

  

  v-on:事件名=“方法”, 绑定元素的事件, 方法需要声明在Vue对象里面的methods属性里面, 简写是@事件名=“方法”
  
  @click 点击事件    按钮点击出现   methods写在Vue里面，不用这个方法写在Vue外面。
  @change 值改变事件   例子：下拉框
  @blur 失去焦点事件      例子：鼠标点到其他文本框时，当前文本框就就失去焦点。  一般用来检测用户名是否重复。(做输入框的输入)

• 

idea中安装Vue插件

File->Settings->Plugins 搜索Vue 如图所示 , 安装完之后重启idea

引入网络路径的vue.js文件。

<!--引入网络版的Vue框架 Vue插件才会正常工作-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>

 

idea中添加自定义模板代码

• File->Editor->Live Templates

• 

  练习，能看到的请使用VUE完成猜数字和加减乘除运算练习。