‘’ + userArr[i].userName + ‘’ +
‘’ + userArr[i].userSex + ‘’ +
‘’ + userArr[i].userAge + ‘’ +
‘’;
}
userBox.innerHTML = str;
**以上开发模式的特点是:
1、必须直接操作DOM,动态改变DOM对象的内容与样式。
2、必须要进行大量的字符串拼接,才能拼接出动态内容,然后绑定到视图(html)上。
3、这种绑定方式是单向的。即:使用javascript将动态数据绑定到DOM上,但是用户操作DOM引起的变化,却不能反映到javascript的动态数据上。**
MVVM框架分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)
**1、M:模型层,主要负责业务数据相关。
2、V:视图层,顾名思义,负责视图相关,细分下来就是html+css层。3、VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点。**
MVVM支持双向绑定,意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的相互解耦。
Vue.js : 渐进式JavaScript 框架,它就是一个前端MVVM框架。 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab。 Vue的主要特点就和它官网所介绍的那样: 1.简洁 2.轻量 3.快速 4. 数据驱动 5.模块友好 6.组件化。
====================================================================
**1、打开此链接:https://cdn.jsdelivr.net/npm/vue/dist/vue.js
Ctrl + S 把vue.js文件保存到本地使用。**
2、或者在body标签中加入下面这句话:
样例代码:
{{msg}}
运行结果:
===================================================================
样例代码:
{{msg}}
效果截图:
可以看到我们操作的view控件数据,直接影响到了我们的vm.data,并且又进一步影响到了页面,这就是Vue的双向数据绑定。整个过程的原理如下图所示:
================================================================
Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。
在前面,我们一直使用的是字符串差值的形式渲染文本,但是除此方法之外,vue还提供了其他几种常见的文本渲染方式:
**1. v-text:更新元素的innerText
2. v-html:更新元素的innerHTML**
样例代码:
效果截图:
在Vue中,我们可以使用 { { } } 将数据插入到相应的模板中,这种方法是一种文本插值。 使用这种方法,如果网络慢或者JavaScript出错的话,会将 { { } } 直接渲染到页面中。 值得庆幸的是,Vue还提供了v-text和v-html来渲染文本或元素。这样就避免了将 { { } } 直接渲染到页面中。
================================================================
如果想让html标签中的属性,也能应用Vue中的数据,那么就可以使用vue中常用的属性绑定指令:v-bind
样例代码:
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
web浏览器中的javascript
- 客户端javascript
- 在html里嵌入javascript
- javascript程序的执行
- 兼容性和互用性
- 可访问性
- 安全性
- 客户端框架
window对象
-
计时器
-
浏览器定位和导航
-
浏览历史
-
浏览器和屏幕信息
-
对话框
-
错误处理
-
作为window对象属性的文档元素
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
window对象
-
计时器
-
浏览器定位和导航
-
浏览历史
-
浏览器和屏幕信息
-
对话框
-
错误处理
-
作为window对象属性的文档元素
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-LyJMPyTj-1712555862445)]