练习题: 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. antd模块组件文档思维导图整理

  2. linux软链接

    这是linux中一个非常重要的命令,他的功能是为某一个文件在另一个位置建立一个同步的链接,这个命令最常用的参数是-s, 具体用法是: ln -s 源文件 目标文件 当我们需要在不同的目录,用到相同的文 ...

  3. C#使用SharpZipLib创建压缩文件，并指定压缩文件夹路径（解决SharpZipLib压缩长路径显示问题）

    在项目中使用SharpZipLib压缩文件夹的时候,遇到如果目录较深,则压缩包中的文件夹同样比较深的问题.比如,压缩当前程序目录下的某个文件夹(D:\cx\code\program\bin\debug ...

  4. tkinter为多个窗口设置相同的icon报错

    import threading import tkinter from PIL import Image, ImageTk def show_window(): window = tkinter.T ...

  5. Java构造函数执行顺序

    首先执行基类的构造函数 然后执行派生类的构造函数之外的初始化语句 最后执行派生类的构造函数 在Java中,如果派生类构造函数需要调用基类的构造函数,那么基类构造函数必须作为派生类构造函数的第一句话.在 ...

  6. 学习shiro第一天

    shiro是一个强大而且易用的安全框架(主要包括认证和授权),它比spring security更加简单,而且它不依赖于任何容器,可以和许多框架集成. shiro的核心是安全管理器(SecurityM ...

  7. Windows+Qt使用gRPC

    上篇文章<Windows+VS2017使用gRPC>编译出了Windows下可用的gRPC静态lib库文件,在此基础上要想在Qt上使用,需要使用MSVC2017 64bit构建组件进行构建 ...

  8. 英语LIGNALOO沉香lignaloo单词

    沉香lignaloo,是瑞香科.沉香属的一种乔木,高5-15米.树皮暗灰色,几平滑,纤维坚韧:小枝圆柱形,具绉纹,幼时被疏柔毛,后逐渐脱落,无毛或近无毛.产于中国广东.海南.广西.福建等地.喜生于低海 ...

  9. AccessCenter 模块结构

    AccessCenter 模块结构

  10. sparkSQL中的example学习(2)

    UserDefinedUntypedAggregate.scala(默认返回类型为空,不能更改) import org.apache.spark.sql.{Row, SparkSession} imp ...