模板语法 和 数据绑定

i模板语法

数据初始化

动态数据绑定
动态绑定类名

动态绑定类名
事件绑定

事件绑定

事件响应方法

简写方式
条件判断(某一块元素是否要渲染) v-if 和 v-else、v-else-if
v-if如果表达式返回真值,为true 那么我们就会正常的渲染内容

image.png

image.png

v-else

v-else-if
列表渲染: 通过一个数组来渲染一个列表

数组

列表渲染

元素和下标的别名

对象的打印
基础组件的使用:https://uniapp.dcloud.net.cn/component/
view: 占据整行
text: 相当于span
scroll-view

image.png

image.png

v-model双向绑定

数据初始化
自定义组件的使用
在根目录下创建目录 components
在components文件夹下 新建 组件

image.png

image.png
使用组件

image.png
组件的属性传递

props属性

属性传递
自定义组件的事件

onClick

onClick实现

事件传递

image.png
slot

组件内部使用slot

组件渲染
uniapp的基础api
官方文档:https://uniapp.dcloud.net.cn/api/
打印 :敲clog:可直接输出console.log();敲clogv:可输出console.log(": " + );
条件编译:

条件编译写法

条件编译1

条件编译2
页面布局:

页面布局
rpx : 是以750宽屏幕的相对单位, 不能使用在template的动态数值做单位

引入外部样式