练习题 vue_01：
练习题: vue_01
点击事件控制标签颜色：
1、有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色
# test_1.html
<body>
<div id="app">
<form action="" style="margin: 20px;">
<p @click="tag" :style="{width: w,height: h, backgroundColor: bgc }"></p>
<input type="button" value="红" @click="tag($event,'red')">
<input type="button" value="黄" @click="tag($event,'yellow')">
<input type="button" value="蓝" @click="tag($event,'blue')">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
h: '200px',
w: '200px',
bgc: 'red'
},
methods:{
tag (a,b) {
this.bgc = b
}
}
})
</script>
点击次数控制标签的样式：
--》实现点击次数，变换页面标签的颜色
2、有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推
#test_2.html
<body>
<div id="app">
<form action="#" style="margin: 20px;">
<p @click="tag" :style="{width: w,height: h, backgroundColor: bgc}"></p>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let num = 0;
new Vue({
el:'#app',
data:{
h: '200px',
w: '200px',
bgc: 'yellow'
},
methods:{
tag () {
num += 1;
if (num==1){
this.bgc = 'pink'
}else {if (num==2){
this.bgc = 'green'
}else {
this.bgc = 'cyan';
num = 0
}}
}
}
})
</script>
周期性实现标签的旋转变色：
3: 周期性实现颜色的旋转变色
1、如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推
2、可以将图编程自动旋转
# test_03.html
<body>
<div id="app">
<form action="" style="margin: 20px;">
<p @click="tag" :style="{width: w,height: h, background: bgc, borderRadius:rad}"></p>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let num = 0;
let app = new Vue({
el:'#app',
data:{
h: '200px',
w: '200px',
bgc: 'linear-gradient(to top, red 50%, green 50%)', //实现页面的过度（颜色）
rad: '50%'
},
methods:{
tag () {
num += 1;
if (num==1){
this.bgc = 'linear-gradient(to top, red 50%, green 50%)' // 控制方向
}else {if (num==2){
this.bgc = 'linear-gradient(to left, red 50%, green 50%)'
}else {if (num==3) {
this.bgc = 'linear-gradient(to bottom,red 50%, green 50%)'
}else {
this.bgc = 'linear-gradient(to right, red 50%, green 50%)';
num = 0
}
}}
}
}
});
function funcTest(){
window.setInterval(app.tag,500); // 按照指定的周期（以毫秒计）来调用函数
}
window.onload = funcTest; // 页面加载完直接调用 该方法
</script>
每日一题：
http协议，https与http的区别：
前端页面布局的方式
框架内orm的功能：
1.什么是http协议，https与http的区别
http: 前后端交互的归范（协议） （应用层）
tcp : 传输层 (传输文件)
特点：无状态 ， 无连接 ， 基于tcp , [基于请求，在响应（）]，
https: 在http协议之上 + SSL 安全认证
2.写出三种前端页面布局的方式（代码或描述都行）
1.流式布局 ： 页面控制布局 -（）
2.响应布局（思想）
3.盒模型布局 （）
4.浮动布局 ()
5.定位布局 (定位 )
--详情页->https://www.cnblogs.com/soyxiaobi/p/9594557.html
3.简述一下你知道的orm
一种对应关系映射，将表，表字段，表数据，通过生成对象，点方法的方式获取，修改，更新，删除 数据
每日感悟：
失败是偶然 ， 成功是必然 ！！！！
练习题 vue_01：的更多相关文章
- Linux基础练习题(二)
Linux基础练习题(二) 1.复制/etc/skel目录为/home/tuer1,要求/home/tuser1及其内部文件的属组和其它用户均没有任何访问权限. [root@www ~]# cp -r ...
- shell 脚本之 shell 练习题汇总
整理了一些 shell 相关的练习题,记录到这里. 1. 请按照这样的日期格式 xxxx-xx-xx 每日生成一个文件,例如:今天生成的文件为 2013-09-23.log, 并且把磁盘的使用情况写到 ...
- MySQL练习题
MySQL练习题 一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 3.查询平均成绩大于60分的同学的学号和平均成 ...
- MySQL练习题参考答案
MySQL练习题参考答案 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 思路: 获取所有有生物课程的人(学号,成绩) - 临时表 获取所有有物理课程的人(学号,成绩) - 临时表 根据[ ...
- mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风
(-1)写在前面 文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-- ...
- 【UOJ#228】基础数据结构练习题 线段树
#228. 基础数据结构练习题 题目链接:http://uoj.ac/problem/228 Solution 这题由于有区间+操作,所以和花神还是不一样的. 花神那道题,我们可以考虑每个数最多开根几 ...
- 【Java EE 学习 28 下】【Oracle面试题2道】【Oracle练习题3道】
一.已知程序和数据 create table test1 (id int primary key, name ), money int); ,); ,); ,); ,); 要求根据下图写出相应的sql ...
- 从一道NOI练习题说递推和递归
一.递推: 所谓递推,简单理解就是推导数列的通项公式.先举一个简单的例子(另一个NOI练习题,但不是这次要解的问题): 楼梯有n(100 > n > 0)阶台阶,上楼时可以一步上1阶,也可 ...
- 《java编程思想》读书笔记 暂停一段时间，改为上面的练习题
发现个很尴尬的现象.我一天实在看得太快了...全写下 写博客都得一晚上.. 之前因为是第一次看这么厚的书,别人都说很难,以为会看很慢的.然而,已经完全学过Java的 我感觉没啥压力,越看越快....第 ...
随机推荐
- Java连载8-基本数据类型2
一.基本数据类型 1.字符串“abc”不属于基本数据类型,属于引用数据类型 2. 基本数据类型 占用空间大小(单位:字节) byte 1 short ...
- 有关tab页的
有关tab页的 1.静态的 2.动态的可以删除的 3.删除右侧,左侧,全部,除了自己以外的. 4.多了可以自动伸缩. 5.带shown事件.可以反向影响菜单去.
- 用 PHP 函数变量数组改变代码结构
项目越做越大,代码越来越乱,维护困难.原因很多吧.起初为了实现功能,并没有注重代码的结构,外包公司嘛.虽然公司的项目负责人一直考虑复用.封装,但是我觉得基本上没有达到想要的效果.因为整个代码中没有用到 ...
- Salesforce学习之路（八）一次拉取多个文件或全部文件至本地
在开发中,经常会遇到本地工程错乱或者误操作导致本地本地项目被删除,此时利用SFDX: Retrieve Source from Org只会拉取新建并且名称相同的组件,若通过创建一个个文件,然后再拉取的 ...
- 如何创建一个简单 APT 仓库
0. 无废话版本 需求: 有一堆 .deb 包,想把它们做成一个 APT 仓库,这样就可以用apk install pkgname进行安装了,这样一方面自己可以规避 dpkg -i xxx.deb 时 ...
- RSyslog Windows Agent 安装配置
下载地址:https://www.rsyslog.com/windows-agent/windows-agent-download/ 安装过程: 1.双击rsyslogwa安装包,开始进行安装 2.一 ...
- elasticSearch查询（一）
**整理成sql格式来看懂elastic** 1.多个字段多个and查询 sql格式:select * from product where title = 'xxxx' and pid = 12 l ...
- 修复dtcms5.0后台管理编辑器上传视频和图片被过滤问题
1.原程序代码调用上传接口文件路径更改为父节点相对路径: 2.修复ueditor.config.js配置: img: ['src', 'alt', 'title', 'width', 'height' ...
- Python requests库的使用（二）
1.请求异常处理 请求异常类型: 请求超时处理(timeout): 实现代码: import requestsfrom requests import exceptions #引入exc ...
- shell脚本实现自动化安装linux版本的loadrunner agent(centos6.8)
#!/bin/bash #Centos6下安装LoadRunner负载机 #@author Agoly #@date #@source 高级测试技术交流圈: yum -y install expect ...