当天视频     其他笔记     代码 课件

BootStrap & Vue

第47天笔记

按钮样式

可以给如下html元素添加class
    -   span标签  建议
    -   button标签
    -   input标签
    -   a标签
class   
    -   btn             :   按钮点击切换效果
    -   btn btn-default :   默认按钮效果
    -   btn btn-primary :   主要蓝按钮效果
    -   btn btn-success :   成功绿按钮效果
    -   btn btn-info    :   信息蓝按钮效果
    -   btn btn-warning :   警告黄按钮效果
    -   btn btn-danger  :   危险红按钮效果
    -   btn btn-link    :   超链接按钮样式


案例:
    <button class="btn">按钮</button>
    <button class="btn btn-default">默认按钮</button>
    <hr>
    <span class="btn">按钮</span>
    <span class="btn btn-default">默认按钮</span>
    <span class="btn btn-primary">主要蓝按钮</span>
    <span class="btn btn-success">成功绿按钮</span>
    <span class="btn btn-info">信息蓝按钮</span>
    <span class="btn btn-warning">警告黄按钮</span>
    <span class="btn btn-danger">危险红按钮</span>
    <span class="btn btn-link">超链接样式按钮</span>

按钮尺寸样式:

class:
    -   btn-lg  :   大按钮
    -   btn-sm  :   小按钮
    -   btn-xs  :   特小按钮
    -   btn-block:  块按钮 (独占一行,常用于手机按钮)

案例:
    <span class="btn btn-success btn-lg">大按钮</span>
    <span class="btn btn-success">普通按钮</span>
    <span class="btn btn-success btn-sm">小按钮</span>
    <span class="btn btn-success btn-xs">特小按钮</span>
    <span class="btn btn-success btn-block">块级按钮</span>

按钮的激活与禁用

class:
    -   active  :   按钮是激活样式 (被点击时的样式)
    -   disabled:   禁用的,  鼠标悬停时, 呈现禁用样式

案例:
    <span class="btn btn-success active">激活按钮</span>
    <span class="btn btn-success disabled">禁用按钮</span>

表单样式 (输入框样式)

如果需要使用表单样式, 那么添加表单样式的input标签必须指定type属性,  不能是默认.
block 块样式输入框
input添加class=form-control


案例:
    <h1 class="text-center">用户登录</h1>
    <br><br><br>
    <form action="#">
        <input type="text" placeholder="请输入帐号" class="form-control">
    <br>
        <input type="password" placeholder="请输入密码" class="form-control">
    <br>
        <input type="submit" value="登录" class="btn btn-success form-control">
<br>
</form>
内联输入框 (响应式)
当屏幕的宽度小于768px时 , 自动切换为块级样式

class:
    给form标签:    form-inline
    给input标签:   form-control

案例:
<h1 class="text-center">用户登录</h1>
<br><br><br>
<form action="#" class="form-inline">
    <input type="text" placeholder="请输入帐号" class="form-control">
<br>
    <input type="password" placeholder="请输入密码" class="form-control">
<br>
    <input type="submit" value="登录" class="btn btn-success form-control">
<br>
</form>

响应式

栅格系统
栅格:  指的是bootstrap所提供的一套用于响应式 以及 移动设备优先的 流式栅格布局 !
栅格容器
栅格容器 被横向分为12等份 , 在一个栅格容器中包含一个栅格行 , 栅格行中 可以存在n份元素, 超出12的换行显示.

存在两种栅格容器:
    1.  固定宽度的栅格容器
            给一个div添加class=container
    2.  占满屏幕100%宽度的栅格容器
            给一个div添加class=container-fluid

栅格容器中的栅格行:
    在栅格容器的div中 添加一个子div , class指定为row
使用固定宽度的容器:
固定宽度的栅格容器, 在不同的屏幕下 宽度是不一样的.

        超小屏幕<768px      768px≤小屏幕<992px     992px≤中等屏幕<1200px   1200px≤大屏幕
固定宽度:       auto                 750px                  970px               1170px      
类前缀 :       col-xs-             col-sm-                 col-md-             col-lg-


案例:

    <div class="container">
        <div class="row">
            <img src="images/23.jpg" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <img src="images/24.jpg" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <img src="images/25.jpg" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <img src="images/26.jpg" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <img src="images/27.jpg" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <img src="images/28.jpg" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        </div>
    </div>
栅格偏移
class:
    类前缀-offset-数字           //数字指的是偏移的值

左边的元素偏移后, 右边的元素会跟着移动.

案例:
    <div class="container">
        <div class="row">
            <img src="images/23.jpg" class="col-lg-4 col-lg-offset-2">
            <img src="images/24.jpg" class="col-lg-4">
        </div>
    </div>
栅格移动
向左移动:
    类前缀-pull-数字
