svelte中使用一对花括号 { val } 来标记插值，类似于vue中的双花括号 {{ val }}

<script>
    let name = 'qingheluo';
</script>
<p>{ name }</p>
<p>{ name=="qingheluo" ? "主人" : "游客" }</p>

在花括号中也可进行简单的运算

动态属性

花括号除了可以控制文本显示以外，同时适用于元素的属性

属性中使用变量可以省略双引号，但是有些编辑器中会显示错误

<script>
    import img_url from "path/img.svg";
    let alt = "图片说明"
</script>

<img src="{ img_url }" { alt } >

可以通过import语句引入图片等资源，在解析时会自动替换为实际路径

如果属性名和变量名相同，可以使用{ val }简写格式来代替 val="{ val }"

html内容插入

默认的，如果变量中包含html元素，会自动将 < 和 > 转义，如果想显示html内容，需要使用HTML表达式

{@html val} : val中的html标签不会进行转义，这样会存在一定的风险

如果val中的html标签不完整，则仍然会将 < 和 > 转义

{@html "<div>"}content{@html "</div>"}
会将div标签进行转义，因为单独的&lt;div&gt;和&lt;/div&gt;是不完整的

bind:*指令

bind:*指令是用于绑定指定元素的属性到指定变量上的快捷操作指令

常用的有表单元素内容绑定，多媒体元素信息绑定，元素尺寸信息绑定等

表单元素内容绑定

在表单元素中，要实现当用户改变其中的值时，实时修改与其绑定的变量的值，可以为其添加 on:input 事件处理程序，将指定的变量的值设置为 event.target.value

不过这样写法拖沓累赘，大量input标签的话更是苦不堪言，另外select，复选框，单选框等绑定更是复杂多变

使用bind:*指令进行变量双向绑定，可以快速实现上述的需求功能，而且svelte还为我们做了简单的优化

如type=number|range时，常规方式获取的值为字符串，还要进行数据转换为数字，而svelte自动会为我们转换为数字

单个复选框(type="checkbox")：bind:checked指令，返回该复选框后否选中的bool值

多个复选框(type="checkbox")：bind:group指令，返回选中的复选框的value属性值组成的数组

会根据绑定变量的值设置各个复选项的初始选择状态
原生的html设置初始选中状态的checked属性会失效
如果绑定变量初始值为字符串，则将字符串按单个字符转换为数组

单选框(type="radio")：bind:group指令，返回选中的单选框的value属性值

当多个单选框通过bind:group指令绑定到一个变量时，这些单选框会自动成组
选择会互斥，选择一个后若有其他选中项则自动取消

其他input输入框：bind:value指令

textarea元素：bind:value指令

select下拉单选框：bind:value指令

select下拉多选框(添加multiple单属性)：bind:group指令

可编辑元素(添加了contenteditable属性的元素)

bind:innerHTML指令

多媒体相关audio 和 video元素

6个共有的只读属性：
bind:duration ：视频的总时长（以秒为单位）
bind:buffered ：已缓冲部分的{start, end}格式的TimeRanges对象组成的数组
bind:seekable ：可寻址部分的{start, end} 格式的 TimeRanges 对象组成的数组
bind:played ： 已播放部分的{start, end} 格式的 TimeRanges 对象组成的数组
bind:seeking ：boolean，用户跳跃到新的位置后是否正在资源中进行查找
bind:ended ： boolean，播放是否已结束

Video元素独有的只读属性绑定：videoWidth 和 videoHeight

5个共有的支持双向绑定的属性：
bind:currentTime ： 视频中的当前位置，以秒为单位
bind:playbackRate ： 视频播放倍速，'正常速度' 为 1
bind:paused ： 是否暂停
bind:volume ： 音量，其值介乎 0 ~ 1 之间
bind:muted ： 是否处于静音状态

元素尺寸绑定

bind:clientWidth 和 bind:clientHeight：元素可视区的宽和高，包含元素内容及内边距

bind:offsetWidth 和 bind:offsetHeight：元素实际大小，包含边框、内边距和滚动条

元素尺寸绑定都是只读的，仅可用于获取元素的尺寸信息，不能设置

使用元素尺寸绑定会涉及到一些开销，因此不建议在大量元素上使用

行盒元素是不能测量的，没有子级的元素也不能（需要测量的是包裹它的外层元素）

获取DOM对象

bind:this：只读绑定，用于获取实际的DOM对象

在组件mounted之前，绑定变量暂未生效，因此需要将对绑定变量的操作逻辑放在onMount生命周期函数中

组件绑定

<Diytag bind:diyname={ val } />

在父组件调用子组件时使用bind:diyname属性绑定父组件中的变量

在子组件中接受diyname的prop后修改diyname值会同步反应到父组件中绑定的变量

父组件：
let name = "myname"

<p>name : {name}</p>
<Diytag bind:diyname={name} />

子组件
export let diyname;

<input bind:value={diyname} />

class样式

根据属性插值，我们可以进行动态class的变化

<div class={ val ? "class_names1" : "class_names2"}></div>
根据val的真假来动态赋予元素不同的class值

但是这样有一个弊端，如果class的值有多个且多个值的判断条件不同，该方式无法满足需求

svelte为我们提供了class指令，用于动态的向class中添加类名

class:class_name={val}
当val为真时会将class_name添加到class的类名中，为假时不会添加

当val变量名和class_name相同时，可以省略val
class:class_name  等同于  class:class_name={ class_name }

使用css变量

通过属性来给css变量赋值：--val

<script>
    let color = "red"
</script>
<p --color={color}>demo</p>
<style>
    p{
        color:val(--color);
    }
</style>

在p标签中通过--color属性定义一个css变量并赋值
在style中使用val(--color)来获取值

style内联样式

通过style指令来添加内联样式

style:option = {val}
当option和val名称相同时可以省略val
style:option  等同于 style:option={option}

<p style:font-size = { val } style:color>demo</p>

style:color没有赋予值，会自动查找color变量

创建时运行和变量监听

在一个元素中使用use:func指令表示该元素在DOM树中创建时运行指定函数

该指令接受一个参数，表示监听一个变量的状态改变

let name = "清河洛";
function func(node,name){
    console.log('元素在创建时运行');
    return {
        update(name){
            console.log('监听DOM中name状态改变时运行');
        },
        destroy(){
            console.log('元素被移除DOM树时运行');
        }
    }
}

<input bind:value={ name } use:func={ name } />

指定要运行的func函数接受两个参数，第一个是该指令所在的元素DOM，第二个是该指定的值，表示要监听的变量

如果不需要在函数体中对这两个参数进行操作可以省略

函数返回一个对象，对象包含update()函数和destroy()，分别表示在监听变量状态改变时运行的内容和在元素被移除DOM树时运行的内容

如果update中不需要获取监听变量的新值，那么参数也可以省略