svelte中文官网
vue和svelt语法对比
掘金-svelte入门简介
文章目录
- 1、基本页面框架
- 2、动态属性
- 3、嵌套组件
- 4、@html: 插入html标签,显示真实dom元素
- 5、点击事件 on:click={handleClick}
- 6、响应式声明
- 7、父子组件通信
- 8、if-else
- (1)if
- (2)if - else
- (3)if - else if - else
- 9、循环
- (1)each 循环
- 10、await
- 11、事件
- (1)绑定方法
- (2)行内事件
- 12、事件修饰符
- 13、事件调度(组件传值)
- (1) 父子通信(子 --> 父)
- (2) 多层级组件间(A->B->C)
- (3)多层级间的通信也可以用 `context`
- 14、动态 class
- 15、slot 插槽
- (1)基本使用
- (2)默认插槽
- (3)多个插槽,`name`
- (4)通过父级是否有内容来控制子元素slot的显示`$$slots`
- (5)slot props
- 16、调试方法
1、基本页面框架
<script>let src = 'tutorial/image.gif';
</script><img src={src} alt="a man dance"><style></style>
2、动态属性
用 {}
包裹
<script>let src = 'tutorial/image.gif';
</script><img src={src} alt="a man dance">
3、嵌套组件
https://www.svelte.cn/tutorial/nested-components
- 通过
import
引入 - 直接
首字母大写标签
使用,不需要像 vue 在 components 中注册 - 样式不会溢出,即每个.svelte 组件中
<style>
里面写的样式不会影响别的组件相同元素
例:
(1)父组件 app.svelte
<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></Nested>
(2)子组件 nested.svelte
<p>This is another paragraph.</p>
4、@html: 插入html标签,显示真实dom元素
@html
:类似 vue 的 v-html
<script>let string = `this string contains some <strong>HTML!!!</strong>`;
</script><p>{@html string}</p>
5、点击事件 on:click={handleClick}
6、响应式声明
(1)简单类型 — 通过赋值
触发
let count = 0; // 普通定义
$: doubled = count * 2; // 响应式声明// HTML中使用,count 改变,doubled就改变
<p>{count} doubled is {doubled}</p>
(2)复杂类型响应
由于 Svelte 的反应性是由赋值语句触发的,使用数组的诸如 push 和 splice 之类的方法就不会触发自动更新。
法1:再次赋值
function addNumber() {numbers.push(numbers.length + 1);numbers = numbers;
}
法2:用解构
<script>let numbers = [1, 2, 3, 4];function addNumber() {// 法1// numbers.push(numbers.length + 1);// numbers = numbers// 法2numbers = [...numbers, numbers.length + 1]}$: sum = numbers.reduce((t, n