2021年9月9日

摘要: ./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)
摘要: 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)
摘要: npm i -S koa 阅读全文
posted @ 2021-09-09 10:08 aisowe 阅读(22) 评论(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)

导航