2021.7.12今日小結
模態框的觸發
1、模態框的觸發方式
1、宣告式彈出觸發
直接使用data-toggle和data-target兩個屬性進行相應的設定
2、href連結彈出觸發
直接使用<a>標籤中的href屬性代替data-toggle屬性。
2、JavaScript觸發
$('#id').modal(options)
backdrop指定一個靜態背景，單擊模態框外部不會關閉模態框。
keyboard按下esc鍵關閉模態框（FALSE，TRUE）。
show初始化顯示模態框。
remote設定一個遠端URL，使用jQuery.load方法，為模態框的主體注入內容。
下拉選單
<div class="dropdown">
<a href="#" data-toggle="dropdown">下拉選單 <span class="caret"></span></a>
<ul class="dropdown-menu">
.......
</ul>
</div>
選項卡
(1)選項卡選單元件，對應的是Bootstrap的“.nav-tabs”樣式類。
(2)可以切換的選項卡面板元件，在Bootstrap中定義成“tab-pane”樣式類。
在Botstrap框架中，選項卡nav-tabs已帶有樣式，而面板內容tab-pane都是隱藏的，只有選中相應選項卡，其面板內容才會顯示。
選項卡定義data屬性來觸發切換效果。前提是要先載入bootstrap.js或者tab.js。宣告式觸發選項卡需要滿足以下幾點:
(1)選項卡導航連結中要設定data-toggle="tab"
(2)設定data-target-"對應內容面板的選擇符(一般是ID)";如果是連結的話，還可以通過href=“對應內容面板的選擇符(一般是ID)"設定，主要作用是使用者單擊的時候能找到該選擇符對應的面板內容tab-pane。
(3)面板內容全部放在含有“tab-content"樣式類的<div>容器中，而且每個面板內容都需要設定一個獨立的選擇符與選項卡中data-target或href的值匹配。
為了讓面板的隱藏與顯示在切換過程的效果更流暢，可以在面板中新增“fade"樣式類，讓其產生漸人效果。新增“fade”"樣式類時，最初預設顯示的面板內容一定要加上“in”樣式類，否則使用者無法看到其內容。
輪播圖
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarouse1" data-slide-to="0" class="active"></li>
<li data-target="#myCarouse1" data-slide-to="1"></li>
<li data-target="#myCarouse1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="a.png" alt="First slide">
<div class="carousel-caption">標題1</div>
</div>
彈出框
$("[data-toggle='popover']").popover();
data-container="body" data-toggle="popover" data-placement="top"
警告框
就是在一個<div>中新增“alert”樣式類，關閉按鈕是新增data-dismiss="alert"屬性
Vue.js基礎
(1)el:決定之後Vue例項會管理哪一個DOM。
(2)data:Vue例項對應的資料物件。
(3)methods:定義屬於Vue的一些方法，可以在其他地方呼叫，也可以在指令中使用。
(4)computed:定義計算屬性。
(5)filter:定義過濾器。
每個Vue例項都是獨立的，都有一個屬於它的生命週期。Vuejs的生命週期包括五個狀態。
(1)建立狀態:Vue例項被建立的過程。
(2)資料初始化狀態:建立Vue例項的資料初始化。
(3)掛載狀態:掛到真實的DOM節點。
(4)更新狀態:如果data中的資料改變，會觸發對應元件進行重新渲染。
(5)銷燬狀態:例項銷燬。
以上五個狀態就是一個元件例項完整的生命週期。
Vuejs框架的主要優點是:
(1)使用框架能夠提高網頁開發的效率，解決瀏覽器的程式碼相容性。
(2)提高渲染效率，對資料進行雙向繫結。
(3)在Vue.js中，-個核心的概念就是讓使用者不再操作DOM元素，讓程式設計師有更多多的時間去關注業務邏輯。
<div id="test">
<p>{{mag}}</p>
</div>
<script>
var vm=new Vue({
el:'#test',
data:{
mag:'Hello World'
}
})
</script>
瞭解了Vue的基本指令
1、v-thml指令會將元素當成HTML標籤解析後輸出。
2、v-text指令會將元素當成純文字輸出。
3、v-bind指令用於繫結HTML屬性的。
<標記 v-bind：屬性=“值”> </標記> 或者 <標記 ：屬性=“值”></標記>
4、v-if和v-else
類似於if語句的意思
5、v-model實現標籤資料的雙向繫結
<input v-model="test">
<input :value="test" @input="test=$event.target.value">
6、v-for
v-for=“item in list”
item是當前正在遍歷的元素物件，in是固定語法，list是被遍歷的陣列
v-for=“（item，index） in list”
index是索引值
v-for=“（value，key） in object”
object是物件，in是固定語法，key是物件的鍵，value是物件的鍵值。
7、v-on指令監聽DOM事件
<div id="app">
<button v-on:click="handlwClick">測試</button>
</div>