uni-app的初使用（附源码学习）

uni-app代码编写，基本语言包括js、vue、css。以及ts、scss等css预编译器。

新建项目等基础指路：

关于uni-app的下载及使用-CSDN博客

1.vue文件

由三个一级节点组成，分别是template、script、style

 简单理解就如下图所示

2. 插值

用 {{ }} 进行文本插值。 就是将数据展示到模板（template）中。

 运行结果   ---> 浏览器&手机模拟器

3.指令

带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

常用的举例说明一下

• v-bind，缩写为“ ：”,用于响应式地更新 HTML attribute

...


...


 ... 

 可以用修饰符指定不同的绑定类型。比如 class和style，可以实现动态的切换状态。

参考代码

• v-on指令，缩写为“ @ ”,它用于监听 DOM 事件

...


...


 ... 

 

参考代码

 4.条件渲染

v - if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。 也可以用 v - else 添加一个“else 块”。

 

参考代码

v - else 元素必须紧跟在带 v - if  或者 v-else-if 的元素的后面，否则它将不会被识别。

如果想切换多个元素，可以把一个 template 元素当做不可见的包裹元素，并在上面使用 v-if。

5.列表渲染

 v - for 基于一个数组来渲染一个列表。

v - for指令需要使用 item，index in items  形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

index 当前项的索引（从0开始）。

渲染列表

参考代码

渲染数组

参考代码

渲染对象

语法是 v - for = “(value, name, index) in object”

value是属性值；name是属性名；index是索引（从0开始）

参考代码

 在组件上使用 v - for 时，key是必须有的

这是完整代码及效果图

 

组件及组件库使用会后续更新，欢迎指正