练习题: 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：的更多相关文章

  1. Linux基础练习题(二)

    Linux基础练习题(二) 1.复制/etc/skel目录为/home/tuer1,要求/home/tuser1及其内部文件的属组和其它用户均没有任何访问权限. [root@www ~]# cp -r ...

  2. shell 脚本之 shell 练习题汇总

    整理了一些 shell 相关的练习题,记录到这里. 1. 请按照这样的日期格式 xxxx-xx-xx 每日生成一个文件,例如:今天生成的文件为 2013-09-23.log, 并且把磁盘的使用情况写到 ...

  3. MySQL练习题

    MySQL练习题 一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 3.查询平均成绩大于60分的同学的学号和平均成 ...

  4. MySQL练习题参考答案

    MySQL练习题参考答案 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 思路: 获取所有有生物课程的人(学号,成绩) - 临时表 获取所有有物理课程的人(学号,成绩) - 临时表 根据[ ...

  5. mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风

    (-1)写在前面 文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-- ...

  6. 【UOJ#228】基础数据结构练习题 线段树

    #228. 基础数据结构练习题 题目链接:http://uoj.ac/problem/228 Solution 这题由于有区间+操作,所以和花神还是不一样的. 花神那道题,我们可以考虑每个数最多开根几 ...

  7. 【Java EE 学习 28 下】【Oracle面试题2道】【Oracle练习题3道】

    一.已知程序和数据 create table test1 (id int primary key, name ), money int); ,); ,); ,); ,); 要求根据下图写出相应的sql ...

  8. 从一道NOI练习题说递推和递归

    一.递推: 所谓递推,简单理解就是推导数列的通项公式.先举一个简单的例子(另一个NOI练习题,但不是这次要解的问题): 楼梯有n(100 > n > 0)阶台阶,上楼时可以一步上1阶,也可 ...

  9. 《java编程思想》读书笔记 暂停一段时间，改为上面的练习题

    发现个很尴尬的现象.我一天实在看得太快了...全写下 写博客都得一晚上.. 之前因为是第一次看这么厚的书,别人都说很难,以为会看很慢的.然而,已经完全学过Java的 我感觉没啥压力,越看越快....第 ...

随机推荐

  1. python接口自动化3-发送post及其他请求

    前言 发过get请求相信学习post请求也很快学会,无非就是多了传参时的类型与参数格式.在我常见的post请求中用到最多的是json格式,但也有用其它,下面将介绍常用的参数类型格式. 一.Post请求 ...

  2. php json_decode无法处理\解决方法

    php json_decode无法处理\解决方法 <pre>$aa=urlencode('eee\ee');$dfda='[{"company":"测试&qu ...

  3. Tensorflow faster rcnn系列一

    注意:本文主要是学习用,发现了一个在faster rcnn训练流程写的比较详细的博客. 大部分内容来自以下博客连接:https://blog.csdn.net/weixin_37203756/arti ...

  4. RStudio 不中断下载依赖包

    修改下载方式:

  5. Mongodb的常用语句

    模糊查询  regex(".*?\\"+questionContent+".*") String questionContent = "需求" ...

  6. elementui树表修改子节点不能实时更新的解决办法

    在使用ElementUI提供的树表(el-table)的时候发现,如果手动通过JS修改了某个节点的children中的一条记录(子节点)的话,并不会自动刷新. 简单分析了一下,原因大概是因为VUE的数 ...

  7. cuda,cudnn

    20191008 服务器上的cuda总是被人搞坏掉,好烦.记录下: 卸载干净cuda sudo rm -rf /usr/local/cuda sudo apt-get remove cuda sudo ...

  8. ASP.NET中的请求验证

    这两天做项目的时候偶然发现项目中的保存功能的时候出现这样的异常:异常详细信息: System.Web.HttpRequestValidationException: 从客户端(XXXX)中检测到有潜在 ...

  9. .NET Core RabbitMQ探索(1)

    RabbitMQ可以被比作一个邮局,当你向邮局寄一封信时,邮局会保证将这封信送达你写的收件人,而RabbitMQ与邮局最主要的区别是,RabbitMQ并不真的处理信件,它处理的是二进制的数据块,它除了 ...

  10. CentOS7 vsftp 安装与配置（视频教程）

    (双击全屏播放) 1.安装vsftpd yum install -y vsftpd 2.编辑ftp配置文件 vi /etc/vsftpd/vsftpd.conf anonymous_enable=NO ...