Svelte之基础知识一

文章目录

  • 参考资料
  • 什么是Svelte?
  • 简介
    • 添加数据`{}`
    • 动态属性`{}`
    • 嵌套组件
    • HTML标签`@html`
    • 创建一个应用程序
  • 反应性能力
    • 赋值`on:click={}`
    • 声明`$:`
    • 语句`$:{}`
    • 更新数组和对象
  • 属性
    • Declaring props`export`
    • 属性对象传递`{...xxx}`
  • 逻辑
    • if语句`{#if xxx}...{/if}`
    • else语句`{#if xxx}...{:else}...{/if}`
    • else-if语句`{#if xxx}...{:else if xxx}...{:else}...{/if}`
    • each语句`{#each xxx as xx}...{/each}`
    • 为each语句添加key值`{#each xxx as xx(key-xxx)}...{/each}`
    • await语句`{#await xxx}...{:then xxx}...{:catch error}...{/await}`
  • 事件
    • DOM 事件`on:xxx={xxx}`
    • inline handlers
    • 事件修饰器`on:xxx|once`
    • 组件事件
    • 事件转发`on:message`、`on:click`

参考资料

  • 官网-中文

什么是Svelte?

  • Svelte 是一个构建 web 应用程序的工具
  • Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似,都怀揣着一颗让构建交互式用户界面变得更容易的心。
    但是有一个关键的区别:Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用,而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本,并且在应用程序首次加载时没有额外损失。
    你可以使用 Svelte 构建整个应用程序,也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包(package)交付到任何地方,并且不会有传统框架所带来的额外开销。

简介

添加数据{}

<script>let name = 'world';
</script><h1>Hello {name}!</h1>

对比Vue:{{}} => {}

动态属性{}

<script>let src = 'tutorial/image.gif';let name = 'Rick Astley';
</script><img {src} alt="{name} dances.">

对比Vue::src = "" => src={}

嵌套组件

注意:组件名称 Nested 的首字母大写。采用此约定是为了使我们能够区分用户自定义的组件和一般的 HTML 标签。

<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/>

HTML标签@html

<script>let string = `this string contains some <strong>HTML!!!</strong>`;
</script><p>{@html string}</p>

对比Vue:v-html => @html

创建一个应用程序

  • VS Code安装插件:Svelte扩展

反应性能力

赋值on:click={}

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

对比Vue:@click="" => on:click={}

声明$:

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

对比Vue:computed => $:

语句$:{}

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

更新数组和对象

  • 由于 Svelte 的反应性是由赋值语句触发的,因此使用数组的诸如 push 和 splice 之类的方法就不会触发自动更新。
  • 解决该问题的一种方法是添加一个多余的赋值语句
  • 一个简单的经验法则是:被更新的变量的名称必须出现在赋值语句的左侧
	<script>let numbers = [1, 2, 3, 4];function addNumber() {numbers = [...numbers, numbers.length + 1]numbers[numbers.length] = numbers.length + 1;}const obj = {foo: {bar: 1}}const foo = obj.foo;foo.bar = 'baz';$: sum = numbers.reduce((t, n) => t + n, 0);</script><p>{numbers.join(' + ')} = {sum}</p><button on:click={addNumber}>Add a number</button><p>{obj.foo.bar}</p>

属性

Declaring propsexport

  • 用于父子组件传值
    子组件:
	<script>export let answer;</script><p>The answer is {answer}</p>

父组件:

	<script>import Nested from './Nested.svelte';</script><Nested answer={412122}/>

对比Vue:prop => export

属性对象传递{...xxx}

<script>import Info from './Info.svelte';const pkg = {name: 'svelte',version: 3,speed: 'blazing',website: 'https://svelte.dev'};
</script><Info {...pkg}/>

逻辑

if语句{#if xxx}...{/if}

<script>let user = { loggedIn: false };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}

