- 博客(8)
- 收藏
- 关注
原创 Vue前端框架——Vue的生命周期
常用的生命周期函数mounted: 启动定时器、发送ajax请求、绑定自定义事件等初始化操作。beforeDestroy: 清除定时器、解绑自定义事件等收尾工作。关于销毁Vue实例一般不会在beforeDestroy操作数据,因为即使操作数据,也不会再触发更新流程了。
2022-09-28 14:18:09
450
原创 Vue前端框架——列表渲染时key的重要性
因为将新数据添加的原数据的尾部按照顺序生成虚拟 DOM 后新数据的 key 应该为3,key 为3的话旧虚拟 DOM 中没有,那就只能乖乖的将新数据的整个 li 元素转换为真实 DOM。剩下的对比都遵循这个逻辑,依次生成真实 DOM,但是对比到最后一个发现 key 为3的在旧虚拟 DOM 中不存在,那就直接将 key 为3的 li 元素整个转换成真实 DOM,最后就出现了数据错乱的样子。在将索引作为 key 的那一小节中,大篇幅的讲解了其中的原理以及 Vue 的虚拟 DOM 对比算法是如何进行对比的。
2022-09-28 09:58:49
790
原创 Vue前端框架——监视属性
当被监视的属性发生变化时,回调函数handler会被自动调用并进行相应的操作。所要监视的属性必须存在,才能进行监视,否则不会有效果,控制台也不会报错。深度监视:Vue中的watch默认不监测对象内部值的改变。配置deep:true就可以检测到对象内部值的改变了注意:在使用watch监测数据是要根据数据的具体结构,再决定是否使用深度监视。Vue自身可以监测对象内部值的改变,但由Vue提供的watch默认不行。
2022-09-22 17:07:34
755
原创 Vue前端框架——浅析MVVM模型
其实主流的前端框架多多少少都遵循了 MVVM 模型的原则,都是通过 VM(视图模型)将 V(视图)与 M(模型)建立连接,只不过不同的框架的语法有所不同,大体上的逻辑都是一样的。
2022-09-19 16:09:07
656
原创 Vue前端框架 —— Vue 实例中 el 和 data 的两种写法
在 Vue 2.0 中创建 Vue 实例时,通常情况下与这两个配置项都是按照一种固定的方式写的,像下面这样。除了上面那一种常用写法之外,el 与 data 都分别有另一种写法。el 的另一种写法使用起来会更灵活,data 的另一种写法在组件中使用较为频繁。在原来代码的基础上将创建的 Vue 实例赋值给一个变量,官方推荐使用 "vm" 当做变量名。将 Vue 实例赋值给 vm 之后在控制台中输出一下 vm( Vue 实例 )下图就是 vm 的输出结果,输出结果为一个实例对象。展开后会出现很多以美元符号 '..
2022-08-29 16:17:12
1755
原创 Vue前端框架——单向数据绑定与双向数据绑定
单向数据绑定:数据只能从 data 流向页面。双向数据绑定:数据不仅能从 data 流向页面,还能从页面流向 data。双向绑定一般都应用在表单类元素上(如:input、select等)
2022-08-10 14:00:00
3719
原创 Vue前端框架——实例与容器之间的关系
在了解Vue实例与容器之间的关系前,要先弄清楚实例Vue实例是options主要包括DOM结构,通常使用div标签作为容器,每个容器都要有的标识。既然弄清楚了Vue实例与容器分别是什么,不写个代码确实有点说不过去。在代码中创建了一个,并且通过实例中的为实例指定了要服务的,从而展现了既然容器与实例之间是一对一的关系,那程序运行后肯定是没有任何问题的。除非代码本身写的就有毛病。Vue实例与容器之间有没有可能存在一对多的关系,分别是、。既然一个实例要服务多个容器,因为实例的。...
2022-07-22 22:00:00
725
原创 初学者必会的Vue两种使用方式
本篇文章主要分享,不涉及构建大型应用需要用到的(脚手架)。作为初学者在前期学习只需一个html文件就可以搞定。在html文件中引入Vue的开发环境后就可以使用Vue中所有的函数和API了。引入Vue开发环境的方式无非就两种,看似简单,但是在面对不同版本之间如何选择合适的开发环境也是一个令人头大的问题,接下来我将分享如何正确引入不同版本Vue的开发环境。......
2022-07-20 22:00:00
905
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人