数据更新

  1. <script>
  2.     let a=['a','c']
  3.     let b='kk'
  4.     function oadd(){
  5.         a.push(b)
  6.     }
  7. </script>

in svelte 这种数组或者是object的增加或者减少，并不会更新在dom上渲染的内容，必须要对变量再赋值，才能使渲染的内容变更。

  1. <script>
  2.     let a=['a','c']
  3.     let b='kk'
  4.     function oadd(){
  5.         a.push(b)
  6.       a=a
  7.     }
  8. </script>

只有进行这一步才行，
一句话攻略：一个简单的经验法则：更新后的变量必须直接出现在赋值的左侧。

属性传播

  1. <script>
  2.     export let name=''
  3.     export let age=0
  4. </script>
  5. <main><p>{name}--{age}</p></main>

在其它组件应用的时候可以用属性传播来简化写法，如：

  1. <script>
  2.   import One from "./lib/one.svelte";
  3.   let aa={name:'xiao',age:56}
  4. </script>
  5. <main>
  6.   <One {...aa}>
  8.   </One>
  9. </main>

这样aa里面的数据就会自动和引用的组件进行匹配了，不需要一个个去赋值了。

each

index

  1. <script>
  2.     let a=[
  3.         {name:'xiao',age:12},
  4.         {name:'ruru',age:32},
  5.         {name:'haha',age:3},
  6.     ]
  7. </script>
  8. <main>
  9.     {#each a as x,i}
  10.     <p>{x.name}--{i}</p>
  12.     {/each}
  13. </main>
  14. <style></style>

第一个参数是内容，第2个是index

对象拆解

x.name显的太累赘
我们可以拆解

  1. <script>
  4.     let a=[
  5.         {name:'xiao',age:12},
  6.         {name:'ruru',age:32},
  7.         {name:'haha',age:3},
  8.     ]
  9. </script>
  10. <main>
  11.     {#each a as {name,age},i}
  12.     <p>{name}--{i}</p>
  14.     {/each}
  15. </main>
  16. <style></style>

把原来的x直接拆解成每个object的里的项目，这样在下面就可以直接写项目了

key

为防止数据在更新的时候出现乱七八糟的情况，一定要习惯性的加上key
在x,index后面一个空格然后用一个括号括起来，可以是x也可以是x.xxx

  1. <script>
  4.     let a=[
  5.         {name:'xiao',age:12},
  6.         {name:'ruru',age:32},
  7.         {name:'haha',age:3},
  8.     ]
  9. </script>
  10. <main>
  11.     {#each a as {name,age},i (name)}
  12.     <p>{name}--{i}</p>
  14.     {/each}
  15.     <button on:click={()=>{a=a.slice(1)}}>-</button>
  16. </main>
  17. <style></style>

await

  2. {#await promise}
  3. <p>...waiting</p>
  4. {:then number}
  5. <p>The number is {number}</p>
  6. {:catch error}
  7. <p style="color: red">{error.message}</p>
  8. {/await}

先是自己弄一个异步函数，比如开始可以获取数据。
然后 :then number number呢就是你成功返回的值，
:catch error，就是失败返回的值
最后在自己相应的模块范围里面写一些dom就可以了
如果你知道你的 promise 不能拒绝，你可以省略 catch 块。如果您不想在承诺解决之前显示任何内容，您也可以省略第一个块：

  1. {#await promise then value}
  2.     <p>the value is {value}</p>
  3. {/await}

event

这里的event和原生的不一样，我可以log出来，看看都有啥属性

  1. <button on:click={(e)=>{console.log(e);

然后根据输出的东西来看，基本能用的都是一些坐标之类的东西
比如：
clientX clientY 表示当前窗口的x,y坐标

内联写法

  1. <div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
  2.     The mouse position is {m.x} x {m.y}
  3. </div>

修饰符

通过修饰符来控制event执行的方式

once

只执行一次

  1. <button on:click|once={handleClick}>
  2.     Click me
  3. </button>

bing:innerhtml

  1. <script>
  3.     let incontent='12'
  4.     let intext=`<p>${incontent}</p>`
  5. </script>
  6. <main>
  10.     <div contenteditable="true" bind:innerHTML="{intext}"></div>
  11.     <hr>
  12.     <input type="text" bind:value="{incontent}">
  13.     <br>
  14.     {intext}
  15. </main>
  16. <style>
  17.     [contenteditable]{
  18.         color: red;
  19.     }
  20. </style>

就是帮用户输入添加html,这里要注意的是，如果你添加样式，用P，用.a，那是不行的，只有 [contenteditable]才行，我也不知道为啥，你就这么用就行了
所以两个注意点：
1.contenteditable=”true” 一定要加
2.写style只能用[contenteditable] 来修饰

bing:class

  1. <main>
  2.     <p class:a={true}>haha</p>
  3. </main>
  5. <style>
  6.     .a {
  7.         color: red;
  8.     }
  9.     .b {
  10.         color: green;
  11.     }
  12.     .c {
  13.         color: blue;
  14.     }
  15. </style>

很简单就是通过一个变量来判断是否用某一个class,这个和bind:checked联合起来用非常好