对比vue:v-if=>{#if xxx}...{/if}

else语句{#if xxx}...{:else}...{/if}

<script>let user = { loggedIn: false };function toggle() {user.loggedIn = !user.loggedIn;}
</script>{#if user.loggedIn}<button on:click={toggle}>Log out</button>
{:else}<button on:click={toggle}>Log in</button>
{/if}

对比vue:v-if v-else=>{#if xxx}...{:else}...{/if}

else-if语句{#if xxx}...{:else if xxx}...{:else}...{/if}

<script>let x = 7;
</script>{#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语句{#each xxx as xx}...{/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><!-- open each block -->{#each cats as cat, i}<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">{i + 1}:{cat.name}</a></li>{/each}<!-- close each block -->
</ul>

对比vue:v-for=>{#each xxx as xx}...{/each}

为each语句添加key值{#each xxx as xx(key-xxx)}...{/each}

<script>import Thing from './Thing.svelte';let things = [{ id: 1, color: '#0d0887' },{ id: 2, color: '#6a00a8' },{ id: 3, color: '#b12a90' },{ id: 4, color: '#e16462' },{ id: 5, color: '#fca636' }];function handleClick() {things = things.slice(1);}
</script><button on:click={handleClick}>Remove first thing
</button>{#each things as thing (thing.id)}<Thing current={thing.color}/>
<span>{thing.id}</span>
{/each}

对比vue::key="key-xxx"=>{#each xxx as xx(key-xxx)}...{/each}

await语句{#await xxx}...{:then xxx}...{:catch error}...{/await}

<script>let promise = getRandomNumber();async function getRandomNumber() {const res = await fetch(`tutorial/random-number`);const text = await res.text();if (res.ok) {return text;} else {throw new Error(text);}}function handleClick() {promise = getRandomNumber();}
</script><button on:click={handleClick}>generate random number
</button><!-- 方法一:全面 -->
{#await promise}
<p>waiting</p>
{:then value}
<p>{value}
</p>
{:catch error}
<p>{error}
</p>
{/await}<!-- 方法二:省略 -->
{#await promise then value}
<p>{value}</p>
{/await}

事件

DOM 事件on:xxx={xxx}

<script>let m = { x: 0, y: 0 };function handleMousemove(event) {m.x = event.clientX;m.y = event.clientY;}
</script><style>div { width: 100%; height: 100%; }
</style><div on:mousemove={handleMousemove}>The mouse position is {m.x} x {m.y}
</div>

inline handlers

<script>let m = { x: 0, y: 0 };function handleMousemove(event) {m.x = event.clientX;m.y = event.clientY;}
</script><style>div { width: 100%; height: 100%; }
</style><div on:mousemove={e => m = {x: e.clientX, y: e.clientY}}>The mouse position is {m.x} x {m.y}
</div>

事件修饰器on:xxx|once

所有修饰符列表:

  • preventDefault :调用event.preventDefault() ,在运行处理程序之前调用。比如,对客户端表单处理有用。
  • stopPropagation :调用 event.stopPropagation(), 防止事件影响到下一个元素。
  • passive : 优化了对 touch/wheel 事件的滚动表现(Svelte 会在合适的地方自动添加滚动条)。
  • capture — 在 capture 阶段而不是bubbling 阶段触发事件处理程序 ()
  • once :运行一次事件处理程序后将其删除。
  • self — 仅当 event.target 是其本身时才执行。
	<script>function handleClick() {alert('clicked')}</script><button on:click|once={handleClick}>Click me</button>
  • 可以将修饰符组合在一起使用,例如:on:click|once|capture={...}

组件事件

  • 子组件:createEventDispatcher()(‘xxx’, param)
    createEventDispatcher 必须在首次实例化组件时调用它,—组件本身不支持如 setTimeout 之类的事件回调。 定义一个dispatch进行连接,进而把组件实例化。
	<script>import { createEventDispatcher } from 'svelte';// setup code goes hereconst dispatch = createEventDispatcher()function sayHello() {dispatch('message', {text: 'Hello zoey'})}</script><button on:click={sayHello}>Click to say hello zoey</button>
  • 父组件:on:xxx
	<script>import Inner from './Inner.svelte';function handleMessage(event) {alert(event.detail.text);}</script><Inner on:message={handleMessage}/>

事件转发on:messageon:click

message 没有赋予特定的值得情况下意味着转发所有massage事件:

<script>import Inner from './Inner.svelte';
</script><Inner on:message/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/742562.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Coordinate Attention(CVPR 2021)

paper&#xff1a;Coordinate Attention for Efficient Mobile Network Design official implementation&#xff1a;GitHub - houqb/CoordAttention: Code for our CVPR2021 paper coordinate attention 背景 注意力机制&#xff0c;已经被广泛用于提高深度神经网络的性能&…

HBuilder发行微信小程序

首先需要完善mainifest.json中的基本配置 这个需要组测dcloud才可以获取&#xff0c;注册后点击重新获取就可以。 然后发行前还需要完成dcloud的信息&#xff0c;这个他会给你网址 点击连接完成信息填写就可以了 然后就可以发行了。 发行成功后会自动跳转微信小程序&#xff…

Sklearn逻辑回归

逻辑回归是一种广泛用于分类问题的机器学习算法。在Python中&#xff0c;你可以使用Sklearn库&#xff08;scikit-learn&#xff09;来方便地实现逻辑回归。下面是一个简单的例子&#xff0c;展示了如何使用Sklearn进行逻辑回归。 # 导入必要的库 from sklearn.model_selectio…

大数据面试(Kafka面试真题-卷二)

大数据面试&#xff08;Kafka面试真题&#xff09; 1、Kafka分区容错性&#xff1f;2、Kafka的IOSR和ACK介绍&#xff0c;ACK分别有几种值&#xff1f;3、Kafka的工作原理&#xff1f;4、Kafka如何保证全局有序&#xff1f;5、Kafka为什么同一个消费者组的消费者不能消费相同的…

6.Java并发编程—深入剖析Java Executors:探索创建线程的5种神奇方式

Executors快速创建线程池的方法 Java通过Executors 工厂提供了5种创建线程池的方法&#xff0c;具体方法如下 方法名描述newSingleThreadExecutor()创建一个单线程的线程池&#xff0c;该线程池中只有一个工作线程。所有任务按照提交的顺序依次执行&#xff0c;保证任务的顺序性…

现代化的轻量级Redis桌面客户端Tiny RDM

​欢迎光临我的博客查看最新文章: https://river106.cn 1、简介 Tiny RDM&#xff08;全称&#xff1a;Tiny Redis Desktop Manager&#xff09;是一个界面现代化的轻量级Redis桌面客户端&#xff0c;支持Linux、Mac和Windows。它专为开发和运维人员设计&#xff0c;使得与Red…

python coding with ChatGPT 打卡第22天| 二叉搜索树的操作:插入、删除、修剪、转换

相关推荐 python coding with ChatGPT 打卡第12天| 二叉树&#xff1a;理论基础 python coding with ChatGPT 打卡第13天| 二叉树的深度优先遍历 python coding with ChatGPT 打卡第14天| 二叉树的广度优先遍历 python coding with ChatGPT 打卡第15天| 二叉树&#xff1a;翻转…

SpringBoot集成对象存储服务Minio

MinIO 是一个基于 Apache License v2.0 开源协议的对象存储服务。它兼容亚马逊 S3 云存储服务接口&#xff0c;非常适合于存储大容量非结构化的数据&#xff0c;例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等&#xff0c;而一个对象文件可以是任意大小&#xff0c;从…

IP数据报格式

每一行都由32位比特&#xff0c;即4个字节组成&#xff0c;每个格子称为字段或者域。IP数据报由20字节的固定部分和最大40字节的可变部分组成。 总长度 总长度为16个比特&#xff0c;该字段的取值以字节为单位&#xff0c;用来表示IPv4数据报的长度(首部长度数据载荷长度)最大…

基于java+springboot+vue实现的停车场管理系统(文末源码+Lw)23-258

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统停车场管理系统信息管理难度大&#xff0c;容错率低&…

【Axure高保真原型】下拉列表切换图表

今天和大家分享通过下拉列表动态切换统计图表的原型模板&#xff0c;我们可以通过下拉列表选择要显示的图表&#xff0c;包括柱状图、条形图、饼图、环形图、折线图、曲线图、面积图、阶梯图、雷达图&#xff1b;而且图表数据可以在左侧表格中动态维护&#xff0c;包括增加修改…

《你是什么垃圾-弹幕版》

你是什么垃圾-弹幕版 类型&#xff1a;垃圾分类 视角&#xff1a;2d 乐趣点&#xff1a;弹幕交互&#xff0c;热点追踪 时间&#xff1a;2021 个人职责&#xff1a; 所有程序部分的设计开发 此游戏是某个早晨&#xff0c;在早点铺子吃米线的时候构思出来的。当时正是&#xff0…

bpmn-js系列之Viewer

上一篇文章『bpmn-js系列之Modeler、以及流程编辑界面的优化』介绍了bpmn-js的modeler模式下的一些开发配置&#xff0c;这篇文章将会介绍Viewer模式的使用 以下演示代码基于上一节搭建好的vue环境&#xff0c;使用bpmn版本为当前最新版7.3.0 基本使用 Viewer的使用与Modele…

【基础CSS】

本文章属于学习笔记&#xff0c;在https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/中练习 二、 CSS 样式&#xff0c;新建一个文件.css&#xff0c;该文件不含有style标签 <style>. h1&#xff0c;h2&#xff0c;p{ text-align&#xff1a;ce…

Android 优化

布局优化: 减少布局层级&#xff0c;使用ViewStub提高显示速度&#xff0c;布局服用&#xff0c;尽可能少使用warp_content&#xff0c;删除空间中无用的属性,避免过度绘制移除window默认背景&#xff0c;按需显示展位图&#xff0c;自定义View优化&#xff0c;使用canvas.clip…

mysql57开启biglog并查看biglog保姆级教程

目录 详细步骤 1.修改mysql配置文件 2.重启mysql 3.操作数据库 4.查看binglog 4.1mysqlbinlog示例: 4.2mysqlbinlog将biglog写入文件示例: 4.2.1biglog中创建表示例: 4.2.2插入示例 4.2.3更新示例 详细步骤 1.修改mysql配置文件 vi /etc/my.cnf [mysqld]下增加如下…

Skywalking(9.7.0) 告警配置

图片被吞&#xff0c;来这里看吧&#xff1a;https://juejin.cn/post/7344567669893021736 过年前一天发版&#xff0c;大家高高兴兴准备回家过年去了。这时候老板说了一句&#xff0c;记得带上电脑&#xff0c;关注用户反馈。有紧急问题在高速上都得给我找个服务区改好。 但是…

C++初阶

1.缺省参数 给缺省参数的时候&#xff0c;不能声明&#xff0c;定义同时给&#xff0c;只能声明的时候给缺省参数&#xff0c;同时给程序报错&#xff1b; 2.函数重载 C语言不允许同名函数的存在&#xff0c;函数名不能相同&#xff0c;C引入函数重载&#xff0c;函数名可以…

IDEA启动时,电脑非常的卡

选择Help -> Change memory Settings 把启动内存调大一点就行了&#xff0c;反正要超过你平时使用IDEA时使用到的内存大小就行。 原因解释&#xff1a; JVM在运行时会回收新生代和老年代的垃圾&#xff0c;新生代无法回收的对象&#xff0c;比如&#xff1a;回收15次都没有…

什么是递归组件?

递归组件是指在Vue.js中&#xff0c;组件内部直接或间接地引用自身的情况。通过递归组件&#xff0c;可以实现树形结构、评论列表、菜单等具有层级关系的数据展示。 在使用递归组件时&#xff0c;需要注意以下几点&#xff1a; 定义方式&#xff1a;在Vue组件中&#xff0c;可…