体验svelte(1)

  • A+
所属分类:体育平台

体验svelte(1)

TOC:

- 双向绑定

- Element

- Component

- prop

- let

- const function class

- Assignment



双向绑定


  • Element
<script>
    let value = 100;
</script>
<input type="text" bind:value />
<p>{value}</p>
  • Component
<script>
	import CustomInput from "./input.svelte";
	let value = 'xyz';
</script>
<CustomInput bind:value />
<h1>value: {value}</h1>

prop


  • let
<script>
    
    // export let prop = "prop";
    // export let prop = undefined;

    /**
     * unUse:
     * Warning: <Component> was created without expected prop 'prop'
     */
    export let prop;
</script>

<p>{prop}</p>

prop成为Child组件options对象成员

    class Child extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$1, create_fragment$1, safe_not_equal, { prop: 0 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Child",
    			options,
    			id: create_fragment$1.name
    		});

    		const { ctx } = this.$;
    		const props = options.props || {};

    		if (/*prop*/ ctx[0] === undefined && !('prop' in props)) {
    			console.warn("<Child> was created without expected prop 'prop'");
    		}
    	}

    	get prop() {
    		throw new Error(`<Child>: Props cannot be read directly from the
                        component instance unless compiling 
                        with 'accessors: true' or '<svelte:options accessors/>'`);
    	}

    	set prop(value) {
    		throw new Error(`<Child>: Props cannot be set directly on the
        component instance unless compiling 
        with 'accessors: true' or '<svelte:options accessors/>'`);
    	}
    }
  • const function class
<script>
    export const prop = 1;
    export const hello = () => "hello";
    export class Person {}
</script>

prop成为Child组件属性

class Child extends SvelteComponentDev {
        constructor(options) {
            super(options);
            init(this, options, instance$1, create_fragment$1, safe_not_equal, 
                 { prop: 0, hello: 1, Person: 2 });

            dispatch_dev("SvelteRegisterComponent", {
                component: this,
                tagName: "Child",
                options,
                id: create_fragment$1.name
            });
        }

        get prop() {
            return this.$.ctx[0];
        }

        set prop(value) {
            throw new Error(`
            <Child>: Props cannot be set directly on the
             component instance unless compiling with
             'accessors: true' or '<svelte:options accessors/>'`);
        }

        get hello() {
            return this.$.ctx[1];
        }

        set hello(value) {
            throw new Error(`<Child>: Props cannot be set directly on the 
            component instance unless compiling with
            'accessors: true' or '<svelte:options accessors/>'`);
        }

        get Person() {
            return this.$.ctx[2];
        }

        set Person(value) {
            throw new Error(`
            <Child>: Props cannot be set directly on the
            component instance unless compiling with
             'accessors: true' or '<svelte:options accessors/>'`);
        }
    }

Assignment


<script>
    let obj = { x: 1, y: 2, z: { a: 1, b: 2 } };
    let arr = [1, 2, 3, 4];

    $: total = ((_arr) => {
        return _arr.reduce((acc, item) => (acc += item), 0);
    })(arr);
    function setValue() {
        obj.x += 1;
        obj.z.a += 1;
        obj.z.c = 100;
        delete obj.z.b;
    }
    function push() {
        // Warning: 不会自动触发更新
        arr.push(arr.at(-1) + 1);
    }
    function add() {
        arr = [...arr, arr.at(-1) + 1];
    }
    function remove(index) {
        arr = [...arr.slice(0, index), ...arr.slice(index + 1)];
    }
    $: {
        console.log(JSON.stringify(obj, null, "t"));
        console.log("arr - 1 :" + arr);
    }
    $: {
        console.log("arr - 2 :" + arr);
    }
</script>

<button on:click={setValue}> Clicked </button>
<button on:click={add}> Add Array </button>
<button on:click={push}> Push Array </button>
<button on:click={() => remove(1)}> Remove Array </button>
<h1>{total}</h1>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: