摘要：
./store/state.js export default { userInfo: { name: '' }, } ./store/mutations.js export default { UPDATE_NAME(state, payload = {}) { state.userInfo.na 阅读全文
posted @ 2021-09-09 10:53
aisowe
阅读(158)
评论(0)
推荐(0)
2021年9月9日
摘要：
index.ts const foo: string[] = ["foo", "bar"] 阅读全文
posted @ 2021-09-09 10:52
aisowe
阅读(2109)
评论(0)
推荐(0)
摘要：
./build - build - webpack.common.js - webpack.dev.js - webpack.prod.js webpack.common.js module.exports = { entry: output: plugins: module: ... } webp 阅读全文
posted @ 2021-09-09 10:52
aisowe
阅读(47)
评论(0)
推荐(0)
摘要：
index.ts abstract class Foo { constructor() {} className = "Foo"; } class FooChild extends Foo { constructor() { super(); } } // const foo = new Foo() 阅读全文
posted @ 2021-09-09 10:51
aisowe
阅读(204)
评论(0)
推荐(0)
摘要：
index.ts const lilei: [string, number] = ["Lilei", 23] 阅读全文
posted @ 2021-09-09 10:51
aisowe
阅读(260)
评论(0)
推荐(0)
摘要：
index.ts let decLiteral: number = 6 // 10 let hexLiteral: number = 0xf00d // 16 let binaryLiteral: number = 0b1010 // 2 let octalLiteral: number = 0o7 阅读全文
posted @ 2021-09-09 10:50
aisowe
阅读(698)
评论(0)
推荐(0)
摘要：
index.ts function foo(name: string, age?: number) { console.log(name + age); } foo("a"); // "aundefined" 阅读全文
posted @ 2021-09-09 10:49
aisowe
阅读(4264)
评论(0)
推荐(0)
摘要：
index.ts interface IPerson { name: string age: number gender?: number } const lilei: IPerson = { name: "Lilei", age: 23, } 阅读全文
posted @ 2021-09-09 10:49
aisowe
阅读(1042)
评论(0)
推荐(0)
摘要：
index.ts interface IPerson { name: string age: number family?: any[] // Error，因为不是任意类型的子集 [propName: string]: string | number // 一般设置 any，因为其他类型必需是任意类 阅读全文
posted @ 2021-09-09 10:49
aisowe
阅读(2595)
评论(0)
推荐(0)
摘要：
index.ts function foo(...rest: any[]) { console.log(rest) } foo(1, 2, 3) // [1, 2, 3] 阅读全文
posted @ 2021-09-09 10:48
aisowe
阅读(306)
评论(0)
推荐(0)
摘要：
index.js window.alert('Hello! \n Lilei!') 阅读全文
posted @ 2021-09-09 10:47
aisowe
阅读(331)
评论(0)
推荐(0)
摘要：
index.js const res = window.prompt("What's your name?"); alert(`Your name is ${res}`); 阅读全文
posted @ 2021-09-09 10:40
aisowe
阅读(713)
评论(0)
推荐(0)
摘要：
index.sh code D:/projFolder && git pull && npm run serve 阅读全文
posted @ 2021-09-09 10:39
aisowe
阅读(415)
评论(0)
推荐(0)
摘要：
index.js const res = window.confirm("Are you a programmer?"); alert(`Your answer is ${res}`); 阅读全文
posted @ 2021-09-09 10:39
aisowe
阅读(159)
评论(0)
推荐(0)
摘要：
npm npm i -D sass-loader node-sass webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.(css|scss)$/, use: ['style-loader', 'css- 阅读全文
posted @ 2021-09-09 10:38
aisowe
阅读(172)
评论(0)
推荐(0)
摘要：
npm npm i -D file-loader webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif|jpeg)$/, use: { loader: 'file-loader', }, }, 阅读全文
posted @ 2021-09-09 10:38
aisowe
阅读(52)
评论(0)
推荐(0)
摘要：
index.js const foo = Object(null); const bar = Object.create(null); console.log(foo instanceof Object); // true console.log(bar instanceof Object); // 阅读全文
posted @ 2021-09-09 10:37
aisowe
阅读(134)
评论(0)
推荐(0)
摘要：
npm npm i -D style-loader css.loader webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loade 阅读全文
posted @ 2021-09-09 10:37
aisowe
阅读(28)
评论(0)
推荐(0)
摘要：
@vue/cli vue create xxx 阅读全文
posted @ 2021-09-09 10:36
aisowe
阅读(33)
评论(0)
推荐(0)
摘要：
browser https://www.dcloud.io/hbuilderx.html https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html HBuilderX 文件 -> 新建 -> 项目 -> uni-a 阅读全文
posted @ 2021-09-09 10:35
aisowe
阅读(70)
评论(0)
推荐(0)
摘要：
index.js const specialObj = Object.create(null); console.log(specialObj.__proto__); // undefined 阅读全文
posted @ 2021-09-09 10:35
aisowe
阅读(300)
评论(0)
推荐(0)
摘要：
index.js import React from "react"; class App extends React.Component { render() { return <h1>Hello, World!</h1>; } } 阅读全文
posted @ 2021-09-09 10:35
aisowe
阅读(108)
评论(0)
推荐(0)
摘要：
index.js function Foo() { const list = []; this.push = function (val) { list.push(val); }; this.getList = function () { console.log(list); }; } const 阅读全文
posted @ 2021-09-09 10:34
aisowe
阅读(140)
评论(0)
推荐(0)
摘要：
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <button onclick="clickHandler()">print</button> <script> function cli 阅读全文
posted @ 2021-09-09 10:33
aisowe
阅读(176)
评论(0)
推荐(0)
摘要：
yarn yarn create react-app my-app 阅读全文
posted @ 2021-09-09 10:33
aisowe
阅读(17)
评论(0)
推荐(0)
摘要：
tsconfig.json { "compilerOptions": { "target": "ESNEXT", "lib": ["DOM", "ESNEXT"], }, } index.ts const a = 11n 阅读全文
posted @ 2021-09-09 10:32
aisowe
阅读(292)
评论(0)
推荐(0)
摘要：
browser https://www.typescriptlang.org/dt/search?search= 阅读全文
posted @ 2021-09-09 10:31
aisowe
阅读(165)
评论(0)
推荐(0)
摘要：
功能类似：撤回，Ctrl + Z。 git-bash git checkout -- file_name 这个命令只能撤回没有保存到暂存区和工作区中的变动，用于对做了修改，没暂存没提交但关闭了（导致无法Ctrl+Z）的文件进行撤销。 阅读全文
posted @ 2021-09-09 10:31
aisowe
阅读(97)
评论(0)
推荐(0)
摘要：
查看仓库当前状态 git-bash git status 阅读全文
posted @ 2021-09-09 10:30
aisowe
阅读(117)
评论(0)
推荐(0)
摘要：
查看全局用户名和 Email git-bash git config --global user.name git config --global user.email 查看当前仓库用户名和 Email git-bash git config user.name git config user.em 阅读全文
posted @ 2021-09-09 10:30
aisowe
阅读(1667)
评论(0)
推荐(0)
摘要：
bash npm view vue versions 阅读全文
posted @ 2021-09-09 10:29
aisowe
阅读(191)
评论(0)
推荐(0)
摘要：
查看仓库当前状态 git-bash git diff 阅读全文
posted @ 2021-09-09 10:29
aisowe
阅读(462)
评论(0)
推荐(0)
摘要：
查看历史提交记录 git-bash git log 如果觉得比较凌乱，可以用简略版：git log --pretty=oneline 阅读全文
posted @ 2021-09-09 10:28
aisowe
阅读(502)
评论(0)
推荐(0)
摘要：
bash npm view vuex # or npm info vuex 阅读全文
posted @ 2021-09-09 10:28
aisowe
阅读(262)
评论(0)
推荐(0)
摘要：
查看历史提交记录 git-bash git reflog 常配合git reset --hard用于回到未来的某个分支。 阅读全文
posted @ 2021-09-09 10:27
aisowe
阅读(222)
评论(0)
推荐(0)
摘要：
index.js const img = document.createElement('img') // const img = new Image() img.classList.add('avatar') 阅读全文
posted @ 2021-09-09 10:26
aisowe
阅读(322)
评论(0)
推荐(0)
摘要：
browser https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects https://github.com/Microsoft/TypeScript/tree/master/src/lib 阅读全文
posted @ 2021-09-09 10:26
aisowe
阅读(73)
评论(0)
推荐(0)
摘要：
index.ts const lilei: [string, number] = ["Lilei", 23]; lilei.push(NaN); // 3 lilei.push("NaN"); // NaN lilei.push(true); // string | number -> Error 阅读全文
posted @ 2021-09-09 10:25
aisowe
阅读(214)
评论(0)
推荐(0)
摘要：
webpack.config.js module.exports = { entry: { main: './src/index.js', }, } package.json { "scripts": { "watch": "webpack --watch" }, } 阅读全文
posted @ 2021-09-09 10:25
aisowe
阅读(39)
评论(0)
推荐(0)
摘要：
index.ts class Foo { constructor(public name: string, public readonly age: number) {} } const foo = new Foo("foo", 23); console.log(foo.name); console 阅读全文
posted @ 2021-09-09 10:24
aisowe
阅读(167)
评论(0)
推荐(0)
摘要：
index.js import React from 'react' import ReactDOM from 'react-dom' class ANumber extends React.Component { constructor() { super() this.state = { num 阅读全文
posted @ 2021-09-09 10:23
aisowe
阅读(254)
评论(0)
推荐(0)
摘要：
tsconfig.json { "compilerOptions": { "target": "ESNEXT", "lib": ["DOM", "ESNEXT"], "module": "commonjs", "sourceMap": true, "outDir": "./dist", "modul 阅读全文
posted @ 2021-09-09 10:23
aisowe
阅读(115)
评论(0)
推荐(0)
摘要：
index.js import React from 'react' import ReactDOM from 'react-dom' class Btn extends React.Component { render() { return <button onClick={() => alert 阅读全文
posted @ 2021-09-09 10:22
aisowe
阅读(504)
评论(0)
推荐(0)
摘要：
index.html <a href="javascript:void(0)" onclick="alert('右究')">点击</a> 阅读全文
posted @ 2021-09-09 10:22
aisowe
阅读(33)
评论(0)
推荐(0)
摘要：
index.ts import * as _ from 'lodash' const list = [ { name: 'a', gender: 1 }, { name: 'b', gender: 0 }, { name: 'c', gender: 1 }, { name: 'd', gender: 阅读全文
posted @ 2021-09-09 10:21
aisowe
阅读(65)
评论(0)
推荐(0)
摘要：
index.ts import * as _ from 'lodash' const list = [ { name: 'a', gender: 1 }, { name: 'b', gender: 0 }, { name: 'c', gender: 1 }, { name: 'd', gender: 阅读全文
posted @ 2021-09-09 10:20
aisowe
阅读(63)
评论(0)
推荐(0)
摘要：
npm npm i -S vuex main.js import Vue from 'vue' import Vuex from 'vuex' import App from './App.vue' Vue.use(Vuex) new Vue({ store: new Vuex.Store({ /* 阅读全文
posted @ 2021-09-09 10:19
aisowe
阅读(82)
评论(0)
推荐(0)
摘要：
bash npm i -D webpack@4 # npm i -D webpack@4.x.x 阅读全文
posted @ 2021-09-09 10:19
aisowe
阅读(310)
评论(0)
推荐(0)
摘要：
npm npm i -S lodash npm i -D @types/lodash 阅读全文
posted @ 2021-09-09 10:17
aisowe
阅读(361)
评论(0)
推荐(0)
摘要：
Counter.vue <template> <button @click="increment">{{ count }}</button> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; expo 阅读全文
posted @ 2021-09-09 10:15
aisowe
阅读(1361)
评论(0)
推荐(0)
摘要：
Counter.vue <template> <button @click="increment">{{ count }}</button> </template> <script lang="ts"> import { reactive, toRefs } from "vue"; export d 阅读全文
posted @ 2021-09-09 10:15
aisowe
阅读(132)
评论(0)
推荐(0)
摘要：
index.js function sleep(n = 0) { return new Promise((resolve) => { setTimeout(function () { resolve(); }, n); }); } async function clock() { while (tr 阅读全文
posted @ 2021-09-09 10:14
aisowe
阅读(97)
评论(0)
推荐(0)
摘要：
index.js const Koa = require("koa"); const app = new Koa(); app.use((ctx) => { switch (ctx.url) { case "/": ctx.body = "<h1>index.html</h1>"; break; d 阅读全文
posted @ 2021-09-09 10:14
aisowe
阅读(39)
评论(0)
推荐(0)
摘要：
index.js const Koa = require("koa"); const Router = require("koa-router"); const app = new Koa(); const router = new Router(); router.get("/", (ctx) = 阅读全文
posted @ 2021-09-09 10:13
aisowe
阅读(41)
评论(0)
推荐(0)
摘要：
index.js const Koa = require("koa"); const bodyParser = require("koa-bodyparser"); const app = new Koa(); app.use(bodyParser()); app.use(async (ctx) = 阅读全文
posted @ 2021-09-09 10:12
aisowe
阅读(88)
评论(0)
推荐(0)
摘要：
index.js const fs = require("fs"); const Koa = require("koa"); const app = new Koa(); app.use(async (ctx) => { const html = fs.readFileSync("./index.h 阅读全文
posted @ 2021-09-09 10:11
aisowe
阅读(754)
评论(0)
推荐(0)
摘要：
index.js const Koa = require("koa"); const app = new Koa(); function bodyParser(ctx) { return new Promise((resolve, reject) => { let postData = ""; tr 阅读全文
posted @ 2021-09-09 10:11
aisowe
阅读(172)
评论(0)
推荐(0)
摘要：
index.js const Koa = require("koa"); const app = new Koa(); app.use((ctx) => { ctx.body = "Hello, World!"; }); app.listen(3000); 阅读全文
posted @ 2021-09-09 10:11
aisowe
阅读(34)
评论(0)
推荐(0)
摘要：
首先，需要安装 Vue-CLI，版本大于 4.5.4，然后使用 vue create <project-name>初始化项目； 然后，项目初始化使用选项3：Manually select features，选择这几项，然后回车： Vue CLI v5.0.0-beta.0 ? Please pick 阅读全文
posted @ 2021-09-09 10:10
aisowe
阅读(352)
评论(0)
推荐(0)
摘要：
index.js const Koa = require("koa"); const app = new Koa(); app.use((ctx) => { const { request: { query: query1, querystring: queryString1 }, query, q 阅读全文
posted @ 2021-09-09 10:09
aisowe
阅读(450)
评论(0)
推荐(0)
摘要：
index.js const Koa = require("koa"); const app = new Koa(); /** * a simple log middleware * @param {object} ctx */ function logger() { return async fu 阅读全文
posted @ 2021-09-09 10:09
aisowe
阅读(101)
评论(0)
推荐(0)
摘要：
构造函数式实例化对象、数组和函数 typeof new Object() 'object' // true Array.isArray(new Array()) // true typeof new Function() 'function' // true 字面量写法实例化对象、数组和函数 typ 阅读全文
posted @ 2021-09-09 10:02
aisowe
阅读(47)
评论(0)
推荐(0)
摘要：
数组对象: Array 1. 前言 数组也好, 列表也好, 在不同的编程语言里面叫法虽然不一样, 但其本质是一样的, 作为最常用的对象, 其属性和方法是必须要牢记在心的, 以下是Array对象的完整属性方法示例. 2. 参数 情况1: 没参数 var arr = new Array(); // 实例 阅读全文
posted @ 2021-09-09 09:47
aisowe
阅读(80)
评论(0)
推荐(0)
摘要：
<canvas id="gc" width="400" height="400"></canvas> <script> window.onload=function() { canv = document.getElementById("gc"); ctx = canv.getContext("2d 阅读全文
posted @ 2021-09-09 09:45
aisowe
阅读(67)
评论(0)
推荐(0)
摘要：
正文 所谓表单组件就是跟用户有交互的、能取到值的、是 form 的表单项的组件。在 Vue、React 中，store 里面的数据是严格控制其变动方式的，store 中的 state 只能通过 commit 触发改变。而 Svelte 中的 store 的更新是“自带”的，通过 set、update 阅读全文
posted @ 2021-09-09 09:42
aisowe
阅读(109)
评论(0)
推荐(0)
摘要：
正文 我们拿一个计数器举例，count 变量存在 store 中，我们用 count.set() 重置，用 count.subscribe() 订阅，用 count.update() 更新，一切看起来都很 OK，但实际上，如果想要更好的可维护性，这个 count 应该继续定义它的行为逻辑，也就是预定 阅读全文
posted @ 2021-09-09 09:41
aisowe
阅读(100)
评论(0)
推荐(0)
摘要：
正文 Svelte 中的 store 不仅有 state，也可以有 getters，不过名字叫：derived，不太好读，但英文意思很直观：衍生的，也就是说，经他生成的数据是由其他 state 衍生的，这其实就是 getters 的定义，而 getters 也可以理解成 store 中的计算属性，也 阅读全文
posted @ 2021-09-09 09:41
aisowe
阅读(205)
评论(0)
推荐(0)
摘要：
正文 下面代码中手动订阅与取消订阅的代码其实非常冗余，Svelte 提供了自动订阅的功能，可以自动为我们做订阅和取消订阅的操作。 <script> import { writable } from 'svelte/store' import {onDestroy} from 'svelte' con 阅读全文
posted @ 2021-09-09 09:40
aisowe
阅读(91)
评论(0)
推荐(0)
摘要：
正文 存在某些 store-state，它们的变动来源只依赖一个地方，且跟项目业务逻辑无关，这时其他地方都不会去修改它。比如获取当前时间，这时就不需要在特定组件里面去做修改，而是直接在设定 time 的时候，就将变动规则传给他，然后它就自己在那儿触发就行了，不需要管它。 <script> impor 阅读全文
posted @ 2021-09-09 09:40
aisowe
阅读(73)
评论(0)
推荐(0)
摘要：
正文 以简单计数器为例，计数变量放在 store-state 中，它使用 svelte/store 中的 writable 方法，它会返回一个对象，通过调用对象上的 .set(val) 进行重置、调用 .update((val) => ...) 进行更新、调用 .subscribe(val => . 阅读全文
posted @ 2021-09-09 09:39
aisowe
阅读(510)
评论(0)
推荐(0)
摘要：
正文 用一个例子演示 Svelte 中所有生命周期函数的用法（实际上就是记几个单词）。 下面是父组件：App.svelte，子组件的挂载、卸载都靠它触发： <script> import Child from "./Child.svelte"; // state let status = false 阅读全文
posted @ 2021-09-09 09:38
aisowe
阅读(198)
评论(0)
推荐(0)
摘要：
正文 Svelte 作者是怎么想到的呀，居然把 onMount 和 beforeDestroy 合起来了：当 onMount 返回一个函数时，该函数会在组件销毁时调用，只能说NB.. 下面是子组件 Child.svelte，会发现在 onMount 函数内返回了一个 function： <scrip 阅读全文
posted @ 2021-09-09 09:38
aisowe
阅读(167)
评论(0)
推荐(0)
摘要：
正文 Vue 默认是将组件中一个名为 value 的 props 和 一个名为 'input' 的自定义事件作为 v-model 的配置项，从而实现自定义组件的双向绑定功能。而 Svelte 中的双向数据绑定则灵活得多，它被称为“组件绑定”，也就是对子组件暴露出来的 props 直接使用 bind: 阅读全文
posted @ 2021-09-09 09:37
aisowe
阅读(290)
评论(0)
推荐(0)
摘要：
正文 类似 clientWidth、clientHeight 这类属性，想要实时获取它们的值需要进行事件监听，但借助 Svelte 强大的数据绑定功能，可以做到对这一类属性的绑定与即时获取。 <script> let clientWidth, clientHeight; </script> <div 阅读全文
posted @ 2021-09-09 09:36
aisowe
阅读(99)
评论(0)
推荐(0)
摘要：
正文 也就是 Vue 和 React 中的 ref 值，但 Svelte 中的获取方法更加符合直觉：把 DOM 节点的 this 赋值给特定变量 <script> import { onMount } from "svelte"; let titleEl; console.log("组件尚未挂载，因 阅读全文
posted @ 2021-09-09 09:36
aisowe
阅读(315)
评论(0)
推荐(0)
摘要：
正文 下面是一个位于 each 块中的一组 input 输入框，可以通过 bind:value 实现数据的双向绑定。 <script> let list = ["eat morning."]; const add = () => { list = [...list, ""]; }; </script 阅读全文
posted @ 2021-09-09 09:35
aisowe
阅读(85)
评论(0)
推荐(0)
摘要：
正文 任何表单控件都可以绑定，只是绑定的属性有所不同而已（大部分是 value）。 <script> let value = 2; // let value = []; // 多选时为数组 const options = [ { name: "apple", value: 0 }, { name: 阅读全文
posted @ 2021-09-09 09:34
aisowe
阅读(151)
评论(0)
推荐(0)
摘要：
正文 需要两个属性配合使用才行，他们是：contenteditable 和 innerHTML，如下 <script> let htmlStr = ` <strong>Hello, World!</strong> `; </script> <!-- 纯文本 --> <div>{htmlStr}</d 阅读全文
posted @ 2021-09-09 09:34
aisowe
阅读(127)
评论(0)
推荐(0)
摘要：
正文 输入框组绑定指定是某些类型的 input 标签的值共同作用于一个变量，比如一个选择男女的单选框，它们的值的变化就应该作用于同一个变量，此时就可以用输入框组绑定功能：bind:group={gender}。 <script> let gender = 1; $: console.log(gend 阅读全文
posted @ 2021-09-09 09:33
aisowe
阅读(132)
评论(0)
推荐(0)
摘要：
正文 双向数据绑定是很实用的特性，Vue 中使用指令：v-model，在 Svelte 中使用：bind:value={value}，这里因为属性名和绑定的变量值名称相同，所以可以简写成：bind:value。 <script> let value = ""; </script> <div> <!- 阅读全文
posted @ 2021-09-09 09:32
aisowe
阅读(156)
评论(0)
推荐(0)
摘要：
正文 现在组件的层级是：<Father> 内嵌 <Child>，<Child> 内嵌 <GrandChild>，如果此时 Father 组件中定义的一个事件监听函数要在 <GrandChild> 组件中触发执行，则必定会经过中间组件：<Child>，下面是 <Child> 组件内的常规设置： <sc 阅读全文
posted @ 2021-09-09 09:31
aisowe
阅读(87)
评论(0)
推荐(0)
摘要：
正文 React 中没有事件修饰符，Vue 用的说 @click.once 语法，Svelte 用的是 on:click|once 语法。 <script> const clickHandler = (foo) => alert(foo + "trigger"); </script> <!-- on 阅读全文
posted @ 2021-09-09 09:30
aisowe
阅读(95)
评论(0)
推荐(0)
摘要：
正文 不同于 React 中以 props 传递，Svelte 中的自定义事件更加类似 Vue，不过需要使用 createEventDispatcher() 构建一个事件派发器，而这一步在 Vue 中是使用 this.$emit() 实现的。 下面是子组件Nested.svelte，自定义事件将会在 阅读全文
posted @ 2021-09-09 09:30
aisowe
阅读(180)
评论(0)
推荐(0)
摘要：
正文 因为异步请求的处理逻辑大多相似：请求时 pending、成功请求时展示数据、请求失败时展示异常，所以 Svelte 贴心地在模板中添加了这一模式，方便我们去做处理。 <script> import AppBackup from "./AppBackup.svelte"; let promise 阅读全文
posted @ 2021-09-09 09:29
aisowe
阅读(127)
评论(0)
推荐(0)
摘要：
key 值也存在于 Svelte 中，它在列表渲染区块中作为最后一个参数存在，使用括号包裹。 <script> let list = [ { name: "lilei", age: 21 }, { name: "hanmeimei", age: 24 }, { name: "lihua", age: 阅读全文
posted @ 2021-09-09 09:28
aisowe
阅读(118)
评论(0)
推荐(0)
摘要：
1 前言 模板写法不同于 JSX，JSX 可以用 JS 的条件控制语句，而模板需要单独设计条件控制语法，比如 Vue 中使用 v-if 2 正文 <script> let counter = 0; const increment = () => { counter++; }; </script> < 阅读全文
posted @ 2021-09-09 09:27
aisowe
阅读(140)
评论(0)
推荐(0)
摘要：
1 前言 Svelte 中条件渲染使用{#if ...} ... {/if} 声明，那列表渲染是不是类似：{#for ...} ... {/for}？ 2 正文 Svelte 中的列表渲染使用跟条件渲染类似的语法，不过关键字换成了 each，item 可以解构，这样看起来比较清晰。 <script> 阅读全文
posted @ 2021-09-09 09:27
aisowe
阅读(154)
评论(0)
推荐(0)
摘要：
1 前言 前端组件化开发，单向数据流，有了 state、props 和状态更新机制，也就能做简单的 web 应用啦~ 2 正文 props 在根组件上以 props 选项的形式声明，在嵌套组件树中，可以自由设置和传递。 先写一个子组件 Nested.svelte，该组件会在 App.svelte 中 阅读全文
posted @ 2021-09-09 09:25
aisowe
阅读(147)
评论(0)
推荐(0)
摘要：
1 前言 当一个组件具有过多 props 时，就渴望有一种统一设置的方法；当子组件上存在从父组件传过来的非 props 属性时，子组件又该怎样获取呢？ 2 正文 首先还是正常书写子组件：Nested.svelte，这里的$$props 可以获取父级传递的所有属性，包括 props 属性和非 prop 阅读全文
posted @ 2021-09-09 09:25
aisowe
阅读(260)
评论(0)
推荐(0)
摘要：
1 前言 Vue2 中无法监听7个数组方法引发的变化，它们分别是：pop、push、reverse、shfit、unshift、sort 和 splice。 2 正文 Svelte 中同样无法监听以上 7 个数组方法的变动，此外，类似delete obj.a 这种操作也是无法监听的，因为在 Svel 阅读全文
posted @ 2021-09-09 09:24
aisowe
阅读(294)
评论(0)
推荐(0)
摘要：
1 前言 Svelte 中反应性不仅可以作声明用，还可以用在一段语句中，这点类似 Vue 中的 watch，但比 watch 灵活。 2 正文 <script> import { loop_guard } from "svelte/internal"; let count = 3; const in 阅读全文
posted @ 2021-09-09 09:23
aisowe
阅读(166)
评论(0)
推荐(0)
摘要：
1 前言 不知道为什么翻译成“反应性”，而不是“响应式”，因为不是选项式 API，计算属性在 Svelte 中的写法会是怎样的呢？ 2 正文 Svelte 中的计算属性使用 $: 起手作变量声明，它会在等号右边依赖的值变化时自动计算。 <script> let count = 3; $: dbCou 阅读全文
posted @ 2021-09-09 09:22
aisowe
阅读(232)
评论(0)
推荐(0)
摘要：
1 前言 类似 Vue 中的 v-html 指令的功能在 Svelte 中怎样实现？ 2 正文 <script> const innerHTML = ` <h3>This is a title.</h3> <p>Paragraph</p> `; </script> <div> <strong>以下内 阅读全文
posted @ 2021-09-09 09:21
aisowe
阅读(173)
评论(0)
推荐(0)
摘要：
1 前言 跟用户交互需要监听、触发各种事件，这时就需要用到数据绑定，Vue 是 v-on，React 是 onXxxx，Svelte 是什么呢？ 2 正文 丫的，又是合并了 Vue 和 React 的设计，on:click={clickHandler}，哈哈哈哈.... <script> let c 阅读全文
posted @ 2021-09-09 09:21
aisowe
阅读(82)
评论(0)
推荐(0)
摘要：
前言 组件怎么能没有样式呢？ 莫得样式的组件谁会用呢？？ 正文 在 App.svelte 中写入以下代码就能看到样式了，又一个跟 Vue 很像的点：style 写在组件文件内，不过跟 Vue 不同的是，Svelte 组件中的 style 是默认局部的，Vue 中还需要显式设置 scoped 属性才行 阅读全文
posted @ 2021-09-09 09:20
aisowe
阅读(29)
评论(0)
推荐(0)
摘要：
1 前言 划分组件，引用组件，复用组件，基操。 2 正文 被引用的组件不用在内部 export default，引用组件时也不需要像 Vue 一样使用 components 选项注册，引进来，直接用就成，而且还自动样式隔离，爽歪歪。唯一一点注意一下：约定引入的组件使用大写字母开头，类似 React。 阅读全文
posted @ 2021-09-09 09:20
aisowe
阅读(162)
评论(0)
推荐(0)
摘要：
1 前言 <h1>Hello, {name}</h1>，这种写法没问题； <img src={src} alt="a image" />， 这种写法也没问题； 但类似“将变量绑定到同名属性上”这种操作是否有便捷写法呢？ 2 正文 属性速记 是一种类似 ES6 对象赋值便捷方法的一种属性绑定便捷方法， 阅读全文
posted @ 2021-09-09 09:19
aisowe
阅读(62)
评论(0)
推荐(0)
摘要：
1 前言 props 很快就会安排，但现在得先知道 Svelte 怎样设置状态（state），它会像 React 一样需要 setState 才能更新吗？还是说像 Vue 里面响应式自动监听变动？ 2 写一个带 state 的组件 明眼人都看得出来，响应式变量更方便，不用 setState，Svel 阅读全文
posted @ 2021-09-09 09:19
aisowe
阅读(68)
评论(0)
推荐(0)
摘要：
1 前言 前端组件开发，自然免不了创建各种功能的组件，Svelte 中怎样创建组件呢？它是模板写法还是类写法？会用到 JSX 吗？需要怎样引入和挂载呢？ 2 创建组件 .svelte 结尾的文件就是一个 Svelte 组件，类似 .vue 结尾的就是一个 Vue 组件一样，它是模板写法，一个文件里面 阅读全文
posted @ 2021-09-09 09:17
aisowe
阅读(278)
评论(0)
推荐(0)
浙公网安备 33010602011771号