目錄
練習題: 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
一種對應關系映射，將表，表字段，表數據，通過生成對象，點方法的方式獲取，修改，更新，刪除 數據
每日感悟：
失敗是偶然 ， 成功是必然 ！！！！