前端笔记之微信小程序(二){{}}插值和MVVM模式&数据双向绑定&指令&API

本文详细介绍了微信小程序中{{}}插值和MVVM模式的运用,包括数据双向绑定的实现,如调色板和微博发布框的案例。还探讨了wx:if和wx:for循环指令的使用,以及小程序API的应用,如网络请求和生命周期管理。通过实例展示了如何在小程序中进行动态数据操作和页面交互。
摘要由CSDN通过智能技术生成

一、双括号{ {}}插值和MVVM模式

1.1 体会{ {}}插值

index.wxml的标签不是html的那些标签,这里的view就是div

{ {}}这样的插值写法,叫做mustache语法。mustache是胡子的意思,因为{ {}}像胡子。

<view class="container">
<view class="title">
    我是首页 {
     {1 + 1}}
        {
     {a}}年!
    </view>
</view>

 

要在同名js文件下的data属性中定义:

Page({
    data : {
        a : 100
    }
});

所有的框架:AngularReactVueReactNative、小程序都是这样的“强耦合”的。

之前我们js操作html使用:document.getElementById()这样的“不耦合”的方式,但是反而编程麻烦。

 

不仅仅{ {}}可以出现在文字的部分,还可以出现在属性值的双引号中:

 <view class="box" style="width:{
     {a}}px;height:{
     {a}}px">我是盒子</view>

1.2 体会MVVM模式

<button bindtap='add'>按我</button>

监听直接写在标签上,bindtap表示绑定轻触事件

注意,是bindtap="add"而不是:bindtap="add()"

 

'add'是一个函数,要定义在js文件中。

注意:改变数据不能直接改,如果这样写,a的确会变化,但是视图不会跟着变化!

Page({
    data : {
        a : 100
    },
    add(){
        this.data.a++;
    }
});

必须使用this.setData()函数来改变data,此时视图才能变化。

Page({
    data : {
        a : 100
    },
    add(){
        this.setData({
            a : this.data.a + 1
        });
    }
});

数据变化了,视图会自动改变

我们学习的所有框架都是MVVM模式的,只需要关心数据,不需要关心视图,视图会自动变化。


二、数据双向绑定

2.1 调色板

先说一个知识点,用户的屏幕是750rpx。所以如果盒子750rpx宽度,一定撑满的,375rpx就是半屏。

 slider组件

 

index.wxss

.box{
    
    width:350rpx;
    height:350rpx;
    margin:10px auto;
}
示例代码

 

 

index.wxmlstyle行内样式的插值,实现双向数据绑定,就是data中的数据能够成为组件的默认数据

添加一个bindchanging事件,这个事件从手册上查的。添加一个自定义属性,叫做data-ys来区分谁是谁。

注意,自定义属性必须以data-开头

<view class="container">
<view class="box" style="background-color:rgb({
     {r}},{
    {g}},{
    {b}})"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值