前端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完成猜数字和加减乘除运算练习。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ji-chu/92216.html