leptos 部件

和其他的控件不同，大部分控件是以DOM为基础进行渲染和操作的，而leptos则是使用了部件（component），一个比DOM更小的单元部分，这样的好处是使用了更小的组件去操作整个页面，就是一个部件。

只有添加了move || 后，变量才会随着数据的数值改变而改变。

fn main() {
	// 写法固定，{}中需要放置的就是部件，App为组件的方法名
    leptos::mount_to_body(|| view! { <App/> })
}
// 部件标识
#[component]
// 继承了IntoView，内置视图
fn App() -> impl IntoView {
	// create_signal：创建一个信号，这个是一个基本单元 返回的信息是（getter，setter）元组，count.get()或者count()获得， set_count.set(3)或者set_count(3)去设置数值。
    let (count, set_count) = create_signal(0);

    view! {
        <button
            on:click=move |_| {
                set_count(3);
            }
        >
            "Click me: "
            {move || count.get()}
        </button>
    }
}

create_signal

pub fn create_signal<T>(cx: Scope, value: T) -> (ReadSignal<T>, WriteSignal<T>)

1. 声明有两种方式

   • 一种是直接传入初始值，例如create_signal(0);
   • 一种是传入Scope变量和初始值，例如create_signal(cx, 0);

2. 获得数值，前置条件：let (count, set_count) = create_signal(0);

   • 使用nightly版本，代码为count()
   • 非nightly版本，代码为count.get()

3. 设置数值，前置条件：let (count, set_count) = create_signal(0);

   • 使用nightly版本，代码为set_count(1)
   • 非nightly版本，代码为set_count.set(1)

4. update方法，原有数据+1，前置条件let (count, set_count) = create_signal(1);

   • set_count.update(|count: &mut i32| *count += 1); 设置count为可修改的int32类型值，获取当前的值再进行+1

5. 复制该信号量

   • let double_count = move || count.get() * 2;

     当set_count.set(0);时，double_count()也为0，两个信号量是一致的。

class

css样式中的class，可判断是否使用该样式

在index.html中新增sytle样式

.red {
	background-color: red;
	font-size: larger;
}

在main.rs的button标签中添加下面代码：

class:red=move || count() % 2 == 1

当count为奇数时read=true，样式有效，效果如图

style

style也可同上

fn App() -> impl IntoView {
    let (count, set_count) = create_signal(0);
    // 定义x和y，将他们用于设置div的left和top，当点击按钮时，x和y分别加100
    let (x, set_x) = create_signal(0);
    let (y, set_y) = create_signal(0);

    view! {
        <div
        	// 设置位置为绝对位置
            style="position: absolute"
            // 设置left为x px
            style:left=move || format!("{}px", x())
            // 设置left为x px
            style:top=move || format!("{}px", y())
            // 设置背景色为 rgb(x,y,100)
            style:background-color=move || format!("rgb({}, {}, 100)", x(), y())
            // 当只写count()时，数据不会更新，使用move || count()，数据才会更新
             style=("columns", count())
        >
            "Moves when coordinates change"
        </div>
        <button
            on:click=move |_| {
                set_count.update(|n| *n += 1);
                set_x.update(|n| *n += 100);
                set_y.update(|n| *n += 100);
            }
        >
            "Click me: "
            {move || count.get()}
        </button>
    }
}

Dynamic Attributes

动态属性，意思是有些数值是可以不添加move || ，传递一个字符串或者静态值，控件会进行自动更新，例如

<progress
    max="50"
    // value为动态属性，相当于`move || count.get()`
    value=count
/>

创建自定义标签

自定义标签可添加相关属性，形成一个新的组件（类似于vue）

• 创建组件

  // 声明组件
  #[component]
  // 定义一个泛型
  fn ProgressBar<F>(
  	// 默认为100的u16的数值
      #[prop(default = 100)]
      max: u16,
      // 类型为泛型的类型
      progress: F
  ) -> impl IntoView
  	// 泛型类型为i32 + 'static（静态的有符号的32位数据）
      where
          F: Fn() -> i32 + 'static,
  {
      view! {
          <progress
          	// 赋值
              max=max
              // 赋值
              value=progress
          />
      }
  }
  

• 引用组件

  <ProgressBar progress=30/>