“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天，点击查看活动详情”
0 环境
- 编辑器：pycharm或者vscode
- 系统版本：windows10
- 编辑器版本：最新
- 浏览器：谷歌
- node版本：NodeJS 12.22.0+
- Python版本：3.7+
- node官网：nodejs.org/en/
1 文档
2 Assets
先看assets文档我现在想加个背景图，那么背景在哪里存在，是随意的，还是和前端那种有一个规定的地方存在呢，pynecone和前端类似，图片放在assets/的目录下，比如现在我在assets下存了一个登陆相关的背景图片，assets/login.png，直接我现在想加个背景图，那么背景在哪里存在，是随意的，还是和前端那种有一个规定的地方存在呢，pynecone和前端类似，图片放在assets/的目录下，比如现在我在assets下存了一个登陆相关的背景图片，assets/login.png，直接pc.image(src="/login.png", width="5em")引用，通过该组件，我直接图片名就可以就可以拿到图片了，还是可以设置一些样式，对比以前图片的引入，告诉组件图片的路径在哪里，现在库帮我搞定了，还是爽的。并且assets也是能放图标的，如果你想改变图标的话。
3 State
看state的介绍，上面的文档有，state有点类似前端的mvvm那种模式，先不管它了。我们看它的介绍，结合自己使用的应用程序，输入框，点击按钮状态的修改，和state有千丝万缕的关系。继续往下看，State Basics里，计算vars(比如计算的值，和上次没改变，就不用更新state了)，以及事件的动作下的state响应式(实时修改)。也就说围绕vars(先叫它变量吧)展开，那么在看下面的案例，看变量在哪里定义的，以及在什么场景中使用的，我们点击 welcome to pynecone!，每次点击颜色都会发生变化。当我们每次鼠标放在点击框中的时候(鼠标的图标变了，看_hover)，然后点击的时候，触发了on_click，然后调用了next_color，索引每次加1取余colors的长度(这里有两个变量，colors列表，存在颜色，index索引，颜色的下标，两种一组合，得到相对应的颜色，而且取余是为了index不超出colors的索引界限)，索引改变了，那么下面颜色要发生改变，看heading里的color，它取到列表里的值。总结起来，我们用了base vars + event handlers就完成了实时点击更好按钮颜色的操作。
4 小结
state和前端的state类似，具备响应式和计算变量，很方便实现一个交互功能。
