svelte教程(1)简介
什么是svelte?
Svelte是用于构建快速Web应用程序的工具。
它类似于React和Vue这样的JavaScript框架。但是有一个关键的区别:Svelte在构建时将您的svelte代码转换为理想的JavaScript 代码,而不是在运行时解释您的代码。想要详细了解请查看svelte简介。
注:本教程中使用了Sapper框架进行svelte程序的开发。学习语法环节不需要掌握sapper框架的使用,想要了解的话请查看sapper文档。
本教程的所有代码均上传到github有需要的同学可以参考 https://github.com/sullay/svelte-learn。
组件 components
在Svelte中,一个应用程序由一个或多个组件组成。组件是可重用的独立代码块,它封装在一起的HTML,CSS和JavaScript,并写入.svelte文件中。
添加数据
在组件中声明一个变量name并在html中进行引用。“{}”内可以使用任何JavaScript代码。
<script> let name = 'world'; </script> <h1>Hello {name}!</h1> <h1>Hello {name.toUpperCase()}!</h1>
如果变量名于属性名相同的情况下,可以简写例如src={src}。
<script> let name = 'world'; let src ="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570390818923&di=1b477739d17e14e5d8ee39b19cb40748&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012e3b5954ee3da8012193a387c830.png%401280w_1l_2o_100sh.png" </script> <img {src} alt="Hello {name}!">
样式style
组件中可以使用
h1{ text-align: center; } h1.svelte-17zljpa{ text-align: center; }
同时也给所有的标签添加一个相同的class属性。
<style> h1{ text-align: center; } img{ width: 100%; } </style> <script> let name = 'world'; let src ="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570390818923&di=1b477739d17e14e5d8ee39b19cb40748&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012e3b5954ee3da8012193a387c830.png%401280w_1l_2o_100sh.png" </script> <h1>Hello {name}!</h1> <h1>Hello {name.toUpperCase()}!</h1> <img {src} alt="Hello {name}!">
如果希望css规则能够全局生效可以使用:global关键字。
实现方式是global修饰的选择器不会添加class选择器。
<style> /* 所有h1标签 */ :global(h1){ color: red; } /* main标签内的所有h1标签 */ main :global(h1){ color: red; } </style>
引入子组件
注意:自定义组件变量名首字母需为大写字母。并且父组件中的样式不会对子组件生效,反之也一样。
// sullay.svelte <h1>I am sullay!</h1> // index.svelte <script> import Sullay from '../components/sullay.svelte' </script> <Sullay/>
原样显示
在Svelte中,您可以使用特殊{@html ...}标签进行原样显示。
<style> .html h1{ color: chartreuse; } </style> <script> let html="<h1>I am sullay!</h1>" </script> <div class="html">{@html html}</div>
测试发现上面代码中的color: chartreuse;并没有生效。
原因是因为{@html ...}中的标签并没有添加对应此组件的class属性。
修改一下上面的代码,如下:
<style> .html :global(h1){ color: chartreuse; } </style> <script> let html="<h1>I am sullay!</h1>" </script> <div class="html">{@html html}</div>
阅读本文后相信你对svelte的使用已经有一个简单的认识,后续还会更多svelte教程的内容。部分内容来自于官方教程,有兴趣的可以结合起来一起看。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
前端学习笔记(9)css grid网格布局
Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。 容器属性 1. display属性 指定一个容器采用网格布局 div { display: grid; } div { display: inline-grid; //设置为行内元素 } 注意,设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。 2. grid-template-columns 属性,grid-template-rows 属性 grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。 .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .container { display: grid; gr...
- 下一篇
svelte教程(2)反应性
Svelte的核心是功能强大的反应系统,用于使DOM与您的应用程序状态保持同步-例如,响应事件。 <script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> 声明 当组件的状态更改时,Svelte会自动更新DOM。通常,组件状态的某些部分需要从其他部分计算并在它们发生任何变化时重新计算。使用$:声明后只要任何引用的值发生更改,都要重新运行此代码。我们可以将他用作计算属性。 <script> let count = 0; $: doubled = count * 2; function handleClick() { count+=1; } </script> <button on:click={handleClick}> Clicked {...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Hadoop3单机部署,实现最简伪集群
- CentOS8编译安装MySQL8.0.19
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Mario游戏-低调大师作品
- CentOS6,CentOS7官方镜像安装Oracle11G