向右移动:
    类前缀-push-数字

某一个元素的栅格移动,移动后覆盖显示. 不会影响其他元素的位置!  
栅格嵌套
栅格中的每一个占有固定份数的 元素 , 也可以看作一个栅格的行, 再来划分12个格使用.
案例:
显示与隐藏

导航

基本导航
步骤:
    1.  编写ul标签, 指定class="nav"
    2.  ul中编写一个个的li ,li的内容必须是超链接

案例:
    <ul class="nav">
        <li><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">亚洲图片</a></li>
        <li><a href="javascript:void(0)">欧美GIF</a></li>
        <li><a href="javascript:void(0)">日韩无码高清</a></li>
        <li><a href="javascript:void(0)">国产美女主播</a></li>
        <li><a href="javascript:void(0)">外星人系列</a></li>
        <li><a href="javascript:void(0)">各种VR资源</a></li>
        <li><a href="javascript:void(0)">AR资源</a></li>
    </ul>
横向基本导航
步骤:
    1.  编写一个ul, 指定class="nav nav-tabs"
    2.  ul中编写一个个的li ,li的内容必须是超链接
案例:
    <ul class="nav nav-tabs">
        <li><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">亚洲图片</a></li>
        <li><a href="javascript:void(0)">欧美GIF</a></li>
        <li><a href="javascript:void(0)">日韩无码高清</a></li>
        <li><a href="javascript:void(0)">国产美女主播</a></li>
        <li><a href="javascript:void(0)">外星人系列</a></li>
        <li><a href="javascript:void(0)">各种VR资源</a></li>
        <li><a href="javascript:void(0)">AR资源</a></li>
    </ul>
横向撑满容器导航
步骤:
    1.  编写一个ul, 指定class="nav nav-tabs nav-justified"
    2.  ul中编写一个个的li ,li的内容必须是超链接
案例:
    <ul class="nav nav-tabs nav-justified">
        <li><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">亚洲图片</a></li>
        <li><a href="javascript:void(0)">欧美GIF</a></li>
        <li><a href="javascript:void(0)">日韩无码高清</a></li>
        <li><a href="javascript:void(0)">国产美女主播</a></li>
        <li><a href="javascript:void(0)">外星人系列</a></li>
        <li><a href="javascript:void(0)">各种VR资源</a></li>
        <li><a href="javascript:void(0)">AR资源</a></li>
    </ul>
横向胶囊导航
步骤:
    1.  编写一个ul, 指定class="nav nav-pills"
    2.  ul中编写一个个的li ,li的内容必须是超链接
案例:
    <ul class="nav nav-pills">
        <li><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">亚洲图片</a></li>
        <li><a href="javascript:void(0)">欧美GIF</a></li>
        <li><a href="javascript:void(0)">日韩无码高清</a></li>
        <li><a href="javascript:void(0)">国产美女主播</a></li>
        <li><a href="javascript:void(0)">外星人系列</a></li>
        <li><a href="javascript:void(0)">各种VR资源</a></li>
        <li><a href="javascript:void(0)">AR资源</a></li>
    </ul>
垂直胶囊导航
步骤:
    1.  编写一个ul, 指定class="nav nav-pills nav-stacked"
    2.  ul中编写一个个的li ,li的内容必须是超链接
案例:
    <ul class="nav nav-pills  nav-stacked">
        <li><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">亚洲图片</a></li>
        <li><a href="javascript:void(0)">欧美GIF</a></li>
        <li><a href="javascript:void(0)">日韩无码高清</a></li>
        <li><a href="javascript:void(0)">国产美女主播</a></li>
        <li><a href="javascript:void(0)">外星人系列</a></li>
        <li><a href="javascript:void(0)">各种VR资源</a></li>
        <li><a href="javascript:void(0)">AR资源</a></li>
    </ul>
内容切换导航
步骤:

    1.  创建一个普通的导航 (上述任意 , 建议为横向的, 效果比较好)
    2.  在导航的ul标签下, 添加兄弟元素div , 指定class="tab-content"
    3.  在上述的tab-content的div中, 加入一个个的子div , 每一个div 后期会绑定一个导航选项, 点击时显示.
        此div必须指定id , class值必须是tab-pane fade , 默认显示的div的class值:tab-pane fade in active
    4.  导航中的超链接, 添加属性: data-toggle="tab"
    5.  导航中的超链接, 需要指定连接地址为: #第三步的子div的id
    6.  给默认选中的li选项, 添加class=active

