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">下拉菜单&nbsp;<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>