https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5539176258...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/7963682796...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
https://xueqiu.com/5369307843...
文章目录
- 一、前言
- 二、Vue.js介绍
- 三、Semantic UI介绍
- 四、实现欲望清单界面
一、前言
2021年第一个周末，祝各位读者敌人安全顺利。
以前读过一句话：“当你穿过暴风雨的时候，你就不是原来那个人了。”
但他没有说，咱们要如何穿过暴风雨。
2020刚开始的时候，我曾感觉冬天无比漫长，仿佛没有止境。到了六月的时候，才察觉工夫过得比设想更快。而当初，2020年曾经过来了，想来总感觉有些恍惚，那些工夫那些岁月到底是怎么流逝的呢？那么，咱们到底是如何穿过暴风雨的呢？
只有在这么一个时刻，能力明确，让咱们穿梭暴风雨的，不过是每一天的平庸生存。
当咱们的生存日夜旋转不休，眼前的现象朦胧一片时，咱们惟一能做的只是致力看清了脚底下的路，并且决定一步步缓缓前行。
我想是这样的，从没有欲速不达的事，只有每一天致力前行。
直到某天乌云散去，回过头看，能力晓得本人走了多远。
因为人生没有白走的路，每一步都算数。
周末用 Vue.js 和 Semantic-UI 做了一个简略的欲望清单，记录当前想和喜爱的人一起做的事，疲乏的生存里总要有些温顺的幻想吧。
二、Vue.js介绍
官网文档传送门：https://cn.vuejs.org/v2/guide/installation.html
Vue (读音 /vju/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为能够自底向上逐层利用。Vue 的外围库只关注视图层，不仅易于上手，还便于与第三方库或既有我的项目整合。另一方面，当与现代化的工具链以及各种反对类库联合应用时，Vue 也齐全可能为简单的单页利用提供驱动。
仿照官网案例的我的项目，次要为了相熟 Vue.js 的根本用法，通过这个案例能排汇到根本的 Vue.js 操作
重构此我的项目能够学到以下知识点：
- 根本的数据绑定语法
- 计算属性
- Class 绑定
- 条件渲染
- 列表渲染
- 办法与事件绑定
- 表单空间绑定
- 自定义指令
额定还能学习到 LocalStorage 的简略用法，能够说通过具体学习此例子能够实现 Vue.js 最根本的入门操作， 齐全相熟不太容易， 次要是感触下 Vue.js 的弱小和根本的应用，那么好的框架当然是越学越香，更多具体应用能够参考官网文档。
三、Semantic UI介绍
官网文档传送门：https://zijieke.com/semantic-ui/introduction/getting-started.php
在 HTML 中蕴含 (Include in Your HTML)：
运行 gulp 构建工具将会在你的我的项目中编译出 CSS 和 Javascript 文件。把编译出的文件和最新的 jQuery 一起蕴含到 HTML 中就能够应用 Semantic UI了，更多具体应用能够参考官网文档。
`<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"><script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script><script src="semantic/dist/semantic.min.js"></script>` * 1* 2* 3* 4* 5* 6四、实现欲望清单界面
index.html
`<html data-framework="vue"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>TODOS - A wish list</title> <link href="static/semantic.min.css" rel="stylesheet"> <link href="static/style.css" rel="stylesheet"> </head> <body> <div id="todos" class="ui text container" style="background: #F3F3F4;padding: 0 14px; min-height: 100%;"> <h1 class="ui centered grey header" style="font-size: 5em;"> <span class="pink text">A Wish List</span> </h1> <div class="ui stacked segment" style="padding: 14px;"> <div class="ui fluid right action input"> <input type="text" placeholder="想和喜爱的人一起做点什么？" v-model="newTitle" autofocus autocomplete="off" @keyup.enter="addTask"> <button class="ui teal icon button" @click="addTask"> <i class="plus icon"></i> </button> </div> <div class="ui huge middle aligned divided selection list"> <div class="item" v-for="task in filterTasks" :class="{ editing: task == editedTask }"> <div class="right floated content"> <i class="red remove icon" @click='removeTask(task);'></i> </div> <div class="content" @dblclick="editTask(task)"> <div class="ui checkbox" > <input type="checkbox" name="example" v-model="task.completed"> <label class="header"><span class="grey text">{{ task.title }}</span></label> </div> <div class="ui mini transparent input"> <input class="edit" type="text" v-model="task.title" v-task-focus="task == editedTask" @blur="saveEdit(task)" @keyup.enter="saveEdit(task)" @keyup.esc="cancelEdit(task)" > </div> </div> </div> </div> <div class="ui green divider" v-show="tasks.length"></div> <div class="ui grid" v-show="tasks.length"> <div class="three wide column"> <span class="grey text"> <span class="green text" v-text="remaining"> </span><span class="grey text"> Left </span> </span> </div> <div class="eight wide column" style="padding: 0px;"> <div class="ui mini secondary menu" style="margin-top: 8px;"> <a @click="filterTask('all')" class="item" :class="{ active: visibility == 'all' }"><span class="pink text"> All </span></a> <a @click="filterTask('active')" class="item" :class="{ active: visibility == 'active' }"><span class="pink text"> Wait </span></a> <a @click="filterTask('completed')" class="item" :class="{ active: visibility == 'completed' }"><span class="pink text"> Completed </span></a> </div> </div> <div class="five wide column"> <a class="clear" href="#" @click="removeCompleted($event)"><span class="red text">Clear</span></a> </div> </div> </div> <div class="intro"> <span class="black text">A wish list of things you want to do with the people you love</span> <br> <br> <span class="black text">Based on <a href="https://cn.vuejs.org/v2/guide/" target='_blank'><span class="red text">Vue.js</span></a> + <a href="https://zijieke.com/semantic-ui/" target='_blank'><span class="red text">Semantic-UI</span></a></span> <br> <br> <span class="black text">叶庭云@CSDN：<a href="https://yetingyun.blog.csdn.net/" target='_blank'><span class="green text">https://yetingyun.blog.csdn.net/</span></a></span> </div> </div> <span class="text"> </span> <br> <br> </body> <script src="static/js/vue.js"></script> <script src="static/app.js"></script></html>` * 1* 2* 3* 4* 5* 6* 7* 8* 9* 10* 11* 12* 13* 14* 15* 16* 17* 18* 19* 20* 21* 22* 23* 24* 25* 26* 27* 28* 29* 30* 31* 32* 33* 34* 35* 36* 37* 38* 39* 40* 41* 42* 43* 44* 45* 46* 47* 48* 49* 50* 51* 52* 53* 54* 55* 56* 57* 58* 59* 60* 61* 62* 63* 64* 65* 66* 67* 68* 69* 70* 71* 72* 73* 74* 75* 76* 77* 78* 79* 80* 81援用资源
运行成果如下：
应用 Vue.js 和 Semantic-UI 做了一个简略的欲望清单，实现了页面和用户的交互，在输入框中写入想和喜爱的人一起做的事，而后按 Enter 键或者点击左边的 “+”，即可将数据增加进去，下方 3 Left 示意还有 3 个欲望未实现，点击 All 查看所有的欲望清单，点击 Wait 查看未实现的欲望，点击 Completed 查看已实现的欲望，谬误增加进去的内容能够先选定，而后应用 Clear 革除掉再从新增加，或者鼠标悬停在那一条内容上，呈现❌而后点击删除再从新增加，界面简洁好看，使用方便。
也能够应用 selenium 来关上本地 html 文件自动化增加
`# -*- coding: UTF-8 -*-"""@File ：demo.py@Author ：叶庭云@CSDN ：https://yetingyun.blog.csdn.net/"""from selenium import webdriverimport timefrom selenium.webdriver.common.keys import Keysimport seleniumprint(selenium.__version__) # 查看selenium版本# 读取txt中数据 获取每一行with open('things.txt', encoding='utf-8') as f: words = f.read().split('n')# 初始化 webdriver.Chrome()chrome_driver = r'D:pythonpycharm2020chromedriver.exe' # chromedriver的门路options = webdriver.ChromeOptions()# 敞开左上方 Chrome 正受到自动测试软件的管制的提醒options.add_experimental_option('useAutomationExtension', False)options.add_experimental_option("excludeSwitches", ['enable-automation'])# 开启浏览器对象browser = webdriver.Chrome(options=options, executable_path=chrome_driver)# 得用绝对路径 相对路径会报错browser.get(r'D:pythonpycharm2020program叶庭云 集体自娱欲望清单 想和喜爱的人一起做的事index.html')# Xpath定位到输入框browser.find_element_by_xpath('//*[@id="todos"]/div[1]/div[1]/input').click()for word in words: # 写进每一条数据 而后按Enter键 browser.find_element_by_xpath('//*[@id="todos"]/div[1]/div[1]/input').send_keys(word) browser.find_element_by_xpath('//*[@id="todos"]/div[1]/div[1]/input').send_keys(Keys.ENTER) time.sleep(1) # 短暂休眠` * 1* 2* 3* 4* 5* 6* 7* 8* 9* 10* 11* 12* 13* 14* 15* 16* 17* 18* 19* 20* 21* 22* 23* 24* 25* 26* 27* 28* 29* 30* 31* 32* 33* 34留神：selenium 关上本地 html 文件，门路需用绝对路径，用相对路径会报错
运行成果如下：