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实例都是独立的，都有一个属 于它的生命周期。 Vue js的生 命周期包括五个状态。
(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>