案例:
    <ul class="nav nav-tabs">
        <li class="active"><a href="#d1" data-toggle="tab">首页</a></li>
        <li><a href="#d2" data-toggle="tab">亚洲图片</a></li>
        <li><a href="#d3" data-toggle="tab">欧美GIF</a></li>
        <li><a href="#d4" data-toggle="tab">日韩无码高清</a></li>
        <li><a href="#d5" data-toggle="tab">国产美女主播</a></li>
        <li><a href="#d6" data-toggle="tab">更多</a></li>

    </ul>
    <div class="tab-content">
        <div id="d1" class="tab-pane fade in active">
            <h3>网站首页</h3>
            <p>不忘初心, 方得始终 ! 靡不有初, 鲜克有终 !</p>
        </div>
        <div id="d2" class="tab-pane fade">
            <h3>亚洲图片页面</h3>
        </div>
        <div id="d3" class="tab-pane fade">
            <h3>欧美GIF页面</h3>
        </div>
        <div id="d4" class="tab-pane fade">
            <h3>日韩无码高清页面</h3>
        </div>
        <div id="d5" class="tab-pane fade">
            <h3>国产美女主播页面</h3>
        </div>
        <div id="d6" class="tab-pane fade">
            <h3>更多资源:<a href="https://shuidianshuisb.com">点击充值vip</a></h3>
        </div>
    </div>

Vue 框架

使用步骤
1.  下载JS文件
2.  创建Vue对象, 绑定元素, 进行操作.

案例:
<script type="text/javascript" src="js/vue.js"></script>
    <div id="content">
        <a href="#">点击浏览{{dsb}}</a>
        <a href="#">点击浏览{{dsg}}</a>
    </div>
<script type="text/javascript">
    var v1 = new Vue({
        el:"#content",
        data:{
            "dsb":"石鹏",
            "dsg":"魏洋"
        }
    });
    v1.dsb = "石鹏鹏";
</script>

实例 与 挂载点 与模板

实例: 我们创建的vue对象
挂载点:    创建完毕的vue对象, 可以绑定一个元素, 通过 el:"#id" 的方式完成元素的挂载.
模板  :   指的是在挂载点中显示的内容, 可以通过插值表达式指定, 也可以通过template属性完成设置.

案例:
    <body>
        <div id="content">
        </div>
    </body>
    <script type="text/javascript">
        var v1 = new Vue({
            el:"#content",
            template:"<h1>这是模板, 用于显示在挂载点中</h1>"
        });
    </script>

插值表达式

{{data中的key}}

作用: 用于将data中的数据, 绑定到挂载点的指定位置, 
        这种绑定是动态的 , 当data中的数据发生改变时, 会导致挂载点中的内容同步变化.

v-text属性

用于在挂载点中 加载data的数据 . 与插值表达式相似
格式:
    <标签 v-text="data中的key"></标签>

v-html属性

用于在挂载点中 加载data的数据 . 与插值表达式相似
格式:
    <标签 v-html="data中的key"></标签>

v-text与v-html与插值表达式的区别:

插值表达式:  显示data中的数据时, 如果数据存在html标签, 那么会原样显示.
v-text  :   与插值表达式一致 , 显示data中的数据时, 如果数据存在html标签, 那么会原样显示.
v-html  :   显示data中的数据时, 如果数据存在html标签, 那么显示的是解析后的标签内容.


案例:

    <body>
        <div id="content">
            插值表达式:{{img1}}<br>
            v-text: <div v-text="img1"></div><br>
            v-html: <div v-html="img1"></div><br>
        </div>
    </body>
    <script type="text/javascript">
        var v1 = new Vue({
            el:"#content",
            data:{
                img1:"<img src='images/30.gif'>"
            }
        });
    </script>

模板指令 : 事件

格式1.    
    步骤:
        1.  在vue对象中, 加入methods属性 , 值是一个json对象, 包含了一个个的键值对, 值为function类型.
        2.  给标签添加属性:    v-on:事件类型="第一步function的key";

    案例:
    <body>
        <div id="content">
            <button v-on:click="x1">按钮1</button>
            <button v-on:click="x2">按钮2</button>
        </div>
    </body>
    <script type="text/javascript">
        var v1 = new Vue({
            el:"#content",
            data:{
                msg1:"从前有座山",
                msg2:"山上有尼姑庵"
            },
            methods:{
                x1:function(){
                    alert(this.msg1);
                },
                x2:function(){
                    alert(this.msg2);
                }
            }
        });
    </script>

格式2.
    是格式1的简写模式. v-on:事件类型 简写为: @事件类型 即可

案例:
    <body>
        <div id="content">
            <button @click="x1">按钮1</button>
            <button @click="x2">按钮2</button>
        </div>
    </body>
    <script type="text/javascript">
        var v1 = new Vue({
            el:"#content",
            data:{
                msg1:"从前有座山",
                msg2:"山上有尼姑庵"
            },
            methods:{
                x1:function(){
                    alert(this.msg1);
                },
                x2:function(){
                    alert(this.msg2);
                }
            }
        });
    </script>

