摘要：
正文 Svelte 作者是怎么想到的呀，居然把 onMount 和 beforeDestroy 合起来了：当 onMount 返回一个函数时，该函数会在组件销毁时调用，只能说NB.. 下面是子组件 Child.svelte，会发现在 onMount 函数内返回了一个 function： <scrip 阅读全文
2021年9月9日
摘要：
正文 用一个例子演示 Svelte 中所有生命周期函数的用法（实际上就是记几个单词）。 下面是父组件：App.svelte，子组件的挂载、卸载都靠它触发： <script> import Child from "./Child.svelte"; // state let status = false 阅读全文
摘要：
正文 Vue 默认是将组件中一个名为 value 的 props 和 一个名为 'input' 的自定义事件作为 v-model 的配置项，从而实现自定义组件的双向绑定功能。而 Svelte 中的双向数据绑定则灵活得多，它被称为“组件绑定”，也就是对子组件暴露出来的 props 直接使用 bind: 阅读全文
摘要：
正文 类似 clientWidth、clientHeight 这类属性，想要实时获取它们的值需要进行事件监听，但借助 Svelte 强大的数据绑定功能，可以做到对这一类属性的绑定与即时获取。 <script> let clientWidth, clientHeight; </script> <div 阅读全文
摘要：
正文 也就是 Vue 和 React 中的 ref 值，但 Svelte 中的获取方法更加符合直觉：把 DOM 节点的 this 赋值给特定变量 <script> import { onMount } from "svelte"; let titleEl; console.log("组件尚未挂载，因 阅读全文
摘要：
正文 下面是一个位于 each 块中的一组 input 输入框，可以通过 bind:value 实现数据的双向绑定。 <script> let list = ["eat morning."]; const add = () => { list = [...list, ""]; }; </script 阅读全文
摘要：
正文 任何表单控件都可以绑定，只是绑定的属性有所不同而已（大部分是 value）。 <script> let value = 2; // let value = []; // 多选时为数组 const options = [ { name: "apple", value: 0 }, { name: 阅读全文
摘要：
正文 需要两个属性配合使用才行，他们是：contenteditable 和 innerHTML，如下 <script> let htmlStr = ` <strong>Hello, World!</strong> `; </script> <!-- 纯文本 --> <div>{htmlStr}</d 阅读全文
摘要：
正文 输入框组绑定指定是某些类型的 input 标签的值共同作用于一个变量，比如一个选择男女的单选框，它们的值的变化就应该作用于同一个变量，此时就可以用输入框组绑定功能：bind:group={gender}。 <script> let gender = 1; $: console.log(gend 阅读全文
摘要：
正文 双向数据绑定是很实用的特性，Vue 中使用指令：v-model，在 Svelte 中使用：bind:value={value}，这里因为属性名和绑定的变量值名称相同，所以可以简写成：bind:value。 <script> let value = ""; </script> <div> <!- 阅读全文
摘要：
正文 现在组件的层级是：<Father> 内嵌 <Child>，<Child> 内嵌 <GrandChild>，如果此时 Father 组件中定义的一个事件监听函数要在 <GrandChild> 组件中触发执行，则必定会经过中间组件：<Child>，下面是 <Child> 组件内的常规设置： <sc 阅读全文
摘要：
正文 React 中没有事件修饰符，Vue 用的说 @click.once 语法，Svelte 用的是 on:click|once 语法。 <script> const clickHandler = (foo) => alert(foo + "trigger"); </script> <!-- on 阅读全文
摘要：
正文 不同于 React 中以 props 传递，Svelte 中的自定义事件更加类似 Vue，不过需要使用 createEventDispatcher() 构建一个事件派发器，而这一步在 Vue 中是使用 this.$emit() 实现的。 下面是子组件Nested.svelte，自定义事件将会在 阅读全文
摘要：
正文 因为异步请求的处理逻辑大多相似：请求时 pending、成功请求时展示数据、请求失败时展示异常，所以 Svelte 贴心地在模板中添加了这一模式，方便我们去做处理。 <script> import AppBackup from "./AppBackup.svelte"; let promise 阅读全文
摘要：
key 值也存在于 Svelte 中，它在列表渲染区块中作为最后一个参数存在，使用括号包裹。 <script> let list = [ { name: "lilei", age: 21 }, { name: "hanmeimei", age: 24 }, { name: "lihua", age: 阅读全文
摘要：
1 前言 模板写法不同于 JSX，JSX 可以用 JS 的条件控制语句，而模板需要单独设计条件控制语法，比如 Vue 中使用 v-if 2 正文 <script> let counter = 0; const increment = () => { counter++; }; </script> < 阅读全文
摘要：
1 前言 Svelte 中条件渲染使用{#if ...} ... {/if} 声明，那列表渲染是不是类似：{#for ...} ... {/for}？ 2 正文 Svelte 中的列表渲染使用跟条件渲染类似的语法，不过关键字换成了 each，item 可以解构，这样看起来比较清晰。 <script> 阅读全文
摘要：
1 前言 前端组件化开发，单向数据流，有了 state、props 和状态更新机制，也就能做简单的 web 应用啦~ 2 正文 props 在根组件上以 props 选项的形式声明，在嵌套组件树中，可以自由设置和传递。 先写一个子组件 Nested.svelte，该组件会在 App.svelte 中 阅读全文
摘要：
1 前言 当一个组件具有过多 props 时，就渴望有一种统一设置的方法；当子组件上存在从父组件传过来的非 props 属性时，子组件又该怎样获取呢？ 2 正文 首先还是正常书写子组件：Nested.svelte，这里的$$props 可以获取父级传递的所有属性，包括 props 属性和非 prop 阅读全文
摘要：
1 前言 Vue2 中无法监听7个数组方法引发的变化，它们分别是：pop、push、reverse、shfit、unshift、sort 和 splice。 2 正文 Svelte 中同样无法监听以上 7 个数组方法的变动，此外，类似delete obj.a 这种操作也是无法监听的，因为在 Svel 阅读全文
摘要：
1 前言 Svelte 中反应性不仅可以作声明用，还可以用在一段语句中，这点类似 Vue 中的 watch，但比 watch 灵活。 2 正文 <script> import { loop_guard } from "svelte/internal"; let count = 3; const in 阅读全文
摘要：
1 前言 不知道为什么翻译成“反应性”，而不是“响应式”，因为不是选项式 API，计算属性在 Svelte 中的写法会是怎样的呢？ 2 正文 Svelte 中的计算属性使用 $: 起手作变量声明，它会在等号右边依赖的值变化时自动计算。 <script> let count = 3; $: dbCou 阅读全文
摘要：
1 前言 类似 Vue 中的 v-html 指令的功能在 Svelte 中怎样实现？ 2 正文 <script> const innerHTML = ` <h3>This is a title.</h3> <p>Paragraph</p> `; </script> <div> <strong>以下内 阅读全文
摘要：
1 前言 跟用户交互需要监听、触发各种事件，这时就需要用到数据绑定，Vue 是 v-on，React 是 onXxxx，Svelte 是什么呢？ 2 正文 丫的，又是合并了 Vue 和 React 的设计，on:click={clickHandler}，哈哈哈哈.... <script> let c 阅读全文
摘要：
前言 组件怎么能没有样式呢？ 莫得样式的组件谁会用呢？？ 正文 在 App.svelte 中写入以下代码就能看到样式了，又一个跟 Vue 很像的点：style 写在组件文件内，不过跟 Vue 不同的是，Svelte 组件中的 style 是默认局部的，Vue 中还需要显式设置 scoped 属性才行 阅读全文
摘要：
1 前言 划分组件，引用组件，复用组件，基操。 2 正文 被引用的组件不用在内部 export default，引用组件时也不需要像 Vue 一样使用 components 选项注册，引进来，直接用就成，而且还自动样式隔离，爽歪歪。唯一一点注意一下：约定引入的组件使用大写字母开头，类似 React。 阅读全文
摘要：
1 前言 <h1>Hello, {name}</h1>，这种写法没问题； <img src={src} alt="a image" />， 这种写法也没问题； 但类似“将变量绑定到同名属性上”这种操作是否有便捷写法呢？ 2 正文 属性速记 是一种类似 ES6 对象赋值便捷方法的一种属性绑定便捷方法， 阅读全文
摘要：
1 前言 props 很快就会安排，但现在得先知道 Svelte 怎样设置状态（state），它会像 React 一样需要 setState 才能更新吗？还是说像 Vue 里面响应式自动监听变动？ 2 写一个带 state 的组件 明眼人都看得出来，响应式变量更方便，不用 setState，Svel 阅读全文
摘要：
1 前言 前端组件开发，自然免不了创建各种功能的组件，Svelte 中怎样创建组件呢？它是模板写法还是类写法？会用到 JSX 吗？需要怎样引入和挂载呢？ 2 创建组件 .svelte 结尾的文件就是一个 Svelte 组件，类似 .vue 结尾的就是一个 Vue 组件一样，它是模板写法，一个文件里面 阅读全文
摘要：
1 前言 Svelte 没有运行时，它是在编译阶段就将代码完全转化过了，但这不代表它不需要安装依赖包，它还是走的前端工程化的那一套东西，所以免不了要安装一些依赖。 2 正文 点击这个地址：template-master.zip，然后解压并 npm i 即可安装，可能是作者偷懒，没有做一些功能完备的脚 阅读全文
2020年6月11日
摘要：
第一步： Ctrl + Shift + P，在搜索框中输入：settings.json，选择下面这个： 第二步： 将下面两行代码复制粘贴到 settings.json 中，保存后退出，重启vscode，这时使用：Alt + Shift + F 就可以加上了空格了。 "vetur.format.def 阅读全文
2019年11月29日
摘要：
一般来说, 一行就是一条语句, 但有时语句过长不利于阅读, 一般会写成多行的形式, 这时需要在换行时使用反斜杠: \ name = "Lilei" age = 23 gender = "boy" str = "Hello, my name is " + \ name + \ ". I'm " + \ 阅读全文
摘要：
python中的注释是以井号: # 开头, 一般会在#后加一个空格. # This is a comment print("Hello, World!") 多行注释的语法是三引号: ''' 或 """ ''' 这是 多行注释 ''' """ 这也是 多行注释 """ print("Hello, Wo 阅读全文
摘要：
关键字是python中具有特定功能的一组词汇, 这些词汇不能用作变量名, 一般会有高亮提示, code时请小心. python的关键字其实也是python的语法核心, 掌握了所有python关键字的用法, 可以认为是基本入门python. 查看方法如下, 需要引入一个keyword库. import 阅读全文
摘要：
ipython 是一个python的交互式shell, 比默认的python shell更好用, 支持自动补全 / 上下翻等功能. 下面是按照方法: # 通用安装方法 pip install ipython # Ubuntu上也可以使用下面的命令安装 sudo apt-get install ipy 阅读全文
摘要：
方法一: 进入python交互模式, 然后使用: print()函数输出 方法二: 新建一个.py文件, 然后写入print()函数, 再使用python命令执行输出: 阅读全文
摘要：
方法一: 在命令行下使用python -V 方法二: 在命令行下进入python交互模式, 可以在第一行看到python的版本信息 阅读全文
2019年11月18日
摘要：
因为安全方面的考虑, ssh服务默认在一段时间内不操作会断开连接, 解决方法修改ssh的配置文件, 让ssh每隔一段时间就自动进行一次连接, 以达到保持连接的目的. 首先找到ssh配置文件的位置: find / -name ssh_config 找到以后, 用vim打开ssh_config文件, 添 阅读全文
摘要：
尝试下面两个命令: service sshd restart systemctl restart sshd.service 阅读全文
摘要：
默认vim的tab缩进是八个空格, 太长了, 需要改短一点. 第一步: 找到vimrc文件所在位置 # find / -name vimrc 第二步: 找到以后用vim打开vimrc文件并增加下面两行代码 set ts=4 set expandtab 如下所示, 完成后保存退出即可. 阅读全文
