bootstrap的簡單使用，離線儲存，Vue中表單輸入，動態樣式之class，常用的事件修飾符與鍵盤修飾符
阿新 • • 發佈：2020-11-01
Bootstrap
官網地址
https://www.bootcss.com/
https://v4.bootcss.com/ （4版本的官網）
概念
簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。
一套簡單的UI框架
下載方式
一、cdn
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
二、通過npm去下載
npm install bootstrap (這個命令是下載npm上最新的版本)
npm install（i） bootstrap@3 (@3 指定下載3版本)
學員資訊表管理小案例：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak]{ display: none; } </style> <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"> <script src="./node_modules/vue/dist/vue.js"></script> </head>
<!-- 當頁面瘋狂重新整理，出現閃屏如何解決？ 解決方法兩種： 一、利用v-text,本身沒有 {{}} ， 那麼就不會出現相關問題。 二、全域性解決重新整理閃頻問題，指令v-cloak --> <div id="app" v-cloak> <!-- 利用bootstrap建立一個container--> <div class="container"> <h2 class="text-center text-primary">學員資訊輸入</h2> <form> <div class="form-group"> <label for="name">姓名</label> <input type="email" class="form-control" id="name" aria-describedby="emailHelp" v-model='userInfo.name'> </div> <div class="form-group"> <label for="age">年齡</label> <input type="text" class="form-control" id="age" v-model='userInfo.age'> </div> <div class="form-group"> <label for="tel">手機號</label> <input type="text" class="form-control" id="tel" v-model='userInfo.tel'> </div> <div class="form-group"> <label for="remark">備註資訊</label> <textarea id="reamrk" cols="100" rows="2" v-model='userInfo.remark'></textarea> </div> <div class="text-center"><button type="button" class="btn btn-primary" @click='add'>新增</button> <button type="button" class="btn btn-info" @click='reset'>重置</button></div> </form> <h2 class="text-center text-primary">學員資訊表</h2> <table class="table table-bordered table-hover"> <thead> <tr> <th scope="col">序號</th> <th scope="col">姓名</th> <th scope="col">年齡</th> <th scope="col">手機號</th> <th scope="col">備註資訊</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for='(item,index) in uInfo'> <td>{{ index>8 ? index+1 : '0' + (index+1)}} </td> <td>{{item.name}} </td> <td>{{item.age}}</td> <td>{{item.tel}}</td> <td>{{item.remark}}</td> <td> <button type="button" class="btn btn-danger" @click='del(index)'>刪除</button> </td> </tr> <tr> <!-- v-if 和 v-else必須連著使用，否則不生效會報錯 --> <td colspan="6" v-if='!uInfo.length'>暫無資料</td> <td colspan="6" v-else><button type="button" class="btn btn-danger" @click='delAll'>全部刪除</button></td> </tr> </tbody> </table> </div> </div>
<script>
new Vue({
el: '#app',
data: {
userInfo: {
name: '',
age: '',
tel: '',
remark: ''
},
uInfo: localStorage.getItem('uInfo') ? JSON.parse(localStorage.getItem('uInfo')): []
},
methods: {
// 新增
add() {
if(!this.userInfo.name || !this.userInfo.age || !this.userInfo.tel || !this.userInfo.remark){
alert('輸入資訊不能為空');
return;
};
this.uInfo.push(this.userInfo);
this.reset();
localStorage.setItem('uInfo',JSON.stringify(this.uInfo));
},
// 重置
reset() {
this.userInfo = {
name: '',
age: '',
tel: '',
remark: ''
}
},
// 單刪
del(index) {
this.uInfo.splice(index,1);
localStorage.setItem('uInfo',JSON.stringify(this.uInfo));
},
// 全刪
delAll(){
this.uInfo = [];
localStorage.setItem('uInfo',JSON.stringify(this.uInfo));
}
}
})
</script>
<!-- 學員資訊表思路：
一、利用UI框架搭建靜態頁
二、把表格的資料轉化成假資料,並迴圈遍歷
三、書寫邏輯互動
四、重新整理頁面，資料還在，利用離線儲存方法 -->
離線儲存
概念：離線儲存是H5新增的屬性，沒有出現這個屬性之前，我們的儲存用cookie。出現之後大部分的儲存都被離線儲存所代替
離線儲存包含兩部分：一、本地儲存localStorage 二、會話儲存sesssionStorage
記憶要點：
一、localStorage和sesssionStorage
二、localStorage和sesssionStorage以及cookie的區別
三、離線儲存中哪一個方法可以實現跨頁面儲存（就是localStorage）
離線儲存兩種方法的區別
相同點：都可以快取內容，大小都是5M左右，儲存形式必須是字串它們的使用語法都一樣
存值： localStorage/sesssionStorage.setItem(key,value)
取值： localStorage/sesssionStorage.getItem(key)
刪除某一個值： localStorage/sesssionStorage.removeItem(key)
不同點： localStorage它又名永久儲存，只要不刪除，永遠儲存，關閉瀏覽器不消失
sesssionStorage名會話儲存，關閉瀏覽器即消失
表單輸入
單選框
<div> <!-- 單選框一定要寫 value,且value是後端要取的數值 --> 性別： <input type="radio" name='sex' value='0' v-model='regList.sex'> 男 <input type="radio" name='sex' value="1" v-model='regList.sex'> 女 </div>
複選框
<div> <!-- 複選框：定義checkbox初始值，應是一個[] ,獲取值的時候，獲取的是value 的值 你也可以有預設值：eg:['play'] --> <input type="checkbox" value='study' v-model='regList.hobby'>學習 <input type="checkbox" value='sleep' v-model='regList.hobby'>睡覺 <input type="checkbox" value='rap' v-model='regList.hobby'>唱歌 <input type="checkbox" value='play' v-model='regList.hobby'>打籃球 </div>
下拉框
<!--下拉框的雙向資料繫結，繫結在select標籤上。它的value 是option中的value --> 工作種類： <select v-model='regList.address'> <option value="" disabled>--請選擇--</option> <option value="java">洛陽</option> <option value="web">鄭州</option> <option value="test">北京</option> <option value="ui">上海</option> </select>
一個checkbox
<div> <!-- 一個checkbox 複選框，我們初始值可以為空，獲取value的時候，是true或者false.我們的初始值也可以是true或者false --> 協議：<input type="checkbox" v-model='regList.isGree'> </div>
動態樣式之class
動態class的第一種用法： 設定一個變數 。 例子: :class='變數屬性'
動態class的第二種用法: eg: :class="[條件?'成立的類名':'不成立的類名']"
動態class的第三種用法： eg: "{'類名A':條件A,'類名B':條件B,'類名C':條件C,'類名D':條件d}...."
<style> .blue { color: blue; } .red { color: red; } .green{ color: green; } .yellow{ color: yellow; } .footer{ width: 100%; position: fixed; left: 0; bottom: 0; display: flex; background-color: #ccc; } .footer div{ flex: 1; font: bold 20px/50px '微軟雅黑'; } </style>
<div id="app"> <div> <!-- 動態class的第一種用法： 設定一個變數 。 eg: :class='變數屬性' --> <p :class="color[0]">{{msg}} </p> <button @click='changeCol'>點選我更改顏色</button> <ul> <!-- 動態class的第二種用法,eg: :class="[條件?'成立的類名':'不成立的類名']" --> <li v-for='(item,index) in newsList' :class="[index%2 ? color[0]: color[1]]">{{item.title}} </li> </ul> </div> <div class="footer"> <div v-for='(item,index) in navList' :class='[num==index ? "green": "" ]' @click='change(index)'>{{item.name}} </div> </div> <!-- 動態class的第三種用法： eg:"{'類名A':條件A,'類名B':條件B,'類名C':條件C,'類名D':條件d}...." --> <ul> <li v-for='(item,index) in newsList ' :class="{'red': index===3 ,'blue': index===2,'green': index === 1,'yellow': index===0 } ">{{item.title}} </li> </ul> </div>
<script>
new Vue({
el: '#app',
data: {
msg: '花自飄零水自流',
color: ['blue', 'red'],
num: 0,
newsList: [
{
title: '向世界頂尖科學家論壇作視訊致辭'
},
{
title: '讓貧困人口和貧困地區同全國一道進入全面小康社會'
},
{
title: '警方跨國解救7名遭綁架中國人 受害者:狗鏈鎖脖 竹籤刺指甲'
},
{
title: '以底線思維強化疫情防控 見證中國小康之大美 海報'
}
],
navList: [
{
name: '首頁',
},
{
name: '分類',
},
{
name: '購物車',
},
{
name: '個人中心',
}
]
},
methods: {
changeCol() {
this.color = ['green', 'yellow'];
// console.log(this.color[0]);
},
change(index){
// console.log(index);
this.num = index;
}
}
})
</script>
常用的事件修飾符
.prevent 阻止預設事件
.stop 阻止冒泡事件
.once 只出現一次
.self 只觸發自己
.capture 捕獲
<div id="app"> <div class="menu" @contextmenu.prevent = 'pre'> 阻止滑鼠右鍵選單事件即預設事件 </div> <div class="big" @click='big'> <div class="small" @click.stop='small'> 阻止冒泡</div> </div> <div class="big" @click.once='big'> <div class="small" @click='small'> once</div> </div> <div class="big" @click.self='big'> <div class="small" @click='small'>self</div> </div> <div class="big" @click.capture='big'> <div class="small" @click='small'>capture</div> </div> </div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
pre(){
console.log('阻止了右鍵選單');
},
small(){
console.log('我是小盒子');
},
big(){
console.log('我是大盒子');
}
}
})
</script>
.enter .13
.shift .16
.ctrl .17
.left .37
.right .39
.up .38
.down .40
.del .46
.space .32
<div id="app"> <input type="text" v-model='msg' @keyup = 'enter1'> <hr> <input type="text" @keyup.enter= 'enter2' v-model='msg'> <input type="text" @keyup.13= 'enter2' v-model='msg'> </div>
<script>
new Vue({
el:'#app',
data:{
msg:''
},
methods:{
enter1(e){
console.log(e.keyCode);
if(e.keyCode === 13){ // enter鍵
console.log(this.msg);
}
},
enter2(){
console.log(this.msg);
}
}
})
</script>