练习题 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的 我感觉没啥压力,越看越快....第 ...
随机推荐
- JSON转成List结构数据
先要引入对应的jar,然后调用net.sf.json库的 ObjectMapper mapper = new ObjectMapper(); JavaType javaType = mapper.ge ...
- Oracle索引知识学习笔记
目录 一.Oracle索引简介 1.1 索引分类 1.2 索引数据结构 1.3 索引特性 1.4 索引使用注意要点 1.5.索引的缺点 1.6.索引失效 二.索引分类介绍 2.1.位图索引 1.2.函 ...
- 我是如何理解并使用maven的
前言 一直想写一篇关于Maven的文章,但是不知如何下笔,如果说能使用,会使用Maven的话,一.两个小时足矣,不需要搞懂各种概念.那么给大家来分享下我是如何理解并使用maven的. 什么是Maven ...
- [STL] UVA 10815 安迪的第一个字典 Andy's First Dictionary
1.set 集合 哦....对了,set有自动按照字典序排序功能..... 声明和插入操作 #include <cstdio> #include <vector> #inclu ...
- RESTful Webservice 和 SOAP Webserivce 对比及区别【转】
接口抽象 RESTful Web 服务使用标准的 HTTP 方法 (GET/PUT/POST/DELETE) 来抽象所有 Web 系统的服务能力,而不同的是,SOAP 应用都通过定义自己个性化的接口方 ...
- 三维网格细分算法（Catmull-Clark subdivision & Loop subdivision）附源码(转载)
转载: https://www.cnblogs.com/shushen/p/5251070.html 下图描述了细分的基本思想,每次细分都是在每条边上插入一个新的顶点,可以看到随着细分次数的增加,折 ...
- SQLServer 高效 分页存储过程
/********************************************************************** 参数:@PrimaryKey 主键,@OrderBy 排 ...
- 基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
- LNMP环境下搭建SVN服务
最近自己买了个服务器,试着在上面搭建了LNMP环境,因为以前在本地用MAMP Pro搭建过LAMP环境,所以基本上还算是轻车熟路,第一次搭建LNMP,使用的是一键安装,过程是顺利的,后来在使用过程中遇 ...
- shell 多行重定向方法（多重嵌套）
这里讲的是多重嵌套.没用过 EOF的朋友请参考其他基础贴 在自动化运维中,常常需要shell脚本.在自动化创建脚本时,会遇到脚本内容里有用EOF重定向到配置文件的代码. 这样就不能用EOF来创建脚本了 ...