特殊按钮效果

开关按钮

给普通按钮样式 , 添加属性: data-toggle="button", 即可实现开关按钮

案例:
<span class="btn btn-success" data-toggle="button">示例开关按钮</span>

单选按钮

使用按钮组, 添加data-toggle="buttons" 即可实现 !

组中的所有按钮建议使用span标签, span标签中包含的是input标签 , 且input标签的type属性必须是radio , name属性必须相同,
一定不要忘记radio的value属性值是不会显示的,我们需要在radio后,添加普通文本, 用于提示用户选择!

案例:

请选择您的性别:

    <div class="btn-group" data-toggle="buttons">
        <span class="btn btn-info">
            <input type="radio" name="sex" value="1">男
        </span>
        <span class="btn btn-info">
            <input type="radio" name="sex" value="2">女
        </span>
        <span class="btn btn-info">
            <input type="radio" name="sex" value="3">奇男
        </span>
        <span class="btn btn-info">
            <input type="radio" name="sex" value="4">奇女
        </span>
    </div>

复选按钮

与单选框效果 完全一致, 仅仅改变的是input标签的type属性=checkbox

请多选您的性别:

    <div class="btn-group" data-toggle="buttons">
        <span class="btn btn-info">
            <input type="checkbox" name="sex" value="1">男
        </span>
        <span class="btn btn-info">
            <input type="checkbox" name="sex" value="2">女
        </span>
        <span class="btn btn-info">
            <input type="checkbox" name="sex" value="3">奇男
        </span>
        <span class="btn btn-info">
            <input type="checkbox" name="sex" value="4">奇女
        </span>
    </div>

折叠面板

实现步骤:

    1.  创建一个div , 表示被折叠的内容容器, 指定class="collapse",必须存在id属性!

    2.  创建一个按钮, 指定data-toggle="collapse", 指定data-target="#上述divid" ,用于点击展开

案例:

<span class="btn btn-success" data-toggle="collapse" data-target="#content">查看详细内容</span>
<div class="collapse" id="content">
    <div class="well">
        <h3>静夜思</h3>
        <p> 从前有座山, 山上有个庙
        <p> 庙里有个老和尚, 对小和尚说:
        <p> 窗前明月光
        <p> 疑是地上霜
        <p> 举头望明月
        <p> 低头哈哈哈
    </div>
</div>

图片轮播

步骤:

    1.  编写一个div(轮播图组件的容器) ,指定class="carousel slide",属性data-toggle="carousel" 并指定id和元素宽度
    2.  在上述的div中 ,添加内容div,指定class="carousel-inner" 
    3.  在第二步骤编写的div中, 添加一个个的子元素div,指定class="item" 默认显示项class="item active" ,并给这些div,添加img子标签 ,指定轮播的相应图片

    4.  (左右切换按钮) , 给第一步的div, 追加两个子元素超链接,并指定连接地址为 #步骤1div的id
        -   指定左侧超链接 class="carousel-control left" , 属性:data-slide="prev"
        -   指定左侧超链接 class="carousel-control right", 属性:data-slide="next"

    5.  (小圆点) , 编写一个ul标签, 指定class="carousel-indicators"

    6.  给上述ul 添加子标签li , 每一个li标签都是一个小圆点
            -   指定li的data-target="#步骤1div的id"
            -   指定li属性 data-slide-to="图片下标数字值"
            -   给默认的li添加class="active"


特殊步骤:
    -   给步骤1的div 添加属性 data-ride="carousel" , 效果为自动播放 !
    -   给步骤1的div 天机属性 data-interval="数字表示毫秒默认值为5000"


案例:
    <div id="x" data-ride="carousel" class="carousel slide" data-toggle="carousel" style="width:700px">
        <div class="carousel-inner">
            <div class="item active"><a href="https://itdage.cn/day01/笔记.html" title="第1天笔记"><img src="images/18.jpg"></a></div>
            <div class="item"><a href="https://itdage.cn/day02/笔记.html" title="第2天笔记"><img src="images/19.jpg"></a></div>
            <div class="item"><a href="https://itdage.cn/day03/笔记.html" title="第3天笔记"><img src="images/20.jpg"></a></div>
            <div class="item"><a href="https://itdage.cn/day04/笔记.html" title="第4天笔记"><img src="images/21.jpg"></a></div>
            <div class="item"><a href="https://itdage.cn/day05/笔记.html" title="第5天笔记"><img src="images/22.jpg"></a></div>
            <div class="item"><a href="https://itdage.cn/day06/笔记.html" title="第6天笔记"><img src="images/23.jpg"></a></div>
            <div class="item"><a href="https://itdage.cn/day07/笔记.html" title="第7天笔记"><img src="images/24.jpg"></a></div>
        </div>
        <a class="carousel-control left" data-slide="prev" href="#x"></a>
        <a class="carousel-control right" data-slide="next"data-slide="next" href="#x"></a>
        <ul class="carousel-indicators">
            <li data-target="#x" data-slide-to="0" class="active"></li>
            <li data-target="#x" data-slide-to="1"></li>
            <li data-target="#x" data-slide-to="2"></li>
            <li data-target="#x" data-slide-to="3"></li>
            <li data-target="#x" data-slide-to="4"></li>
            <li data-target="#x" data-slide-to="5"></li>
            <li data-target="#x" data-slide-to="6"></li>
        </ul>
    </div>

