<!-- vue -->
data() {
	return {
		name: 'hhh',
	};
}

<div>{{name}}</div>

<script>
	import { Button } from "sveltestrap";
	// 定义数据
	let name = "hhh";
	let src = 'http://crazy-x-lovemysoul-x-vip.img.abc188.com/images/logo.png';
</script>
<!-- 绑定数据 -->
<!-- 如果kv一致只用写一个 -->
<img {src} alt="">
<Button>{name}</Button>

<script>
	let condition = 1;
</script>
{#if condition == 2}
	<p>悲</p>
{:else if condition == 1}
	<p>伤 </p>
{:else if condition == 0}
	<p>日</p>
{:else}
	<p>记</p>
{/if}

<script>
    // 定义变量
	let news = [
        { id: 1, title: '拜登呼吁必须停止把对手当敌人' },
        { id: 2, title: '江苏响水致78死爆炸案一审宣判' },
        { id: 3, title: '嫦娥五号将择机实施月面软着陆' }
    ];
</script>


<ul>
    <!-- 有没有点 ejs的感觉 -->
	{#each news as {title}}
		<li>
			<a href="https://www.baidu.com/s?rsv_idx=1&wd={title}">
				{title}
			</a>
		</li>
	{/each}
</ul>


<style>
	ul,li{
		list-style: none;
	}
	a{
		color: #ff3e00;
	}
</style>

<script>
	import { Button } from "sveltestrap";
	// 定义数据
	let name = "hhh",title = '标题';
	// 定义方法
	const handleClick = () => {
		name = "严老湿"
		title = "老严带你入坑 svelte"
	};
</script>
<!-- on:click 绑定方法  {绑定动态值}-->
<Button color="danger" on:click={handleClick}>{name}</Button>
<h1>{title}</h1>

<script>
    // 直接引入组件即可使用 无需注册
	import Child from './components/child.svelte'
	let name = '我是你爹'
</script>

<div>
	{name}
	<Child></Child>
</div>

<script>
    let title = '我是你儿子'
</script>

<div>{title}</div>

<script>
	import Child from './components/child.svelte'
	let name = '我是你爹'
	let childName = "狗剩"
</script>

<div>
	{name}
	<Child {childName}></Child>
</div>

<script>
    export let childName;
</script>

<div>爹给我取的名字是 {childName}</div>

<script>
	import Child from './components/child.svelte'
	let name = '我是你爹'
	let aboutMe = {
		name:'狗剩',
		age:18,
		gender:'man'
	}
</script>

<div>
	{name}
    <!-- 通过... 展开 aboutMe -->
	<Child {...aboutMe}></Child>
</div>

<script>
    export let name,gender,age;
</script>

<div>我取的名字是 {name}</div>
<div>我取的年龄是 {age}</div>
<div>我取的性别是 {gender}</div>

<script>
	import { fade } from 'svelte/transition';
	let visible = true;
</script>

<label>
	<input type="checkbox" bind:checked={visible}>
	visible
</label>

{#if visible}
	<p transition:fade>
		Fades in and out
	</p>
{/if}

<script>
	import { quintOut } from 'svelte/easing';
	import { crossfade } from 'svelte/transition';
	import { flip } from 'svelte/animate';
	// 动画
	const [send, receive] = crossfade({
		duration: d => Math.sqrt(d * 200),

		fallback(node, params) {
			const style = getComputedStyle(node);
			const transform = style.transform === 'none' ? '' : style.transform;
			return {
				duration: 600,
				easing: quintOut,
				css: t => `
					transform: ${transform} scale(${t});
					opacity: ${t}
				`
			};
		}
	});

	let uid = 1;
	// 默认数据
	let todos = [
		{ id: uid++, done: false, description: 'write some docs' },
		{ id: uid++, done: false, description: 'start writing blog post' },
		{ id: uid++, done: true,  description: 'buy some milk' },
		{ id: uid++, done: false, description: 'mow the lawn' },
		{ id: uid++, done: false, description: 'feed the turtle' },
		{ id: uid++, done: false, description: 'fix some bugs' },
	];
	// 新增待办
	function add(input) {
		const todo = {
			id: uid++,
			done: false,
			description: input.value
		};

		todos = [todo, ...todos];
		input.value = '';
	}
	// 删除方法
	function remove(todo) {
		todos = todos.filter(t => t !== todo);
	}
	// 选中方法
	function mark(todo, done) {
		todo.done = done;
		remove(todo);
		todos = todos.concat(todo);
	}
</script>

<div class='board'>
    <!-- 点击回车执行add  -->
	<input
		placeholder="what needs to be done?"
		on:keydown={e => e.which === 13 && add(e.target)}
	>
	<!-- 代办 -->
	<div class='left'>
		<h2>todo</h2>
		{#each todos.filter(t => !t.done) as todo (todo.id)}
			<label
				in:receive="{{key: todo.id}}"
				out:send="{{key: todo.id}}"
				animate:flip
			>
				<!-- 选中代表已做完 -->
				<input type=checkbox on:change={() => mark(todo, true)}>
				{todo.description}
				<!-- 删除 -->
				<button on:click="{() => remove(todo)}">remove</button>
			</label>
		{/each}
	</div>
	<!-- 已完成 -->
	<div class='right'>
		<h2>done</h2>
		{#each todos.filter(t => t.done) as todo (todo.id)}
			<label
				class="done"
				in:receive="{{key: todo.id}}"
				out:send="{{key: todo.id}}"
				animate:flip
			>
				<!-- 修改状态为代办 -->
				<input type=checkbox checked on:change={() => mark(todo, false)}>
				{todo.description}
				<!-- 删除 -->
				<button on:click="{() => remove(todo)}">remove</button>
			</label>
		{/each}
	</div>
</div>

<style>
	.board {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 1em;
		max-width: 36em;
		margin: 0 auto;
	}

	.board > input {
		font-size: 1.4em;
		grid-column: 1/3;
	}

	h2 {
		font-size: 2em;
		font-weight: 200;
		user-select: none;
		margin: 0 0 0.5em 0;
	}

	label {
		position: relative;
		line-height: 1.2;
		padding: 0.5em 2.5em 0.5em 2em;
		margin: 0 0 0.5em 0;
		border-radius: 2px;
		user-select: none;
		border: 1px solid hsl(240, 8%, 70%);
		background-color:hsl(240, 8%, 93%);
		color: #333;
	}

	input[type="checkbox"] {
		position: absolute;
		left: 0.5em;
		top: 0.6em;
		margin: 0;
	}

	.done {
		border: 1px solid hsl(240, 8%, 90%);
		background-color:hsl(240, 8%, 98%);
	}

	button {
		position: absolute;
		top: 0;
		right: 0.2em;
		width: 2em;
		height: 100%;
		background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
		background-size: 1.4em 1.4em;
		border: none;
		opacity: 0;
		transition: opacity 0.2s;
		text-indent: -9999px;
		cursor: pointer;
	}

	label:hover button {
		opacity: 1;
	}
</style>