svelte教程（6）数据绑定
双向数据绑定
双向绑定意味着当我们更改name的值时会更新input输入框的值，更改input输入框值的时候name的值同样会改变。
<script>
let name = 'world';
</script>
<input bind:value={name}>
<h1>Hello {name}!</h1>如果您有多个与同一个值相关的输入，则可以bind:group与value属性一起使用。同一组中的单选框是互斥的；同一组中的复选框输入形成选定值的数组。
<script>
let scoops=1
let flavours = ['Mint choc chip'];
let menu = [
'Cookies and cream',
'Mint choc chip',
'Raspberry ripple'
];
</script>
<label>
<input type=radio bind:group={scoops} value={1}>
One scoop
</label>
<label>
<input type=radio bind:group={scoops} value={2}>
Two scoops
</label>
<label>
<input type=radio bind:group={scoops} value={3}>
Three scoops
</label>
<div>
{#each menu as flavour}
<label>
<input type=checkbox bind:group={flavours} value={flavour}>
{flavour}
</label>
{/each}
</div>我们还可以使用bind:value与元素绑定：
<script>
let questions = [
{ id: 1, text: `Where did you go to school?` },
{ id: 2, text: `What is your mother's name?` },
{
id: 3,
text: `What is another personal fact that an attacker could easily find with Google?`
}
];
let selected;
</script>
<select bind:value={selected}>
{#each questions as question}
<option value={question.id} label={question.text}></option>
{/each}
</select>
<p>The question is "{selected?questions.filter(q => q.id === selected)[0].text:null}"</p>
的value值也可以是对象
<script>
let questions = [
{ id: 1, text: `Where did you go to school?` },
{ id: 2, text: `What is your mother's name?` },
{
id: 3,
text: `What is another personal fact that an attacker could easily find with Google?`
}
];
let selected;
</script>
<select bind:value={selected}>
{#each questions as question}
<option value={question} label={question.text}></option>
{/each}
</select>
<p>The question is "{selected?selected.text:''}"</p>
一个可以具有一个multiple属性，在这种情况下，它将绑定一个数组而不是一个值。
<script>
let questions = [
{ id: 1, text: `Where did you go to school?` },
{ id: 2, text: `What is your mother's name?` },
{
id: 3,
text: `What is another personal fact that an attacker could easily find with Google?`
}
];
let selectedList = [];
</script>
<select bind:value={selectedList} multiple>
{#each questions as question}
<option value={question} label={question.text} />
{/each}
</select>
{#each selectedList as selected}
<p>The question is "{selected.text}"</p>
{/each}
contenteditable
具有contenteditable="true"属性的元素支持绑定textContent和innerHTML。
<script>
let html = "<p>Write some text!</p>";
let text = "Write some text!";
</script>
<style>
[contenteditable] {
padding: 0.5em;
border: 1px solid #eee;
border-radius: 4px;
}
</style>
<div contenteditable="true" bind:innerHTML={html} />
<div contenteditable="true" bind:textContent={text} />
<pre>{html}</pre>
<p>{text}</p>
循环中使用数据绑定
<script>
let todos = [
{ done: false, text: 'finish Svelte tutorial' },
{ done: false, text: 'build an app' },
{ done: false, text: 'world domination' }
];
function add() {
todos = todos.concat({ done: false, text: '' });
}
function clear() {
todos = todos.filter(t => !t.done);
}
$: remaining = todos.filter(t => !t.done).length;
</script>
<style>
.done {
opacity: 0.4;
}
</style>
<h1>Todos</h1>
{#each todos as todo}
<div class:done={todo.done}>
<input
type=checkbox
bind:checked={todo.done}
>
<input
placeholder="What needs to be done?"
bind:value={todo.text}
>
</div>
{/each}
<p>{remaining} remaining</p>
<button on:click={add}>
Add new
</button>
<button on:click={clear}>
Clear completed
</button>
clientWidth、clientHeight、offsetWidth、offsetHeight
这些属性为只读属性改变w、h的值不会更新元素。inline元素没有宽高。
<script>
let w;
let h;
let w2;
let h2;
let size = 42;
let text = "edit me";
</script>
<style>
input {
display: block;
margin: 20px auto;
}
div {
display: block;
}
.inline {
display: inline;
}
</style>
<input type="range" bind:value={size} />
<input bind:value={text} />
<p>size: {w}px x {h}px</p>
<div bind:clientWidth={w} bind:clientHeight={h}>
<span style="font-size: {size}px">{text}</span>
</div>
<p>line size: {w2}px x {h2}px</p>
<div bind:clientWidth={w2} bind:clientHeight={h2} class="inline">
<span style="font-size: {size}px">{text}</span>
</div>
bind:this
bind:this可以拿到一个元素的引用。
<script>
let w;
let h;
let w2;
let h2;
let size = 42;
let text = "edit me";
function getRects(){
console.log(this.getClientRects())
console.log(this.getBoundingClientRect())
}
</script>
<style>
input {
display: block;
margin: 20px auto;
}
div {
display: block;
}
.inline {
display: inline;
}
</style>
<input type="range" bind:value={size} />
<input bind:value={text} />
<p>size: {w}px x {h}px</p>
<div
on:click={getRects}
bind:clientWidth={w}
bind:clientHeight={h}>
<span style="font-size: {size}px">{text}</span>
</div>
<p>line size: {w2}px x {h2}px</p>
<div
on:click={getRects}
bind:clientWidth={w2}
bind:clientHeight={h2}
class="inline">
<span style="font-size: {size}px">
{text}
</span>
</div>组件数据绑定
正如可以绑定到DOM元素的属性一样，也可以绑定到组件prop。
// Keypad.svelte
<script>
import { createEventDispatcher } from "svelte";
export let value = "";
const dispatch = createEventDispatcher();
const select = num => () => (value += num);
const clear = () => (value = "");
const submit = () => dispatch("submit");
</script>
<style>
.keypad {
display: grid;
grid-template-columns: repeat(3, 5em);
grid-template-rows: repeat(4, 3em);
grid-gap: 0.5em;
justify-content: center;
}
button {
margin: 0;
}
</style>
<div class="keypad">
<button on:click={select(1)}>1</button>
<button on:click={select(2)}>2</button>
<button on:click={select(3)}>3</button>
<button on:click={select(4)}>4</button>
<button on:click={select(5)}>5</button>
<button on:click={select(6)}>6</button>
<button on:click={select(7)}>7</button>
<button on:click={select(8)}>8</button>
<button on:click={select(9)}>9</button>
<button disabled={!value} on:click={clear}>clear</button>
<button on:click={select(0)}>0</button>
<button disabled={!value} on:click={submit}>submit</button>
</div>
// component_bind.svelte
<script>
import Keypad from '../components/Keypad';
let pin;
$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
function handleSubmit() {
alert(`submitted ${pin}`);
}
</script>
<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
<Keypad bind:value={pin} on:submit={handleSubmit}/>本教程的所有代码均上传到github有需要的同学可以参考 https://github.com/sullay/svelte-learn。
