共计 9377 个字符,预计需要花费 24 分钟才能阅读完成。
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 webdriver
import time
from selenium.webdriver.common.keys import Keys
import selenium
print(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 文件,门路需用绝对路径,用相对路径会报错
运行成果如下: