Web05-window对象中的常见属性/DOM文档对象模型/前端MVC设计模式/前端MVVM设计模式/VUE框架/ElementUI

最新推荐文章于 2024-01-11 14:31:05 发布
最新推荐文章于 2024-01-11 14:31:05 发布
阅读量123 收藏
点赞数
分类专栏： Web 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_70887819/article/details/127161304
版权

目录

window对象中的常见属性

DOM文档对象模型

前端MVC设计模式

前端MVVM设计模式

VUE框架

VUE相关指令

ElementUI

CDN地址

window对象中的常见属性

  • location 位置

  • history 历史

    • history.length 历史页面数量

    • history.back() 返回上一页面

    • history.forward() 前往下一页面

DOM文档对象模型

  • 包含和页面相关的内容

  1. 通过选择器找到页面中的元素对象

let 元素对象 = document.querySelector("选择器");

  1. 获取或修改元素的文本内容

元素对象.innerText 获取

元素对象.innerText = "xxx"; 修改

  1. 获取或修改控件的值

控件对象.value 获取

控件对象.value="xxx"; 修改

  1. 创建元素对象

let 元素对象 = document.createElement("标签名");

  1. 添加元素到某个元素里面

父元素对象.append(新元素对象);

  1. 获取body

document.body

前端MVC设计模式

  • MVC设计模式是将实现一个业务的所有代码划分为三部分

  • M: Model 模型,指数据模型, 前端数据一般都来自于服务器

  • V: View 视图, 指页面相关代码

  • C: Controller 控制器, 指将数据展示到页面中的过程代码

  • MVC设计模式中的C控制器部分将数据展示到页面中的过程中需要频繁进行DOM相关操作(遍历查找元素),频繁进行DOM操作浪费资源, MVVM设计模式就是为了解决此问题而诞生的

前端MVVM设计模式

  • M: Model 模式,指数据模型, 前端数据一般都来自于服务器

  • V: View 视图, 指页面相关代码

  • VM: ViewModel 视图模型, 视图模型将页面中可能发生改变的元素和某个变量在内存中进行绑定,当需要改变页面中的元素的之后只需要从内存中找到对应的元素即可, 不需要频繁的遍历查找,从而提高了执行效率

VUE框架

  • 把CDN服务器上的js文件下载到本地是如何加载

  • VUE框架的运行原理:

Vue对象相当于是MVVM设计模式的VM(视图模型),负责将页面中可能发生改变的元素和某个变量进行绑定, 同时会不断的监听变量值的改变,当变量的值发生改变时Vue对象会从绑定关系中找到变量所对应的页面元素并将元素内容进行改动

VUE相关指令

  • {{变量}}: 插值, 让此处的文本内容和变量进行绑定

  • v-text="变量": 让元素的文本内容和变量进行绑定

  • v-html="变量": 让元素的标签内容和变量进行绑定

  • v-bind:属性名="变量" 让元素的某个属性的值和变量进行绑定, 简写是去掉v-bind直接写 :属性名

  • v-model="变量",双向绑定,主要用在各种控件中, 变量的值会影响控件的值, 控件的值也会影响变量的值

  • v-on:事件名="方法"; 事件绑定, @事件名="方法"; 简写

  • v-for="变量 in 数组"; 循环遍历指令, 遍历的过程中会自动生成页面元素

  • v-if="布尔值变量"; true则显示元素 false则不显示(删除元素)

  • v-else 作用是和v-if状态取反

  • v-show="布尔值变量";true则显示元素 false则不显示(隐藏元素),

频繁切换显示状态时使用

ElementUI

官网地址: http://element.eleme.cn

CDN地址

  • VUE:

https://cdn.staticfile.org/vue/2.6.14/vue.min.js

  • ElementUI:

https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css

     https://cdn.staticfile.org/element-ui/2.15.9/index.min.js

