20240910uniapp学习工作-VUE

Vue 在所有的数据绑定中都支持完整的 JavaScript 表达式:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

${ } 用于模板文字, 模板文字是一种允许您插入变量、表达式、函数调用等内容到字符串中的方法，使用${}将这些内容包裹起来，使其成为字符串的一部分.

可以在绑定的表达式中使用一个组件暴露的方法, formatDate() 就是组件中暴露的方法：

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

模板中的表达式将被沙盒化, 仅能够访问到有限的全局对象列表. 该列表中会暴露常用的内置全局对象, 比如 Math 和 Date.

没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

指令 Directives

指令是带有 v- 前缀的特殊 attribute. v-bind 和 v-html 也是指令. 指令 attribute 的期望值为一个 JavaScript 表达式(除了少数几个例外, v-for, v-on 和 v-slot). 一个指令的任务是在其表达式的值变化时响应式地更新 DOM. 比如 v-if:

<p v-if="seen">Now you see me</p>

这里, v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素.

我们项目中有这样一段代码, length 是从后台获取到的数据的个数, 这个view就是根据 length 是否大于零来决定是否显示的:

<view v-if="length>0" class="mt10 mb10">
	<picker mode="selector" @change="pickerChange" range-key="name" :range="noticeTypes">
		<view>
			……
		</view>
	</picker>
</view>

下午看项目代码, 用到了 display: flex, 这个以前学过, 完全忘了

羡阳公子有一篇介绍的文章. 看了下.

display 是 css 的一个属性, 用于设置元素是否被视为块级或行级盒子, 以及用于子元素的布局, 例如流式布局, 网格布局, 或弹性布局. 

形式上, display 属性设置元素的内部和外部的显示类型. 外部类型设置元素参与流式布局, 内部类型设置子元素的布局. 而 display: flex 就属于内部类型, 内部显示类型定义了该内容布局时的格式上下文的类型, flex 表示该元素的行为类似块级元素并且根据弹性盒模型布局它的内容.

flex 弹性盒子布局是怎么回事呢?

display:flex 是一种布局方式.可以用于容器中,也可以应用于行内元素. 

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item）。

项目的属性有

1. order, 定义项目的排列顺序,数值越小,排列越靠前,默认为0
   
2. flex-grow, 定义项目的放大比例, 默认为0, 即如果存在剩余空间, 也不放大. 如果所有项目的 flex-grow 属性都为1, 则它们将等分剩余空间 (如果有的话). 如果一个项目的 flex-grow 属性为 2, 其他项目都为1, 则前者占据的剩余空间将比其他项目多一倍. 有点像安卓的 layout-weight.
   
3. flex-shrink, 定义项目的缩小比例, 默认为1, 即如果空间不足, 该项目将缩小. 如果所有项目的 flex-shrink 属性都为1, 当控件不足时, 都将等比例缩小. 如果一个项目的 flex-shrink 属性为 0, 其他项目都为1, 则空间不足时, 前者不缩小. 负值对该属性无效.
   
4. flex-basis, 定义了在分配多余空间之前, 项目占据的主轴空间. 浏览器根据这个属性, 计算主轴是否有多余空间. 它的默认值为 auto, 即项目的本来大小. 它可以设为跟 width 或 height 属性一样的值(比如350px), 则项目占据固定空间.
5. flex, 是 flex-grow, flex-shrink 和 flex-basis 的简写, 默认值为 0 1 auto 后两个属性可选. 该属性有两个快捷值: auto(1 1 auto) 和 none(0 0 auto). 优先使用这个属性, 而不是单独写三个分离的属性, 因为浏览器会推算相关值.

项目中的代码是:

.container {
        display: flex;
        flex-direction: column;
    }

意思是 container 类型容器中的项目, 按比例放大缩小并以本来大小占据主轴空间.

flex-direction: column 意思是主轴为垂直方向, 起点在上沿.

container 的其他属性:

.container {
		width: 95%;默认设置内容区域的宽度,使用外层元素的容纳区块宽度的95%
		margin: 0 auto;上下外边距为0;左右外边距让浏览器自己选择合适的边距.
		align-content: center;将项目放置在中点
	}