练习题: 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. set -x 与 set +x

    set -x 与 set +x 在liunx脚本中可用set -x就可有详细的日志输出.免的老是要echo了 下面的网上搜来的用法. 用于脚本调试.set是把它下面的命令打印到屏幕set -x 是开启 ...

  2. Go gRPC Hello World

    概述 开始 gRPC 了,这篇文章学习使用 gRPC,输出一个 Hello World. 用 Go 实现 gRPC 的服务端. 用 Go 实现 gRPC 的客户端. gRPC 支持 4 类服务方法,咱 ...

  3. mysql8 安装

    准备工作: 首先安装这些依赖 yum install -y flex yum install gcc gcc-c++ cmake  ncurses ncurses-devel bison libaio ...

  4. Elasticsearch(ES) 创建索引

    欢迎关注笔者的公众号: 小哈学Java, 每日推送 Java 领域干货文章,关注即免费无套路附送 100G 海量学习.面试资源哟!! 个人网站: https://www.exception.site/ ...

  5. Java生鲜电商平台-电商促销业务分析设计与系统架构

    Java生鲜电商平台-电商促销业务分析设计与系统架构 说明:Java开源生鲜电商平台-电商促销业务分析设计与系统架构,列举的是常见的促销场景与源代码下载 左侧为享受促销的资格,常见为这三种: 首单 大 ...

  6. Java自学-I/O 对象流

    Java 对象流 ObjectInputStream,ObjectOutputStream 对象流指的是可以直接把一个对象以流的形式传输给其他的介质,比如硬盘 一个对象以流的形式进行传输,叫做序列化. ...

  7. 百度云BCC安装WordPress镜像

    重装系统 在BCC实例中,重装系统选择WordPress. Centos 6.5 x64Apache 2.2.15: Web 主目录:/home/www/default 配置文件目录:/etc/htt ...

  8. Expression表达式目录树动态拼接 反射获取泛型方法

    class TestOne { public String[] arr = { "1", "2", "3" }; public class ...

  9. 【vuejs】vue数组操作

    问题:两种操作都能给数组添加数据,但是利用下标添加数据不会自动在视图中渲染,这个是和vue自己的规定有关,这里记录一下 网上到原因,这里附转载链接 点我传送 官网相关说明传送门

  10. 155--MinStack

    /* 解法一:使用链表从0实现栈,用min来存放最小值. 复杂的地方是,如果pop了最小的数,就要遍重新找到最小的数. */ public class MinStack { List<Integ ...