Vue页面组成及常用属性

素颜马尾好姑娘i 2024-03-27 14:55 97阅读 0赞

### 一、Vue页面组成 ###

目前的项目中，Vue页面都是采用组件套娃的形式，由一个一个的组件拼接而成整个页面。一个组件就是一个.vue文件。组件通常由template和script两部分组成：

![在这里插入图片描述][62ad7f83e87c483bb8913f5e45beb917.png]  
template部分：页面展示的具体元素内容，比如文字、文本框、按钮、图片等。  
script部分：页面涉及的具体方法函数、交互等代码。

template内容举例如下：

![在这里插入图片描述][38ccbbfa8afb4b73b03a3db8e5a83a50.png]

### 二、script内容 ###

###### 2.1 data() ######

定义页面上各个文本框的值，实现数据双向绑定并自动装填进data：

![在这里插入图片描述][80144ecf10e1404ab12bc7f190dde926.png]

###### 2.2 mounted()、methods ######

mounted里面主要定义在页面数据加载完成后执行的方法：比如你的页面已经加载完了，然后通过操作可以生成一个二维码图片，页面上需要在某个区域展示这个二维码，那么展示二维码这个方法的代码就写在mounted里面。

method里面主要定义对页面执行的所有操作，操作对应的方法函数都写在method里面：

![在这里插入图片描述][faf14896600a41b3a54b370db6f66ef3.png]

###### 2.3 created() ######

页面元素内容加载前需要执行的方法，都放在created()下面。

比如你要获取当前的时间戳,然后把时间戳赋值给页面上的某个文本框作为该文本框的初始值,那么获取当前时间戳的方法调用就要写在created()下面：

![在这里插入图片描述][89743ffe2acd45c4b73792686392c1ab.png]

###### 2.4 watch() ######

watch主要用于侦听vue实例响应数据的变化，通常用于处理一些需要动态变化的值：比如下图所示，监听activityId值的变化，并将变化后的值和merchantNo的值合并起来，作为couponCode的值：

![在这里插入图片描述][fdd92c7e9ffb47439030b2111d0a600c.png]

此外watch只能监听一层，因为我们是要处理在form下的数据，一层是监听不到的，所以需要使用deep:true做深度监听。immediate:true 表示初始化的时候就监听，设为false则初始化不监听，只有数据有变化时才监听。

###### 2.5 computed() ######

computed主要用于复杂的计算，并且由于有缓存机制，性能开销比较小。使用方法如下图所示：

![在这里插入图片描述][c04f70af5cf649c2847bb146c63d2c04.png]  
其实简单的计算，使用methods也能达到同样的效果。但由于computed有缓存机制，只要数据层值不改变，computed就不会重新去计算一次，而methods里的函数在每次调用时都要执行，因此复杂计算时，建议使用computed：

![在这里插入图片描述][28183aef1e1c403db6a7dbc07eeceac0.png]  
此外在调用时，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。比如上图所示，调用computed直接用：\{ \{fullName\}\}，而调用methods则必须以函数的方式调用：\{ \{Names()\}\}。

[62ad7f83e87c483bb8913f5e45beb917.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/09580fa5a5c84a999f210ca3c142a785.png
[38ccbbfa8afb4b73b03a3db8e5a83a50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/afba39d92dfd48e1861c04bf0ae777c9.png
[80144ecf10e1404ab12bc7f190dde926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8c8870f9c46b4f188c10b38000852e60.png
[faf14896600a41b3a54b370db6f66ef3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5ff48082acd349219cfde3ebd1251bb8.png
[89743ffe2acd45c4b73792686392c1ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/79bb15d8e45d4bc5a500ea88ef9c265d.png
[fdd92c7e9ffb47439030b2111d0a600c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3992cffad4fb47368596c18711c1fd73.png
[c04f70af5cf649c2847bb146c63d2c04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e5af17afd83041e6b8145c9e18dbefb9.png
[28183aef1e1c403db6a7dbc07eeceac0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/bdbf8201ca3243069602087f38ff4f12.png