svelte的一些基础demo
脚手架
Vite:vite是集成了svelte,初始化的时候选择svelte就行了。
npm init vite
SvelteKit:底层基于vite的更上层框架,类似于nextjs。
npm create svelte@latest my-app
cd my-app
npm install
npm run dev
.svelte文件结构
和vue类似svelte文件是.svelte结尾的文件,比如demo.svelte。代码结构:
<script>
let name = 'hello world';
</script>
<div class="name">
{name}
</div>
<style>
.name {
color: red;
}
</style>
模版绑定
绑定变量
<script>
let name = 'world';
</script>
<h1>Hello {name}!</h1>
绑定属性
<script>
let src = '/tutorial/image.gif';
let name = '张三';
</script>
<img {src} alt="{name} dances.">
绑定事件
<script>
let count = 0;
function incrementCount() {
count += 1;
}
</script>
<button on:click={incrementCount}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
$:
类似于vue的computed
。例如:
<script>
let count = 0;
// 定义一个名字叫doubled的变量,当count的值改变时,doubled会改变。doubled变量时响应式的。
$: doubled = count * 2;
// 直接这样写d2不是响应式的。
let d2 = count * 2;
$: if (count >= 10) {
alert('count is dangerously high!');
count = 9;
}
$: {
console.log('the count is ' + count);
alert('I SAID THE COUNT IS ' + count);
}
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {doubled}</p>
<p>
t2 is {d2}
</p>
为什么d2
变量不是响应式的,我们会在 svelte响应式原理里面解释。
if/else
<script>
let user = { loggedIn: false };
function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>
<div>
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{:else}
<button on:click={toggle}>
Log in
</button>
{/if}
</div>
each遍历
<script>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>
<h1>The Famous Cats of YouTube</h1>
<ul>
{#each cats as { id, name }, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={id}" rel="noreferrer">
{i + 1}: {name}
</a></li>
{/each}
</ul>
await
<script>
async function getRandomNumber() {
const res = await fetch(`/tutorial/random-number`);
const text = await res.text();
if (res.ok) {
return {val: text};
} else {
throw new Error(text);
}
}
let promise = getRandomNumber();
function handleClick() {
promise = getRandomNumber();
}
</script>
<button on:click={handleClick}>
generate random number
</button>
{#await promise}
<p>...waiting</p>
{:then res}
<p>The number is {res.val}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
双向数据流
<script>
let name = 'world';
$:
</script>
<input bind:value={name}>
<h1>Hello {name}!</h1>
组件
使用子组件和父子组件通信
App.svelte
<script lang="ts">
import Child from './child.svelte';
var num = 1;
var obj = {
count: 1
}
function handleAdd() {
num = num + 1;
obj.count = obj.count + 1;
}
function handleReset(event) {
num = event.detail.val;
obj.count = event.detail.val;
}
</script>
<div>
我是父组件
<button on:click={handleAdd}>add num</button>
// 也支持...的语法
<Child count={num} on:reset={handleReset} />
<Child {...obj} on:reset={handleReset} />
</div>
Child.svelte
<script>
import { createEventDispatcher } from 'svelte';
export let count;
const dispatch = createEventDispatcher();
function handleReset() {
dispatch('reset', {
val: 0
});
}
</script>
<div>
<p>我是子组件,count is {count}</p>
<button on:click={handleReset}>reset count</button>
</div>
组件中使用双向数据流
App.svelte
<script>
import Child from './child.svelte';
var name;
</script>
<p>
name is {name}
</p>
<Child bind:name />
Child.svelte
<script>
export let name;
</script>
<div>
<input bind:value={name} />
</div>
插槽
App.svelte
<script>
import Child from './child.svelte';
</script>
<Child>
<p>i am from App</p>
<p slot="tool">i am tool</p>
</Child>
Child.svelte
<div>
<slot />
<slot name="tool" />
</div>
生命周期
onMount、onDestroy、beforeUpdate、afterUpdate
<script>
import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte';
onMount(() => {
//...
});
onDestroy(() => {
//...
});
beforeUpdate(() => {
//...
});
afterUpdate(() => {
//...
});
</script>
<h1>Photo album</h1>
svelte的一些基础demo的更多相关文章
- Qwt开发笔记(一):Qwt简介、下载以及基础demo工程模板
前言 QWT开发笔记系列整理集合,这是目前使用最为广泛的Qt图表类(Qt的QWidget代码方向只有QtCharts,Qwt,QCustomPlot),使用多年,系统性的整理,本系列旨在系统解说并 ...
- node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...
- [spring security] spring security 4 基础Demo
依赖包: <properties> <junit.version>4.11</junit.version> <spring.version>4.1.6. ...
- iOS开发-UI基础Demo
现在更多的学习资料都是xCode4.X的,发现xCode6.1还是很多东西,如果有正在学习iOS开发的可以通过Demo简单了解下iOS的UI开发~ 1.新建单视图文件: 2.新建项目名称,语言选择OC ...
- ios socket(基础demo)
http://blog.sina.com.cn/s/blog_7a2f0a830101ecv4.html clinetSocket 1.viewcontroller.h @interface View ...
- [jquery] jQuery jsTree V3.2.1 基础Demo
引入对应的文件: <link rel="stylesheet" href="../dist/themes/default/style.min.css" / ...
- Sencha 基础Demo测试,三种showView的方法
直接贴代码吧 Ext.define("build.controller.MainController",{ extend:"Ext.app.Controller" ...
- webpack学习(二):先写几个webpack基础demo
一.先写一个简单demo1 1-1安装好webpack后创建这样一个目录: 1-2:向src各文件和dist/index.html文件写入内容: <!DOCTYPE html> <h ...
- java多线程 基础demo
join() 让主进程等待子进程全部执行完 例子如下: package mocker; public class TestThread5 extends Thread { priva ...
- Groovy语言学习--语法基础(4)
语法基础到此就结束了,毕竟其和Java许多地方并无差别.groovy作为脚本,是为了能更好地随业务变化调整规则,我根据自己对规则的理解 通过一张图简单描述一个groovy脚本场景:由于货币膨胀,经济收 ...
随机推荐
- Go类型全解:常量与变量大全!
本篇文章深入探讨了 Go 语言中类型确定值.类型不确定值以及对应类型转换的知识点,后续充分解析了常量与变量及其高级用法,并举出丰富的案例. 关注公众号[TechLeadCloud],分享互联网架构.云 ...
- Mysql优化篇-索引优化与查询优化
1.索引失败案列 如果查询时没有使用索引,查询语句就会扫描表中所有记录,在数据量大的情况下,查询会很慢. (1)全值匹配 (2)最佳左前缀法则 mysql可以为多个字段创建索引,一个索引可以包括16个 ...
- Machine Learning for NetFlow Anomaly Detection With Human-Readable Annotations 笔记
Machine Learning for NetFlow Anomaly Detection With Human-Readable Annotations 关键摘要 我们开发了一个复杂企业网络中的异 ...
- RK3588平台产测之ArmSoM-W3 DDR压力测试
1. 简介 RK3588从入门到精通 ArmSoM团队在产品量产之前都会对产品做几次专业化的功能测试以及性能压力测试,以此来保证产品的质量以及稳定性 优秀的产品都要进行多次全方位的功能测试以及性能压力 ...
- 基于Effect的组件设计
Effect的概念起源 从输入输出的角度理解Effect https://link.excalidraw.com/p/readonly/KXAy7d2DlnkM8X1yps6L 编程中的Effect起 ...
- 17.2 实现无管道正向CMD
WSASocket 无管道正向CMD,使用WSASocket函数创建一个TCP套接字,并绑定到一个本地地址和端口上.然后使用CreateProcess函数创建一个新的CMD进程,并将标准输入.输出和错 ...
- Kubernetes跨StorageClass迁移,切换Rainbond默认SC
基于主机安装或基于Kubernetes安装的 Rainbond 集群(均使用默认参数安装),默认使用的共享文件存储是 NFS ,以 Pod 方式运行在 Kubernetes 中,但这种方式也有一些无法 ...
- 组合的输出 题解(lgP1157)
一看就是 dfs 然而窝并不会做 调了一个多小时才调出来.漏洞连篇.(第一次写的基本没有对的地方QAQ 题解见注释. #include<bits/stdc++.h> using names ...
- PTA乙级1038C++哈希解法
#include"bits/stdc++.h" using namespace std; int main() { int a,b[105]={0}; long i,n,K; ci ...
- 3种web会话管理的方式(session)
阅读目录 https://www.cnblogs.com/lyzg/p/6067766.html 1. 基于server端session的管理 2. cookie-based的管理方式 3. tok ...