模态框

有时候网页会有一种效果是这样的。

当我们给博文点赞时候会出现一个登陆框，当我们鼠标点击阴影区域这个登陆框会消失。实现这样一个效果。

废话不说，先写样式呗！

<style>
    #model-box{
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .2);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #center{
      width: 300px;
      height: 150px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    #center div{
      text-align: center;
    }
  </style>
   <div id="app">
    <button @click="like">点赞</button>
    <!-- .self：事件必须准确在自身触发才会执行事件处理函数。 -->
    <div id="model-box" v-show="isShow" @click.self="hideModel">
      <div id="center">
        <div>用户名：<input type="text"></div>
        <!-- 可以在键盘事件中，使用按键修饰符， .按钮对应的code码 -->
        <div>密&nbsp;&nbsp;&nbsp;码：<input type="password" @keydown.13="login"></div>
        <!--  -->
        <div><button>登录</button></div>
      </div>
    </div>
  </div>
  <script src="vue.js"></script>

效果图是这样的，原谅我的美学思维😂

接下来上vue代码了

 new Vue({
      //vue的控制区域  告诉vue哪一块区域要作为模板解析
      el:"#app",
      //vue的数据  为模板提供数据
      data:{
        //需要一个数据，来控制 模态框的显示和隐藏
        isShow:false
      },
      // 方法
      methods:{
        like(){
          //将isShow的值变为true，则模态框就会显示
          this.isShow = true;
        },
        hideModel(){
          //点击登录窗口以外的区域，隐藏 模态框
          this.isShow = false;
        },
        login(event){
            alert("登录")
        }
      }
    })

最终效果

书籍的排序

需求：

• 将data中的书籍全部显示在页面上。
• 点击升序按钮，按照月票的数量升序排列
• 点击降序按钮，按照月票的数量降序排列

写结构和样式

 <div id="app">
    <button @click="sortTicket(1)">按月票升序</button>
    <button @click="sortTicket(2)">按月票降序</button>
    <p v-for="book in books">书名：{{book.name}}，月票：{{book.ticket}}</p>
  </div>
  <script src="vue.js"></script>

Vue代码

  new Vue({
      // 监听app区域
      el:"#app",
      // 数据
      data:{
        books:[
          {id:1,name:"明克街13号",ticket:152},
          {id:2,name:"人族镇守使",ticket:100},
          {id:3,name:"星门",ticket:210},
          {id:4,name:"重生之似水流年",ticket:175},
          {id:5,name:"我的云养女友",ticket:972}
        ]
      },
      // 方法
      methods:{
        sortTicket(type){
          //根据type的值来决定排序的方式
          if (type==1) {
            //升序（sort方法默认是2>11,所以我们用一个表达式来进行排序）
            this.books.sort((a,b)=>{
              return a.ticket-b.ticket;
            })
          } else if(type == 2){
            //降序
            this.books.sort((a,b)=>{
              return b.ticket-a.ticket;
            })
          }
        }
      }
    })

效果

第一天总结

• 常用的指令
• 事件的操作