练习题 vue_01：

目录

• 练习题: vue_01
  • 点击事件控制标签颜色：
  • 点击次数控制标签的样式：
  • 周期性实现标签的旋转变色：
• 每日一题：
  • http协议，https与http的区别：
  • 前端页面布局的方式
  • 框架内orm的功能：

练习题: 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
	一种对应关系映射，将表，表字段，表数据，通过生成对象，点方法的方式获取，修改，更新，删除 数据

每日感悟：
 	失败是偶然 ， 成功是必然 ！！！！