teyruthy
关注
专栏目录
前端面试的话术集锦第 11 篇：高频考点（React和Vue两大框架）
念兮为美
09-11 454
前端面试的话术集锦第 11 篇：高频考点（React和Vue两大框架）什么是 MVVM？比之MVC有什么区别？什么是Virtual DOM？为什么Virtual DOM比原生DOM快？前端路由原理？两种实现方式有什么区别？Hash 模式和History模式；两种模式对比；Vue 和 React 之间的区别；React和Vue虽然是两个不同的框架，但是他们的底层原理都是很相似的，无非在上层堆砌了自己的概念上去。
WEB Window 常用属性和函数
yKan_SF
03-01 690
1、open方法：window.open(URL,name,features,replace) 功能：打开一个新的窗口，并在窗口中装载指定URL地址的网页。 小技巧：该方法经常用于在打开一个网页时自动打开另一个窗口。  URL 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
【无标题】
m0_59559903的博客
07-29 215
web2
Web APIs BOM- 操作浏览器-Window对象
黑马程序员官方博客
08-02 300
BOM(Browser Object Model ) 是浏览器对象模型window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）document 是实现 DOM 的基础，它其实是依附于 window 的属性。.........
浏览器环境 - window 对象 - 属性介绍
weixin_33834679的博客
09-13 685
1 origin window.origin使用返回的是当前网页的网址。打开百度首页，并在控制台中输入 window.origin 控制台中会输出"https://www.baidu.com"，并不包含查询字符串，比如浏览器地址栏输入https://www.baidu.com/?nDos=great。打开百度首页之后，使用window.origin也不会...
window属性学习
sun_clouds的博客
10-10 223
window属性学习       screen属性：获得客户端屏幕信息的。其实screen其实是一个对象       width;height;宽高       availWidth;availHeight;可用宽高    location：地址栏属性       href：地址栏属性       reload刷新    history:历史纪录属性       forward(
JavaScript对象分类、前端MVC设计模式、VUE
weixin_70634087的博客
08-29 346
JavaScript对象分类内置对象: 包括string undefined numberundefinedboolean等BOM: 浏览器对象模型DOM: 文档对象模型BOMBrowser Object Model: 浏览器对象模型undefined 包含和浏览器相关的内容.window对象: 此对象里面的属性和方法称为全局属性和全局方法undefined 访问时可以省略window.window中常见的方法:isNaN();判断变量是否是NaN。......
深入代码理解MVC模式、MVP模式和MVVM模式
weixin_44433834的博客
04-15 541
作者： 麦乐 不知道看了多少遍有关三者区别的文章，每个都是有图有真相，但是当被问起三者的区别，还是觉得说不清楚，因为没有...
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
vue框架使用
最新发布
qq_45645848的博客
01-11 1193
前端vue基础知识总结，汇总
window对象属性查询器
w00106702的专栏
05-17 522
点击“查询”按钮，展示window对象的属性表格。点击任意属性名称进入查看。如点击属性navigator。 代码清单<meta name="renderer" content="webkit"> <html> <head> <meta charset="GBK"/> <style> #show{
前端开发：JS中的Window对象详解
软贱开发攻城狮
09-19 4520
在前端开发过程中，关于全局对象的使用是非常常用的，其实每个JS环境中都一个全局对象，尤其是在实际开发过程中全局范围内创建任何变量都是这个全局对象的属性，且任何函数都是它的方法。在实际浏览器环境下，Window对象就是全局对象的标志，它表示包含网页的浏览器窗口。那么本篇文章就来分享一下关于window对象相关的知识点，方便查阅使用。
windows方法和属性
y1238r的博客
09-01 2714
介绍了window的方法和属性，
浏览器window对象常用属性及方法有哪些
dogface博客
11-02 608
BOM：Browser Object Model 是浏览器对象模型，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象也是核心对象，其他对象都是该对象的子对象。在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。浏览器介绍BOM对象包含(1)window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性。(2)document 对象，文档对象；
web的浏览器对象
程序员小白的博客
11-17 1089
浏览器对象1. BOM与DOM2. 顶级对象 window 常用属性和方法3. 文档对象documnet 与表单的elements 集合1. 文档对象 document2. 表单的elemnts集合结束语 1. BOM与DOM 对于嵌入网页的JS来说，宿主对象就是浏览器提供的对象，又称为浏览器对象； 浏览器对象模型（简称BOM） 主要包括 windows、history、location和documnet等对象，window 对象是整个 BOM 的顶层对象，其他对象所处位置及其关系如下图所示： 文档对象模
Web APIs-Window对象
m0_75160723的博客
10-29 128
（1）在JavaScript中window 对象表示浏览器窗口或标签页。（2）window对象是一个全局对象，也可以说是JavaScript中的顶级对象。（3）document、alert()、console.log()都是window的属性，基本BOM的属性和方法都是window的。(4)window对象下的属性和方法调用的时候可以省略windowBOM对象（浏览器对象模型）
JavaScript窗口（window）对象介绍
算法与编程之美
07-29 4777
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！引言windo...
Javaweb中JavaScript的window对象
小明的博客
12-05 1002
<head> <script type="text/javascript">javascript组成部分： EMCAScript（基本语法） BOM( Browser Object MOdel) 浏览器对象模型. 浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要 操作浏览器的一些属性，我就可以通过浏览器对象模型的对象进行操作。window 代表了一个新
关于Web设计、开发中window对象的资料
ilanyan的专栏
06-03 1261
            What is "window" ？                                         window 代表浏览器中一个打开的窗口。Window的属性  属性 描述 cl
2024前端面试必备：HTML5/CSS3/JS/TS/Vue/React兼容与样式深度解析
面试中可能会询问Vue的MVVM模式、单文件组件、Vuex状态管理、Vue Router路由管理以及Vue的生命周期等方面的问题。 **React18** React是Facebook推出的用于构建用户界面的库，以其虚拟DOM和组件化思想著称。React18...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值