Sevelte学习笔记

技术交流
1

Svelte学习笔记

新建一个svelte项目

npx degit sveltejs/template my-svelte-project
# or download and extract 
cd my-svelte-project
# to use TypeScript run:
node scripts/setupTypeScript.js

npm install
npm run dev

现在我们开始学习Svelte吧。

首先把src/main.ts改成

import App from './App.svelte';

const app = new App({
	target: document.body
});

export default app;

变量

我们开始编辑 src/App.svelte

<script>
	let name = 'world';
</script>

<h1>Hello {name.toUpperCase()}!</h1>

可以直接在标签中通过{} 引入变量，并对变量进行一些操作。

图片

<img src={src} alt="A man dances.">

<img {src} alt="A man dances.">

当插入图片而不编写alt属性时候，svelte会提示，

添加样式

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

<p>This is a paragraph.</p>

导入其他组件

<script>
	import Nested from './Nested.svelte';
</script>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

<p>This is a paragraph.</p>
<Nested/>

可以在script中引入其他组件。

通过字符串

比如我想要渲染字符串
this string contains some <strong>HTML!!!</strong>

我想要在前端渲染出<strong>

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{@html string}</p>

添加响应函数

这里是一个简单的统计点击次数的实现

<script>
	let count = 0;
	function handleClick() {
		count += 1;
	}
</script>
<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

反应式声明

很多时候变量并不是直接定义的，而是从其他变量计算而来的。

所以可以定义反应式声明，比如：

$: doubled = count *2

表示 定义一个doubled变量，是count * 2 。每当count变化，doubuled都会变化。

反应式语句

这里是我很喜欢的，这里表示每当引用的变量变化时候，机会执行语句。

比如

$: console.log(`the count is ${count}`);

<script>
	let count = 0;
	$: if (count >= 10) {
		alert(`count is dangerously high!`);
		count = 9;
	}
	function handleClick() {
		count += 1;
	}
</script>
<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

这里有一个demo,当count变化时候，不会执行为引用count的语句

<script>
	let count = 0;
  let demo = 0;
	$: console.log(`demo is ${demo}`);
	function handleClick() {
		count += 1;
	}
</script>
<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

注意

这里的语句触发条件是赋值，所以当往array里push或者splice并不会触发更新。

比如这段代码就不会触发更新

const foo = obj.foo;
foo.bar = 'baz';

解决方案：

function addNumber() {
	numbers = [...numbers, numbers.length + 1];
}

可以使用类似的模式来替换 pop、shift、unshift 和 splice 方法。