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 {count} {count === 1 ? 'time' : 'times'} </button> <p>{count} doubled is {doubled}</p>
除此之外,我们可以反应性的运行任意语句。
<script> let count = 0; $: doubled = count * 2; $: console.log(`the count is ${count}`) $: { console.log(`I SAID THE COUNT IS ${count}`); } $: if(count>=5){ console.log(`count is dangerously high!`); } function handleClick() { count+=1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> <p>{count} doubled is {doubled}</p>
注意:svelte的反应性是由赋值触发的,所以使用push、pop、splice、shift、unshift等数组操作不会导致更新。
<script> function add() { arr.push(arr[arr.length - 1] + 1); } </script> <button on:click={add}>add</button> <p>The last one is {arr[arr.length - 1]}</p>
测试后发现并没有触发更新。
修改一下上面的add方法,如下:
<script> function add() { arr.push(arr[arr.length - 1] + 1); arr = arr; } // function add(){ // arr=[...arr,arr[arr.length-1]+1]; // } // function add(){ // arr[arr.length]=arr[arr.length-1]+1; // } </script> <button on:click={add}>add</button> <p>The last one is {arr[arr.length - 1]}</p>
本教程的所有代码均上传到github有需要的同学可以参考 https://github.com/sullay/svelte-learn。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
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&g...
- 下一篇
Spring Boot 2.x基础教程:JSR-303实现请求参数校验
请求参数的校验是很多新手开发非常容易犯错,或存在较多改进点的常见场景。比较常见的问题主要表现在以下几个方面: 仅依靠前端框架解决参数校验,缺失服务端的校验。这种情况常见于需要同时开发前后端的时候,虽然程序的正常使用不会有问题,但是开发者忽略了非正常操作。比如绕过前端程序,直接模拟客户端请求,这时候就会突然在前端预设的各种限制,直击各种数据访问接口,使得我们的系统存在安全隐患。 大量地使用if/else语句嵌套实现,校验逻辑晦涩难通,不利于长期维护。 所以,针对上面的问题,建议服务端开发在实现接口的时候,对于请求参数必须要有服务端校验以保障数据安全与稳定的系统运行。同时,对于参数的校验实现需要足够优雅,要满足逻辑易读、易维护的基本特点。 接下来,我们就在本篇教程中详细说说,如何优雅地实现Spring Boot服务端的请求参数校验。 JSR-3
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Mario游戏-低调大师作品
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Red5直播服务器,属于Java语言的直播服务器
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS6,CentOS7官方镜像安装Oracle11G
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装