Vue

2018/7/16 11:40:54

---

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

国内官网地址

https://cn.vuejs.org

使用步骤

1.  下载js文件, 或者引入cdn的js文件
    <script src="js/vue.js"></script>
    或
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

2.  开始使用vue

    <div id="x">{{msg}}</div>

    <script>
        var v = new Vue({
            el:"#x",
            data:{
                msg:"一二三四五, 上山打老虎",
                msg2:"哈哈哈"
            }
        });
    </script>

实例 与 挂载点 以及模版 ***

实例: 指的是创建出的Vue对象 v

挂载点: 任何一个被Vue对象绑定的 具备id属性的 元素!

模版: 指的是挂载点中显示的内容 , 可以在标签内部 使用插值表达式({{key}}),
        也可以通过Vue实例的template属性实现 (template属性中内容必须被html标签包含)

插值表达式

语法格式:
    {{data中的数据key}}

用于在挂载点中, 加入数据显示效果 ,  

通过在挂载点中, 编写{{data中的数据key}} , 可以将data中的某数据 与 挂载点中显示效果进行关联

Vue对象中 data中的数据

包含多个键值对 , 在Vue中使用data数据时, 数据是响应式的 , 当数据更改时, 对应的视觉效果 也会一起更改 !

当我们需要显示 data 数据时, 如何操作:

1.  使用插值表达式 

2.  v-text属性="data中的数据key"

3.  v-html属性="data中的数据key"