属性绑定

之前可以通过 插值表达式 / v-text / v-html 将data中的数据 显示到元素的文本内容位置. 
我们其实也可以通过属性绑定的方式, 将data中的数据 绑定到元素的属性上 . 绑定的属性数据也会因为data中数据的更改而变化.


格式1.
    <标签 v-bind:属性名="data中的key"></标签>

格式2.    格式1的简写
    <标签 :属性名="data中的key"></标签>

案例:
    <body>
        <div id="content">
            <button @click="x1">点击切换图片</button>
            <img v-bind:src="img1">
        </div>
    </body>
    <script type="text/javascript">
        var v1 = new Vue({
            el:"#content",
            data:{
                img1:"images/30.gif"
            },
            methods:{
                x1:function(){
                    this.img1 = "images/31.gif";
                }
            }
        });
    </script>

属性数据双向绑定 (仅适用于input标签)

上述的属性绑定:    通过修改vue对象的数据, 会影响html元素中的属性值.
                但是, 当html元素的属性值发生修改时, vue对象中的数据 是不会编写.

双向绑定:   当元素的属性变化, vue对象中的数据跟着变化
            当vue对象中的数据变化 ,元素的属性值也跟着变化.

注意: 仅仅适用于input标签的value属性值.

格式:
    v-model="data中的key"

计算属性

指的是 一个属性的值, 是通过其他方式计算得到的.

格式:
    在vue对象中加入 一个JSON对象: 
        computed:{
            属性名:function(){
                return 属性值;
            }
        }

案例:
    <div id="content">
        <h1>姓名:{{fullName}}</h1>
        <input placeholder="请输入姓" v-model="first_name">
        <input placeholder="请输入名" v-model="last_name">
    </div>
    <script type="text/javascript">
        var v1 = new Vue({
            el:"#content",
            data:{
                first_name:"",
                last_name:""
            },
            computed:{
                fullName:function(){
                    return this.first_name+" "+this.last_name;
                }
            }
        });
    </script>

模板指令 v-if

作用: 用于判断一个元素是否在网页中加载 . 如果结果为true 则加载, 结果为false 则不加载. 常用于网站的权限管理! 用于给用户展示权限内的页面数据.

语法格式:
    给元素添加属性:v-if , 属性值可以是一个条件表达式 或 data中的key

案例:

    <body>
        <div id="content">
            <img src="images/30.gif" v-if="flag">
            <button @click="x1">加载</button>
            <button @click="x2">不加载</button>
        </div>
    </body>
    <script type="text/javascript">
        var v1 = new Vue({
            el:"#content",
            data:{
                flag:true
            },
            methods:{
                x1:function(){
                    this.flag = true;
                },
                x2:function(){
                    this.flag = false;
                }
            }
        });
    </script>

模板指令 v-show

作用: 用于判断一个元素是否在网页中显示 . 如果结果为true 则显示, 结果为false 则隐藏. 常用于网站的权限管理! 用于给用户展示权限内的页面数据.

语法格式:
    给元素添加属性:v-show , 属性值可以是一个条件表达式 或 data中的key

案例:

<body>
    <div id="content">
        <img src="images/30.gif" v-show="flag">
        <button @click="x1">显示</button>
        <button @click="x2">隐藏</button>
    </div>
</body>
<script type="text/javascript">
    var v1 = new Vue({
        el:"#content",
        data:{
            flag:true
        },
        methods:{
            x1:function(){
                this.flag = true;
            },
            x2:function(){
                this.flag = false;
            }

        }
    });
</script>
v-if 与 v-show的区别:
v-if    :   控制的是元素是否加载, 不加载时, 元素在内存中不存在. 相当于从文档树结构中删除了此元素.

v-show: 控制的是元素是否显示, 隐藏时, 元素在内存中依然存在, 只是display设置为了none;
模板指令 v-for
作用: 用于在网页中 循环展示固定的布局数据 .

格式1.    
        给元素添加属性:    v-for="item of 数组名" 
格式2.
        给元素添加属性:    v-for="(item,index) of 数组名"

注意: 上述格式中的
            数组名指的是:     data中的数据key , 这个key对应的数据必须是数组
            item 指的是:   每次循环时, 从数组中取出的数据的key , 可以使用插值表达式来显示 {{item}}
            index 指的是:  循环的轮数, 类似数据的下标.

案例:

            <body>
                <div id="content">
                    <ul>
                        <li v-for="item of msgs">{{item}}</li>
                    </ul>
                </div>
            </body>
            <script type="text/javascript">
                var v1 = new Vue({
                    el:"#content",
                    data:{
                        msgs:["锄禾日当午","石鹏和魏洋","停车坐爱枫林晚","一墙红杏出墙来","哈哈哈哈哈哈哈"]
                    }
                });
            </script>