介绍uni

那么标签和组件有什么区别，不都是用尖括号包围起来一段英文吗？

vara;functionfuna(){}在上述例子中，传统写法的定义的变量globalvar和函数globalfun，可以在exportdefault{}里使用，但无法在模板里直接绑定和调用。模板里只能绑定data里的变量、调用methods里的方法。

相比Web平台，Vue.js在uni-app中使用差异主要集中在两个方面：

uni-app项目对vue3.0的支持版本情况如下：

注意事项

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应性系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。

数据绑定最常见的形式就是文本插值：

里的内容将会被替代为对应数据对象上msg的值。无论何时，绑定的数据对象上msg发生了改变，插值处的内容都会更新。

迄今为止，在我们的模板中，我们一直都只绑定简单的property键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。

示例一

示例二

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

错误示例

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单：

你不应该在模板表达式中试图访问用户定义的全局变量。

指令是带有v-前缀的特殊属性。

动态地绑定一个或多个属性，v-bind缩写为‘:’，可以用于响应式地更新HTMLattribute：

Button在这里src是参数，告知v-bind指令将该元素的srcattribute与表达式imgUrl的值绑定。

如果isButtonDisabled的值是null或undefined，则disabledattribute甚至不会被包含在渲染出来的button元素中。

v-on指令，它用于监听DOM事件。v-on缩写为‘@’，下文简称为@事件

和前端框架中的理解不同，客户端里要实现复用的逻辑，会标记模板节点的状态，添加了v-once能保证节点只渲染一次，但是并不一定能优化渲染性能，反而可能会拖慢客户端复用节点时的比对效率。

我们可以传给:class(v-bind:class的简写)一个对象，实现动态地切换class。

也可以在对象中传入更多字段来动态切换多个class。此外，v-bind:class指令也可以与普通的class共存。

渲染结果为

当isActive或者hasError变化时，class列表将相应地更新。例如，如果hasError的值为true，class列表将变为staticactivetext-danger。

数组语法

可以把一个数组传给v-bind:class，以应用一个class列表。

渲染的结果为：

如果你想根据条件切换列表中的class，可以使用三元表达式：

这样写将始终添加errorClass，但是只有在isActive为truthy时才添加activeClass。

在JavaScript中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为假值（即除false、0、""、null、undefined和NaN以外皆为真值）。

不过，当有多个条件class时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

注意：以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换。

此外还可以用计算属性computed方法生成class或者style字符串，插入到页面中，举例说明：

:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript对象。CSSproperty名可以用驼峰式(camelCase)或短横线分隔(kebab-case，记得用引号括起来)来命名：

直接绑定到一个样式对象通常更好，这会让模板更清晰：

同样的，对象语法常常结合返回对象的计算属性使用。

:style的数组语法可以将多个样式对象应用到同一个元素上：

自动添加前缀

多重值

可以为style绑定中的property提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的flexbox，那么就只会渲染display:flex。

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。使用v-else指令来表示v-if的“else块”。v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当v-if的“else-if块”，可以连续使用：

类似于v-else，v-else-if也必须紧跟在带v-if或者v-else-if的元素之后。

因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？

此时可以把一个template元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含template元素。

Hello!不同的是带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性的display。

注意，v-show不支持template元素，也不支持v-else。nvue页面不支持v-show。

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换，来控制元素的显示和隐藏。

根据应用场景选择

注意

v-for指令可以实现基于一个数组来渲染一个列表。

结果：

结果：

0.title:HowtodolistsinVue,1.author:JaneDoe,2.publishedAt:2021-05-10在遍历对象时，会按Object.keys()的结果遍历，但是不能保证它在不同JavaScript引擎下的结果都一致。

类似于v-if，你也可以利用带有v-for的template来循环渲染一段包含多个元素的内容。比如：

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态(例如：表单输入值)的列表渲染输出。

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一keyattribute：

建议尽可能在使用v-for时提供keyattribute，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

不要使用对象或数组之类的非基本类型值作为v-for的key。请用字符串或数值类型的值。

示例：

......类似地，当使用时存在使用v-if的子节点，key应改为设置在