案例:

    <div id="x">
        <div>{{msg1}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg3"></div>
    </div>
    <script>
        var v= new Vue({
            el:"#x",
            data:{
                msg1:"<h3>一二三四五<h3>",
                msg2:"<h3>上山打老虎</h3>",
                msg3:"<h3>哈哈哈哈哈</h3>"
            }
        });
    </script>

v-text与v-html区别:
    v-text  :   不会解析HTML内容, 而是直接显示data中的数据,会显示特殊的<>符号
    v-html  :   会将data中的数据, 先进行html标签解析, 再显示效果

模板指令: 事件指令

格式1.
    步骤1.    在dom元素中, 添加属性:v-on:事件名="函数名称"
    步骤2.    在Vue对象中, 添加属性methods, methods是JSON对象,包含一个个的键值对, 值为function  

格式2.
    属于格式1的简写方式:
    将格式1中的步骤1修改为:   在dom元素中, 添加属性:@事件名="函数名称" 即可 !

案例1:
    <div id="x">
        <button v-on:click="x1">{{msg}}</button><button v-on:click="x2">{{msg}}</button>
    </div>
    <script>
        new Vue({
            el:"#x",
            data:{
                msg:0
            },methods:{
                x1:function(){this.msg++;},
                x2:function(){this.msg--;}
            }
        });
    </script>

案例2:
    <div id="x"  @click="x1" v-html="msg"></div>
    <script>
        new Vue({
            el:"#x",
            data:{
                msg:'<img src="images/20.jpg" style="width:200px">'
            },methods:{
                x1:function(){
                    this.msg = '<img src="images/20.jpg" style="width:700px">';
                }
            }
        });
    </script>

模板指令 - 属性绑定

语法格式1:
    使用 v-bind:属性名称="data中的key"

语法格式2:  
    语法1的简写,  使用 :属性名称="data中的key"   

案例:

    <div id="x">
        <img v-bind:src="img"  @click="x1">
    </div>
    <script>
        new Vue({
            el:"#x",
            data:{
                img:"images/21.jpg"
            },
            methods:{
                x1:function(){
                    this.img="images/22.jpg"
                }
            }
        });
    </script>

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

具体语法实现, 与普通属性绑定基本一致:
    v-model="data中的数据key"

案例:

    <div id="x">
        <input v-model="msg">
        <div>{{msg}}</div>
    </div>


    <script>
        var v = new Vue({
            el:"#x",
            data:{
                msg:"一二三四五"
            }
        });

    </script>

Vue的计算属性

表示一个属性, 是通过其他多个属性计算得到的 !

格式:
    computed:{
        计算属性名1:function(){
            //运算逻辑
            return 属性值;
        },
        计算属性名2:function(){
            //运算逻辑
            return 属性值;
        }
        ...
    }

特点:
    如果参与计算的多个属性 没有发生改变, 则每次使用的计算结果 都为 缓存结果 !
    如果参与计算的属性 发生了改变, 则每次使用 都会重新运算 !

案例:
    <div id="x">
        <input v-model="firstName" placeholder="请输入姓">
        <input v-model="lastName" placeholder="请输入名">
        <h3>{{fullName1}}</h3>
        <h3>{{fullName2}}</h3>
    </div>
    <script>
        var v=new Vue({
            el:"#x",
            data:{
                firstName:"",
                lastName:""
            },
            computed:{
                fullName1:function (){
                    return this.firstName+this.lastName;
                },
                fullName2:function (){
                    return this.firstName+" "+this.lastName;
                }
            }
        });
    </script>

侦听器

用于侦听data中属性, 或 计算属性的变化. 

侦听器表示一个个等待执行的代码块, 当被侦听的属性发生改变时, 则代码块自动执行 !

格式:

    在vue实例中 添加属性: 
        watch:{
            侦听的属性名1:function(){},
            侦听的属性名2:function(){},
            ...
        }


案例:

    <div id="x">
        <input v-model="firstName" placeholder="请输入姓">
        <input v-model="lastName" placeholder="请输入名">
        <h3>{{fullName1}}</h3>
        <h3>{{fullName2}}</h3>
        <h3>姓被改变{{count1}}次 ,名被改变{{count2}}次, 全名1被改变{{count3}}次, 全名2被改变{{count4}}次</h3>
    </div>
    <script>
        var v=new Vue({
            el:"#x",
            data:{
                firstName:"",
                lastName:"",
                count1:0,
                count2:0,
                count3:0,
                count4:0
            },
            computed:{
                fullName1:function (){
                    return this.firstName+this.lastName;
                },
                fullName2:function (){
                    return this.firstName+" "+this.lastName;
                }
            },
            watch:{
                firstName:function(){
                    count1++;
                },
                lastName:function(){
                    count2++;
                },
                fullName1:function(){
                    count3++;
                },
                fullName2:function(){
                    count4++;
                }
            }
        });
    </script>

模板指令 v-if

作用: 用于判断是否加载元素 , 如果结果为true , 则加载此元素 , 如果结果为false 则不加载此元素

常用在网页权限管理页面: 

    语法格式:
        给元素添加属性: v-if="条件表达式|data中的key" 
        (可以直接编写true或false , 不过没有意义 !)

案例:

    <div id="x">
        <img src="images/24.jpg" v-if="flag">
        <button @click="x1">显示</button> 
        <button @click="x2">隐藏</button>
    </div>
    <script>
        var v=new Vue({
            el:"#x",
            data:{
                flag:true
            },
            methods:{
                x1:function(){
                    this.flag=true;
                },
                x2:function(){
                    this.flag=false;
                }
            }
        });
    </script>

模板指令 v-show

作用: 用于判断是否显示元素 , 如果结果为true , 则显示此元素 , 如果结果为false 则不隐藏此元素


常用在网页权限管理页面: 

    语法格式:
        给元素添加属性: v-show="条件表达式|data中的key" 
        (可以直接编写true或false , 不过没有意义 !)
案例:

    <div id="x">
        <img src="images/24.jpg" v-show="flag">
        <button @click="x1">显示</button> 
        <button @click="x2">隐藏</button>
    </div>
    <script>
        var v=new Vue({
            el:"#x",
            data:{
                flag:true
            },
            methods:{
                x1:function(){
                    this.flag=true;
                },
                x2:function(){
                    this.flag=false;
                }
            }
        });
    </script>

v-if 与 v-show的区别:

v-if    :   控制的是元素是否加载  , 当为false时, 直接从网页中移除元素 !
v-show  :   控制的是元素是否显示  , 无论true或false,元素都会加载, 只是false时,元素display:none!

模板指令 v-for

作用:
    用于在网页中,循环展示数组数据 !

语法格式1:
        给元素添加属性:    v-for="item of 数组名"  , 注意数组名为 data中的数据key , 值为数组

语法格式2:
        给元素添加属性:    v-for="(item,index) of 数组名"  , 注意数组名为 data中的数据key , 值为数组

在上述的两种语法格式中, 
    item    :   表示每次循环时得到的数据 ,在标签中 可以通过插值表达式 显示 {{item}}
    index   :   表示每次循环时数据的索引 ,在标签中 可以通过插值表达式 显示 {{index}}

案例:

    <div id="x">
        <ul>
            <li v-for="item of list">{{item}}</li>
        </ul>
    </div>

    <script>
        var arr = ["床前明月光","玻璃好上霜","床上及时擦","整不好得脏","哈哈哈哈哈","嘿嘿嘿嘿嘿"];
        var v=new Vue({
            el:"#x",
            data:{
                list:arr
            }
        });
    </script>