Svelte基础入门

Svelte基础入门

描述

1、单页内的样式不会溢出渲染全局，只作用于当前页。
2、作为component组件的标签首字母需大写，用于区分HTML标签。
3、使用@html解析文本中的html标签。
4、绑定点击事件：on:click
5、由于 Svelte 的反应性是由赋值语句触发的，因此使用数组的诸如 push 和 splice 之类的方法就不会触发自动更新。
解决该问题的一种方法是添加一个多余的赋值语句。
6、利用...语法传递对象数据给组件。
7、{#if 条件} {/if} 判断
8、{#if 条件} {:else} {/if} 
9、{#if 条件} {:else if 条件} {:else} {/if} 
10、遍历的数据列表 {#each 数组 as 对象 } {/each}
11、为 each 块指定一个唯一标识符，作为 key 值
（使用字符串或者数字作为 key 值通常更安全）
（若无key值在操作数据删除时会从最后一条开始删除）
12、处理异步数据 {#await 请求函数} {:then success} {:catch error}{/await}
13、鼠标移动事件on:mousemove
14、使用 |字符添加修饰符。修饰符：preventDefault|stopPropagation|passive|capture|once|self 
可组合使用on:click|once|capture={...}
15、组件调度事件，组件内必须创建一个相同事件并在外部进行分配。
16、中间件，嵌套：中间组件必须 转发（forward） 该事件。
17、事件转发也可以应用到DOM事件。添加click 事件即可。

1、注释<!-- 这是一句注释！ -->
以 svelte-ignore 开始的内容会被注释掉，直到位于注释闭合标签结束注释。
<!-- svelte-ignore a11y-autofocus -->
2、可与使用 {@debug ...} 替换 console.log(...) 来使用。
3、绑定值：bind:value   (输入框)
4、绑定组：bind:group   (按钮组)
5、绑定this：bind:this
6、样式：class:name    (class:样式名= {展示条件})
如绑定多个：<div class:active class:inactive={!active} class:isAdmin>...</div>
入门第一式：say hello
<script> let name = '雷猴' </script>
<div>{ name }</div>

<script> 
  let name = 'hello'

  function sayHi() {
    return `${name} 世界！`
  }
</script>
<div>{sayHi()}</div>
入门第二式：表达式的使用
<script> 
  let a = 1, b = 2;  
	let h1El = '<h1 style="color: pink;">雷猴</h1>';
  let src = './dog.png';
  let string = `Today is <strong>MonDay!</strong>`;
  let state = false;
</script>
<div>{a} + {b} = {a + b}</div>
<!-- 不解析HTML标签 -->
<div>{h1El}</div>
<img src={src} alt="A man dances.">
<!-- @html用于解析HTML标签 -->
<p>{@html string}</p>
<!-- 三目运算 -->
<div>{state ? '今天周四' : '明天周五'}</div>
入门第三式：if条件
<script>
  let user = { loggedIn: false },  x = 7;
	function toggle() {
		user.loggedIn = !user.loggedIn;
  }
</script>
{#if user.loggedIn}
	<button on:click={toggle}> Log out </button>
{/if}
{#if !user.loggedIn}
	<button on:click={toggle}> Log in </button>
{/if}

{#if user.loggedIn}
	<button on:click={toggle}> Log out </button>
{:else}
	<button on:click={toggle}> Log in </button>
{/if}

{#if x > 10}
	<p>{x} is greater than 10</p>
{:else if 5 > x}
	<p>{x} is less than 5</p>
{:else}
	<p>{x} is between 5 and 10</p>
{/if}
入门第四式：each循环
<script> 
import Thing from './Thing.svelte';
let cats = [
		{ id: '11', name: 'Keyboard Cat' },
		{ id: '22', name: 'Maru' },
		{ id: '33', name: 'Henri The Existential Cat' }
];
let things = [
    { id: 1, color: '#0d0887' },
    { id: 2, color: '#6a00a8' },
    { id: 3, color: '#b12a90' },
    { id: 4, color: '#e16462' },
    { id: 5, color: '#fca636' }
];
</script>
<ul>
  <!-- 解构对象{ id, name }，序列 i -->
  {#each cats as { id, name }, i}
  	<li> {i + 1}: {name}</li>
  {/each}
</ul>

<ul>
  <!-- 对象 cat -->
  {#each cats as cat, i}
  	<li>{i + 1}: {cat.name}</li>
  {/each}
</ul>

{#each things as thing (thing.id)}
   <Thing current={thing.color}/>
{/each}
component.Thing
<script>
	export let current; // 获取组件传值
	const initial = current; 
</script>

<p>
	<span style="background-color: {initial}">initial</span>
	<span style="background-color: {current}">current</span>
</p>

<style>
	span {
		display: inline-block;
		padding: 0.2em 0.5em;
		margin: 0 0.2em 0.2em 0;
		width: 4em;
		text-align: center;
		border-radius: 0.2em;
		color: white;
	}
</style>
入门第五式：事件
<script>
	function handleToggle() {
    console.log('按钮被触发了！')
  }
  
  let m = { x: 0, y: 0 };
	function handleMousemove(event) {
		m.x = event.clientX;
		m.y = event.clientY;
  }
</script>
<button on:click={handleToggle}>点击事件</button>
<div on:mousemove={handleMousemove}>
  The mouse position is {m.x} x {m.y}
</div>
<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
  The mouse position is {m.x} x {m.y}
</div>

<!-- once只触发一次 -->
<button on:click|once={handleToggle}>点击</button>
入门第六式：组件传参
<script>
  import Nested from './Nested.svelte';
</script>
<Nested />
<Nested answer={42}/>
<Nested expain={'Tommy，bye!'}/>
component.Nested
<script>
    export let answer;
    export let expain = 'hello word';
</script>
<main>
    <p>This is another paragraph.</p>
    <p>The answer is {answer}</p>
    <p>goodbye！{expain}</p>
</main>
入门第七式：事件访问。在子或孙组件触发父级事件。
<script>
import Inner from './Inner.svelte';
import Outer from './Outer.svelte';
function handleMessage(event) {
		alert(event.detail.text); // Hello!
}
</script>
<Inner on:message={handleMessage}/>
<Outer on:message={handleMessage}/>
component.Inner
<script>
  <!-- 
    createEventDispatcher 必须在首次实例化组件时调用它，—组件本身不支持如 setTimeout 之类的事件回调。因此需定义一个dispatch进行连接，进而把组件实例化。
 -->
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();
	function sayHello() {
		dispatch('message', {
			text: 'Hello!'
		});
	}
</script>

<button on:click={sayHello}>Click to say hello</button>
component.Outer
<script>
	import Inner from './Inner.svelte';
</script>
<!-- on:message 中若 message 没有赋予特定的值得情况下意味着转发所有massage事件 -->
<Inner on:message/>

Svelte +ui

待补充

以下仅记录待整理==============================================

backup

warn

1、as it is equal to previous output after normalization

Other

1、VSCODE 安装插件Svelte for VS Code

2、

A11y: <video> elements must have a <track kind="captions">svelte(a11y-media-has-caption)

带有两个字幕轨道的 video 元素：
<video width="320" height="240" controls="controls">
  <source src="forrest_gump.mp4" type="video/mp4" />
  <source src="forrest_gump.ogg" type="video/ogg" />
  <track kind="captions" src="subschi.srt" srclang="zh" label="Chinese">
  <track kind="captions" src="subseng.srt" srclang="en" label="English">
</video>
kind值 描述
captions 该轨道定义将在播放器中显示的简短说明。
chapters 该轨道定义章节，用于导航媒介资源。
descriptions 该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见。
metadata 该轨道定义脚本使用的内容。
subtitles 该轨道定义字幕，用于在视频中显示字幕。

3、

Type '{ onpanstart: () => void; onpanmove: (event: any) => void; onpanend: (event: any) => void; style: string; class: string; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.
  
  Property 'onpanstart' does not exist on type 'HTMLProps<HTMLDivElement>'.js(2322)

record

https://www.sveltejs.cn/docs


<script>包含创建 component 实例时运行的JavaScript
1、使用export 创建 component prop 属性 如export let foo; 
且const、class 或 function会使导出到component外部的属性变成只读属性；
2、'反应性（reactive）' 分配
3、$: 声明反应性
4、用 $前缀来存储store值

<script context="module">作为已编译模块导出。（混入？）
<style>单页中的<style>只作用于自己
全部样式:global(body) {}
局部中的全局样式div :global(strong) {}
常规的HTML标签，标签小写如<div><span>，组件标签名首字母需大写。

svelteKit

https://www.sohu.com/a/564274213_121245961

npm init svelte@next my-svelte-app


Unsupported engine for @sveltejs/kit@1.0.0-next.460: wanted: {"node":">=16.14"} (current: {"node":"14.20.0","npm":"6.14.17"})

UI界面库

  1. Svelte Material UI
  2. Carbon Components Svelte
  3. Smelte
  4. Svelteit
  5. Attractions

官方插件#

@vitejs/plugin-vue#

  • 提供 Vue 3 单文件组件支持

@vitejs/plugin-vue-jsx#

@vitejs/plugin-react#

  • 提供完整的 React 支持

@vitejs/plugin-legacy#

  • 为打包后的文件提供传统浏览器兼容性支持

学习文档

[ https://baijiahao.baidu.com/s?id=1730947604416356275&wfr=spider&for=pc ]

[ https://juejin.cn/post/7121759118070644772#heading-25 ]

中文文本加拼音：https://juejin.cn/post/7152739907001057311

npm install pinyin-pro

import { pinyin } from 'pinyin-pro'
pinyin('汉语拼音') *// 'hàn yǔ pīn yīn'

posted on 2022-11-09 17:04  羽丫头不乖  阅读(499)  评论(0)  编辑  收藏  举报