练习题 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的 我感觉没啥压力,越看越快....第 ...
随机推荐
- 自已开发IM有那么难吗？手把手教你自撸一个Andriod版简易IM (有源码)
本文由作者FreddyChen原创分享,为了更好的体现文章价值,引用时有少许改动,感谢原作者. 1.写在前面 一直想写一篇关于im即时通讯分享的文章,无奈工作太忙,很难抽出时间.今天终于从公司离职了, ...
- 六、显式锁和AQS
显式锁和AQS 一.显式锁 Synchronized 关键字结合对象的监视器,JVM 为我们提供了一种『内置锁』的语义,这种锁很简便,不需要我们关心加锁和释放锁的过程,我们只需要告诉虚拟机哪些代码 ...
- Python Jupyter 网站编辑器
Python Jupyter 网站编辑器 jupyter 是 python的网站编辑器可以直接在网页内编写python代码并执行,内置是通过ipython来调用的.很方便灵活. 安装 1.安装ipyt ...
- Ubuntu 限制 指定端口和IP 访问
限制端口和IP的时候 要注意别自己登陆不进去了,要不就惨了. 只允许指定的IP访问服务器的指定端口:22 只允许访问的ip: 192.168.1.1 192.168.1.2 192.168.1.3,禁 ...
- 百度编辑器UEditor,保存图片的配置问题
前言: 在使用百度编辑器UEditor的时候,如何将图片保存到服务器,我刚开始以为是要自己写上传文件的方法,后来发现只需要配置一下即可,如果你也正在使用百度富文本编辑器UEditor的话,这篇文章将非 ...
- JavaScript中this究竟指向什么？
摘要: 神奇的this! 原文:JS 中 this 在各个场景下的指向 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 1. this 的奥秘 很多时候, JS 中的 this 对于咱 ...
- python 的三元操作符
条件表达式(三元操作符) 1.有了这个三元操作符的条件表达式,你可以使用一条语句来完成下面的条件判断和赋值操作: x,y=4,5 if x<y: temp = x else: temp = ...
- kibana和中文分词器analysis-ik的安装使用
Centos7安装elasticSearch6 上面讲述了elasticSearch6的安装和使用教程. 下面讲一下elasticsearch6的管理工具Kibana. Kibana是一个开源的分析和 ...
- kolla部署openstack allinone，报错APIError: 500 Server Error: Internal Server Error (\"oci runtime error: container_linux.go:235: starting container process caused \"container init exited prematurely
使用 kolla-ansible 部署 opnenstack:stein 执行 kolla-ansible -i ./all-in-one deploy 开始自动化部署 在部署过程中报错,报错信息如下 ...
- Springboot jackSon -序列化-详解
在项目中有事需要对值为NULL的对象中Field不做序列化输入配置方式如下: [配置类型]: 源码包中的枚举类: public static enum Include { ALWAYS, NON_NU ...