zoukankan      html  css  js  c++  java
  • 怎样创建一个最简单的 svelte 组件

    1 前言

    前端组件开发,自然免不了创建各种功能的组件,Svelte 中怎样创建组件呢?它是模板写法还是类写法?会用到 JSX 吗?需要怎样引入和挂载呢?

    2 创建组件

    .svelte 结尾的文件就是一个 Svelte 组件,类似 .vue 结尾的就是一个 Vue 组件一样,它是模板写法,一个文件里面包含了 script、style 和 html。下面仅演示一个简单的 Hello, Wolrd! 组件的写法。

    首先,在 App.svelte 文件中写一个正常的 html 标签,这种最简形式的组件跟写 .html 没有区别。

    <h1>Hello, Wolrd!</h1>
    

    然后,在 main.js 中引入组件并挂载,挂载需要进行:实例化、指定挂载节点、导出三步。

    main.js

    import App from './App.svelte'
    
    const app = new App({
    	target: document.body,
    });
    
    export default app;
    

    保存后将会得到这个页面:

    image

    3 总结

    Svelte 组件以 .svelte 结尾,采用 script、style 和 html 合写的方式组织,挂载组件需要实例化根组件,并指定挂载的目标(target)节点(一般为 document.body),然后将这个组件导出至外部。

    4 参考

  • 相关阅读:
    top 命令
    通过公网访问内网的几种方式总结
    借助IDE到处Runnable JAR 的步骤
    Java SE 基础知识(String,Array)
    Java SE 基础知识(二)
    周记 2014.12.13
    nginx 总结
    在VPS上配置SS
    Markdown 语法手册
    ASCII码表
  • 原文地址:https://www.cnblogs.com/aisowe/p/15245460.html
Copyright © 2011-2022 走看看