vue钩子函数（Vue钩子函数）



10月31号笔记

今日所学：VUE模板语法，响应式API，属性绑定，类与内联样式

VUE模板语法：

先前所学习的VUE只是简单的了解了这一个框架的基本使用，但是真的说这样一个内容的了解和对应添加内容的掌握，其实是少的可怜的。今天捡起来再深入学习。

VUE与其说是一个HTML的扩展，不如认为是一个JS的一个扩展。

动态数据的展示使用“差值表达式”即可，既“ {{ 所需要表达的内容 }} ”。内部也不一定为单个变量，导入一个运算数据、函数也都可以。

这就使得我们需要响应式API来处理这个问题，我们先使用ref来解决，注意，在JS当中对这一个数据进行处理时，我们所处理的ref中的属性value，所以在<scrip_t>部分中，需要使用.value，但是当HTML的使用数据，则直接使用ref的所需用户名称即可。

响应式API渲染流程：

*注意：这个响应式API的过程本质上是重新渲染的过程，但是为了提高效率，会重新建立一个DOM树，然后再由新的DOM树和原本的DOM树进行一次比较，找出不同后进行局部的渲染（会利用Diff算法来找不同），而非所有内容全部渲染。同时，为了减少冗余DOM树的构建，会构建一个“异步更新队列”，以实现多个API的批量处理，而不是一个一个来解决。

实例代码如下。

虽然reactive和ref是为了解决不同目标而设计的，但是ref由于也可以用与处理对象等数据类型，同时为了减少代码的复杂度，统一使用ref也是没有问题的。

其中，需要向编译器进行提示，表示这里的属性是由attribute绑定来确定的。事例如下。

然后通过接入一个随机转换就可以实现一般的动态闪现内容的功能了。

类与内联样式：

这里所指的“类”，是指标签所属的类，既后续样式表所更改的类形式。

通过将类进行v-bind操作绑定，就可以实现整体数据的捆绑操作，这是一个实现进一步动态化的过程。内联样式也是相同的，只不过将变化的对象更改为了style而已。

实例代码如下，这样就可以间隔两秒更改view的class的指向了，默认指向为box。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/72684.html