Svelte
月半叫做胖
好好学习 冲鸭
展开
-
Svelte学习笔记八:使用Store完成组件间参数共享
StoreStore主要功能是类似vuex、redux和mobx等工具,用于跨组件之间的状态共享。1. Store注册与更新Store写法只需要写在一个js文件中,然后通过svelte/store中提供的writable方法来向公共仓库中注册一个值作为一个仓库元素,之后在组件内可以通过subscribe来监听仓库元素的变化(理解上来说本质上是一个发布订阅的模式),通过set和update来发布仓库内某一个值的变化。Set:直接将仓库内的某个数指定为某个值Update:接收一个仓库当前值的参数的回原创 2020-06-07 00:12:46 · 3682 阅读 · 0 评论 -
Svelte学习笔记七:组件的生命周期
14. 生命周期函数svelte存在的声明周期包括onMountonDestorybeforeUpdateafterUpdatetick(暂时没有找到相关的例子)1. onMount翻译自官网文档:onMount函数在组件都挂在在DOM上之后会触发,在组件初始化的过程中进行调用。如果onMount返回了一个函数, 则这个函数会在组件卸载的时候触发。类似react中的USeEffect,我是这么理解的。但是在实际测试过程中,当我的onMount返回一个函数,好像在组件卸载的时候并不会被执原创 2020-05-24 21:17:21 · 2857 阅读 · 0 评论 -
Svelte学习笔记六:谈谈双向绑定的使用
表单元素的双向绑定1. input受控绑定使用bind关键字进行绑定,svelte通过bind关键字来完成类似v-model的双向绑定text<input type="text" bind:value={formData.name} />checkbox<input type="checkbox" bind:checked={formData.checkboxVal} />number<input type="number" bind:check原创 2020-05-23 11:24:12 · 889 阅读 · 0 评论 -
Svelte学习笔记五----列表渲染+异步渲染
列表循环渲染使用 {#each items as item}{/each} 来实现列表循环渲染,这里的item可以通过解构赋值,拿到item里面的值,例如 {#each items as {name, age}} {/each}一个简单的例子<script> let people = [ {name: "Mike", age: 18, math: 90}, {name: "Jack", age: 20, math: 100}, {原创 2020-05-16 17:52:19 · 955 阅读 · 0 评论 -
Svelte学习笔记四——组件传参+条件渲染
9. 定义组件参数之前定义了无props的组件,如果想定义一个有props的组件,需要怎么操作呢?接受props的定义:我们需要在组件内部通过export let 的方式来定义组件从外部接受的props默认值的设置:直接对定义的props赋值,就会作为组件的默认值使用扩展运算符:如果有多个props,可以通过声明一个props对象然后利用扩展运算符…来简写来看例子<!-- Input.svelte --><script> export let value;原创 2020-05-13 00:40:33 · 3224 阅读 · 0 评论 -
Svelte学习笔记三:计算属性+复杂类型更新的坑
7. 声明(计算属性)在官方文档中把定义的变量叫做,声明(declaration),但是我觉得用来说他是计算属性更好一些,类似vue,或者是class中的get方法,react中useMemo定义的变量,其原因是∗∗我们通过定义的变量叫做,声明(declaration),但是我觉得用来说他是计算属性更好一些,类似vue,或者是class中的get方法,react中useMemo定义的变量,其原因是**我们通过定义的变量叫做,声明(declaration),但是我觉得用来说他是计算属性更好一些,类似vue,原创 2020-05-10 21:55:23 · 855 阅读 · 0 评论 -
Svelte学习笔记二:组件导入+html字符串插入+事件绑定
组件导入和vue和react一样,在script标签中通过import来引入想要引入的.svelte组件这里就简单看一个例子就好// Header.svelte<script> let text = "This is Header";</script><h1>{text}</h1><style> h1 { font-family: 'Courier New', Courier, monospace原创 2020-05-09 00:57:45 · 884 阅读 · 1 评论 -
Svelte学习笔记一: 环境搭建和第一个Svelte程序
最近听到组里的大佬谈论起Svelte,打算用下班的时间好好学一学,每天更新,算是给自己学习的一个动力吧。文档地址:svelte文档地址1. 项目开始通过npx拉取项目模板然后开始svelte之旅吧~npx degit sveltejs/template my-svelte-projectcd my-svelte-projectnpm installnpm run dev2. 什么...原创 2020-05-08 01:00:55 · 1319 阅读 · 0 评论