vue学习

_NULLo

已于 2023-09-10 20:14:31 修改

阅读量65

点赞数

文章标签：前端

于 2023-09-08 21:37:27 首次发布

本文链接：https://blog.csdn.net/m0_73992162/article/details/132650709

版权

一、vue基础

el:挂载点

vue实例作用范围是什么

vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他选择器

可以，但建议使用id选择器

是否可以设置其他的dom元素

可以使用其他双标签，但不能使用HTML和BODY

data：数据对象

    <div id="app">
        {{ message }}
        {{school}}
        {{school.name}}{{campus[2]}}
        <h2>{{school.mobile}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好",
                school:{
                    name:"黑马程序员",
                    mobile:"400-168"
                },
                campus:["北京","深圳","上海"]
            }
        })
    </script>

vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js语法即可

二、本地应用

学习内容：
通过vue实现常见网页效果
学习vue指令，以案例巩固
vue指令指的是，以v-开头的一组特殊语法

v-text
v-html
v-on
v-show
v-if
v-bind
v-for
v-on补充
v-model

内容绑定、事件绑定
显示切换、属性绑定
列表循环、表单元素绑定

v-text

设置标签的文本值textContent

      <div id="app">
        <h2 v-text="message"></h2>
        <h2 v-text="message+'!'">深圳</h2>
        <h2>{{message}}</h2>
        <h2>{{message}}深圳</h2>
        <h2>{{message+"!"}}</h2>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员",
                info:"教研部"
            }
        })
    </script>

v-html

设置标签innerHTML

    <div id="app">
        <p v-text="content"></p>
        <p v-html="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content:"<a href='#'>黑马程序员</a>"
            }
        })
    </script>

v-html指令的作用是，设置元素的inner HTML
内容中有html结构会被解析为标签
v-text指令无论是什么内容，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

v-on

为元素绑定事件

    <div id="app">
        <input type="button" value="事件绑定" v-on:click="doIt">
        <input type="button" value="事件绑定" v-on:monseenter="doIt">
        <input type="button" value="事件绑定" v-on:dblclick="doIt">
        <input type="button" value="事件绑定" @dblclick="changeFood">
        <h2 @dblclick="changeFood">{{food}}</h2>
        <h2 @click="changeFood2">{{food}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"西兰花炒蛋"
            },
            methods:{
                doIt:function(){
                    alert("做It");
                },
                changeFood:function(){
                    console.log(this.food);
                },
                changeFood2:function(){
                    this.food+="好好吃！"
                }
            }
        })
    </script>

v-on指令的作用是为元素绑定事件
事件名不需要写on
指令v-on:可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据this.food

v-on补充

传递自定义参数，事件修饰符

    <div id="app">
        <input type="button" value="点击" v-on:click="doIt(666,'老铁')">
        <input type="button" @keyup.enter="sayHi"> <!--事件修饰符-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function(p1,p2){
                    alert("做It");
                    console.log(p1);
                    console.log(p2);
                }
            }
        })
    </script>

应用：计数器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
            background-color: #f1f1f1;
        }
        .count{
            height: 80px;
            width: 420px;
            border-radius: 5px;
            background-color: white;
            box-shadow:4px 4px 4px #adadad;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .left,.right{
            height: 100%;
            /* width: 140px; */
            flex:1;
            color:red;
            font-size:18px;
            font-weight:bold;
            border:none;
            display: inline-block;

        }
        .left{
            border-radius: 5px 0 0 5px;
        }
        .right{
            border-radius: 0 5px 5px 0;
        }
        span{
            display: flex;
            align-items: center;
            justify-content: center;
            /* display:inline-block; */
            width: 140px;
            height: 100%;
            font-size:22px;
            /* text-align:center; */
        }
    </style>
</head>
<body>

    <div class="count" id="app">
        <button class="left" @click="sub">-</button>
        <span>{{num}}</span>
        <button class="right" @click="add">+</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods:{
                sub:function(){
                    if(this.num > 0){
                        // this.num-=1;
                        this.num--;
                    }else{
                        alert("不能再小了");
                    }
                },
                add:function(){
                    if(this.num < 10){
                        // this.num+=1;
                        this.num++;
                    }else{
                        alert("不能再大了");
                    }
                }

            }
        })
    </script>
</body>
</html>

v-show

根据表达式的真假，切换元素显示与隐藏

    <div id="app">
        <input type="button" @click="changeIsShow" value="点击我">
        <img src="用户1.jpg" alt="" v-show="isShow">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:17
            },
            methods:{
                changeIsShow:function(){    
                    if(this.age > 18){
                        this.isShow=!this.isShow;
                    }else{
                        this.age++;
                    }
                }
            }
        })
    </script>

v-show指令操纵display样式来控制元素显示隐藏

v-if

根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

与v-show相似,略

表达式值为true，元素存在于dom树中，为false时，从dom 树中移除
频繁切换用v-show，反之v-if，前者的切换消耗小

v-bind

设置元素属性（比如src,title,class)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle">
        <br>
        <img :src="imgSrc" alt="" :class="isActive?'active':''"  @click="toggleActive">
        <img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"用户1.jpg",
                imgTitle:"用户头像",
                isActive:false
            },
            methods:{
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>
</html>

v-bind指令的作用是：为元素绑定属性
完整写法是v-bind:属性名
简写是:属性名
需要动态的增删class建议使用对象的方式

切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,
        body,
        #app{
            width: 100%;
            height: 100%;

        }
        #app{
            background-color: #c9c9c9;
            position:relative;
        }
        #app .center{
            position:absolute;
            background-color: #fff;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            padding:10px;
        }

        #app .center .title{
            position:absolute;
            display:flex;
            align-items:center;
            height: 56px;
            top:-61px;
            left:0;
            padding:5px;
            padding-left: 10px;
            padding-bottom: 0;
            color: rgba(175, 47, 47, 0.8);
            font-size: 26px;
            font-weight: normal;
            background-color: white;
            padding-right: 50px;
            z-index: 2;
        }
        #app .center .title img {
            height: 40px;
            margin-right: 10px;
        }
        #app .center .title::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border: 65px solid;
            border-color: transparent transparent white;
            top: -65px;
            right: -65px;
            z-index: 1;
        }
        .center{
            width: 700px;
            height: 458px;
        }
        #app .center > img {
            display: block;
            width: 700px;
            height: 458px;
        }
        #app .center button{
            /* text-decoration: none; */
            width: 45px;
            height: 100px;
            position: absolute;
            top: 179px;
            vertical-align: middle;
            opacity: 0.5;
        }
        #app .center button :hover {
            opacity: 0.8;
        }

        #app .center .left {
            left: 15px;
            text-align: left;
            padding-right: 10px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        #app .center .right {
            right: 15px;
            text-align: right;
            padding-left: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="center">
            <h2 class="title">
                <img src="logo3.jpg" alt="">
                深圳创维校区环境
            </h2>
            <div class="center">
                <img :src="imgSrc[i]" alt="">
                <button class="left" @click="prev" v-if="i!=0"> < </button>
                <button class="right" @click="next" v-if="i<imgSrc.length-1"> > </button>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                i:0,
                imgSrc:["agan.webp","aoman.webp","bawang.webp","bianfu.webp"]
            },
            methods:{
                prev:function(){
                    this.i--;
                },
                next:function(){
                    this.i++;
                }
            }
        })
    </script>
</body>
</html>

v-for

根据数据生成列表结构
v-for指令将作为模板的标签及标签内的所有内容根据数据个数拷贝若干份

    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="item in arr">
                黑马程序员校区：{{item}}
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}黑马程序员校区：{{item}}
            </li>
        </ul>
        <h2 v-for="item in vegetable" :title="item.name">{{item.name}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州","深圳"],
                vegetable:[
                    {name:"西兰花炒蛋"},
                    {name:"蛋炒西兰花"}
                ]/*对象数组*/
            },
            methods:{
                add:function(){
                    this.vegetable.push({name:"花菜炒蛋"})
                },
                remove:function(){
                    this.vegetable.shift();
                }
            }
        })
    </script>

数组经常和v-for结合使用
语法是(item,index) in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

v-model

获取和设置表单元素的值（双向数据绑定）

    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            },
            methods:{
                getM:function(){
                    alert(this.message);

                },
                setM:function(){
                    this.message="kudingyu";
                }
            }
        })
    </script>

便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<->表单元素的值

小黑记事本

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>小黑记事本</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }
    body {
      background: #fff;
    }
    button {
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      font-size: 100%;
      vertical-align: baseline;
      font-family: inherit;
      font-weight: inherit;
      color: inherit;
      -webkit-appearance: none;
      appearance: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
      line-height: 1.4em;
      background: #f5f5f5;
      color: #4d4d4d;
      min-width: 230px;
      max-width: 550px;
      margin: 0 auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-weight: 300;
    }

    :focus {
      outline: 0;
    }

    .hidden {
      display: none;
    }

    #todoapp {
      background: #fff;
      margin: 180px 0 40px 0;
      position: relative;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
    }

    #todoapp input::-webkit-input-placeholder {
      font-style: italic;
      font-weight: 300;
      color: #e6e6e6;
    }

    #todoapp input::-moz-placeholder {
      font-style: italic;
      font-weight: 300;
      color: #e6e6e6;
    }

    #todoapp input::input-placeholder {
      font-style: italic;
      font-weight: 300;
      color: gray;
    }

    #todoapp h1 {
      position: absolute;
      top: -160px;
      width: 100%;
      font-size: 60px;
      font-weight: 100;
      text-align: center;
      color: rgba(175, 47, 47, .8);
      -webkit-text-rendering: optimizeLegibility;
      -moz-text-rendering: optimizeLegibility;
      text-rendering: optimizeLegibility;
    }

    .new-todo,
    .edit {
      position: relative;
      margin: 0;
      width: 100%;
      font-size: 24px;
      font-family: inherit;
      font-weight: inherit;
      line-height: 1.4em;
      border: 0;
      color: inherit;
      padding: 6px;
      border: 1px solid #999;
      box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .new-todo {
      padding: 16px;
      border: none;
      background: rgba(0, 0, 0, 0.003);
      box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
    }

    .main {
      position: relative;
      z-index: 2;
      border-top: 1px solid #e6e6e6;
    }

    .toggle-all {
      width: 1px;
      height: 1px;
      border: none;
      opacity: 0;
      position: absolute;
      right: 100%;
      bottom: 100%;
    }

    .toggle-all + label {
      width: 60px;
      height: 34px;
      font-size: 0;
      position: absolute;
      top: -52px;
      left: -13px;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    .toggle-all + label:before {
      content: "❯";
      font-size: 22px;
      color: #e6e6e6;
      padding: 10px 27px 10px 27px;
    }

    .toggle-all:checked + label:before {
      color: #737373;
    }

    .todo-list {
      margin: 0;
      padding: 0;
      list-style: none;
      max-height: 420px;
      overflow: auto;
    }

    .todo-list li {
      position: relative;
      font-size: 24px;
      border-bottom: 1px solid #ededed;
      height: 60px;
      box-sizing: border-box;
    }

    .todo-list li:last-child {
      border-bottom: none;
    }

    .todo-list .view .index {
      position: absolute;
      color: gray;
      left: 10px;
      top: 20px;
      font-size: 16px;
    }

    .todo-list li .toggle {
      text-align: center;
      width: 40px;
      height: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      border: none; 
      -webkit-appearance: none;
      appearance: none;
    }

    .todo-list li .toggle {
      opacity: 0;
    }

    .todo-list li .toggle + label {

      background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center left;
    }

    .todo-list li .toggle:checked + label {
      background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
    }

    .todo-list li label {
      word-break: break-all;
      padding: 15px 15px 15px 60px;
      display: block;
      line-height: 1.2;
      transition: color 0.4s;
    }

    .todo-list li.completed label {
      color: #d9d9d9;
      text-decoration: line-through;
    }

    .todo-list li .destroy {
      display: none;
      position: absolute;
      top: 0;
      right: 10px;
      bottom: 0;
      width: 40px;
      height: 40px;
      margin: auto 0;
      font-size: 30px;
      color: #cc9a9a;
      margin-bottom: 11px;
      transition: color 0.2s ease-out;
    }

    .todo-list li .destroy:hover {
      color: #af5b5e;
    }

    .todo-list li .destroy:after {
      content: "×";
    }

    .todo-list li:hover .destroy {
      display: block;
    }

    .todo-list li .edit {
      display: none;
    }

    .todo-list li.editing:last-child {
      margin-bottom: -1px;
    }

    .footer {
      color: #777;
      padding: 10px 15px;
      height: 20px;
      text-align: center;
      border-top: 1px solid #e6e6e6;
    }

    .footer:before {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 50px;
      overflow: hidden;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
        0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
        0 17px 2px -6px rgba(0, 0, 0, 0.2);
    }

    .todo-count {
      float: left;
      text-align: left;
    }

    .todo-count strong {
      font-weight: 300;
    }

    .filters {
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      right: 0;
      left: 0;
    }

    .filters li {
      display: inline;
    }

    .filters li a {
      color: inherit;
      margin: 3px;
      padding: 3px 7px;
      text-decoration: none;
      border: 1px solid transparent;
      border-radius: 3px;
    }

    .filters li a:hover {
      border-color: rgba(175, 47, 47, 0.1);
    }

    .filters li a.selected {
      border-color: rgba(175, 47, 47, 0.2);
    }

    .clear-completed,
    html .clear-completed:active {
      float: right;
      position: relative;
      line-height: 20px;
      text-decoration: none;
      cursor: pointer;
    }

    .clear-completed:hover {
      text-decoration: underline;
    }

    .info {
      margin: 50px auto 0;
      color: #bfbfbf;
      font-size: 15px;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
      text-align: center;
    }

    .info p {
      line-height: 1;
    }

    .info a {
      color: inherit;
      text-decoration: none;
      font-weight: 400;
    }

    .info a:hover {
      text-decoration: underline;
    }


    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      .toggle-all,
      .todo-list li .toggle {
        background: none;
      }

      .todo-list li .toggle {
        height: 40px;
      }
    }

    @media (max-width: 430px) {
      .footer {
        height: 50px;
      }

      .filters {
        bottom: 10px;
      }
    }

  </style>
</head>

<body>
  <!-- 主体区域 -->
  <section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>
      <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in list">
          <div class="view">
            <span class="index">{{ index+1 }}.</span>
            <label>{{ item }}</label>
            <button class="destroy" @click="remove(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer">
      <span class="todo-count" v-if="list.length!=0">
        <strong>{{ list.length }}</strong> items left
      </span>
      <button v-show="list.length!=0" class="clear-completed" @click="clear">
        Clear
      </button>
    </footer>
  </section>
  <!-- 底部 -->
  <footer class="info">
    <p>
      <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
    </p>
  </footer>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#todoapp",
      data: {
        list: ["写代码", "吃饭饭", "睡觉觉"],
        inputValue: "好好学习,天天向上"
      },
      methods: {
        add: function () {
          this.list.push(this.inputValue);
        },
        remove: function (index) {
          console.log("删除");
          console.log(index);
          this.list.splice(index, 1);
        },
        clear: function () {
          this.list = [];
        }
      },
    })
  </script>
</body>

</html>

三、网络应用

vue结合网络数据开发应用

axios

功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js></script>
//get请求
axios.get(地址？查询字符串).then(function(response){},function(err){})
//post请求
axios.post(地址).then(function(response){},function(err){})

网络应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function(){
                    var that=this;
                    axios.get("https://autumnfish.cn/api/joke/list?num=1").then(
                        function(response){
                            console.log(response);
                            console.log(response.data);
                            that.joke=response.data;
                        },function(error){
                            console.log(error);
                        }
                    )
                }
            }
        })
    </script>
</body>
</html>

天知道

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .warp{
            position:fixed;
            /* left:0;
            top:0; */
            width:100%;
            height: 100%;
        }
        .search_form{
            width: 640px;
            margin:100px auto 0;
        }
        /*img默认为行内元素*/
        .logo img{
            display:block;
            margin:0 auto;
        }
        .form_group{
            width: 640px;
            height: 40px;
            margin-top: 45px;
        }
        .input_txt{
            width: 538px;
            height: 38px;
            /* padding:0; */
            float:left;
            border:1px solid #41a1cb;
            outline:none;
            text-indent:10px;
        }
        .input_sub{
            background-color: #41a1cb;
            color:white;
            height: 40px;
            width: 100px;
            border:none;

            float:left;
            font-size:16px;
            outline:none;
            cursor:pointer;
            position:relative;
        }
        /**/
        .input_sub .loading::before{
            content:'';
            position:absolute;
            width: 100%;
            height: 100%;
            background: url('loading.png');
        }
        .hotkey{
            margin:3px 0 0 2px;
        }
        .hotkey a{
            font-size:14px;
            color:#666;
            padding-right:15px;
            text-decoration:none;
        }
        .weather{
            width: 100%;
            height: 200px;
            margin-top:50px;
            font-size:0px;
            text-align:center;
            /* position:relative; */
        }
        .info_date{
            /* position:absolute; */
            width: 100%;
            height: 40px;
            line-height: 40px;
            color:#999;
            font-size :14px;
            margin-top:15px;
        }
        .info_type span{
            color:#fda252;
            font-size:30px;
            line-height:80px;
        }
        .info_temp{
            color:#fda252;
            font-size:14px;
        }
        .info_temp p{
            font-size:13px;
        }
        .iconfont{
            font-size:50px;
        }
    </style>
</head>
<body>
    <div class="warp" id="app">
        <div class="search_form">
            <div class="logo">
                <img src="../logo.png" alt="logo">
            </div>
            <div class="form_group">
                <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气">
                <button class="input_sub">搜索</button>
            </div>
            <div class="hotkey">
                <a href="javascript:;" @click="changeCity('北京')">北京</a>
                <a href="javascript:;" @click="changeCity('上海')">上海</a>
                <a href="javascript:;" @click="changeCity('广州')">广州</a>
                <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
            </div>
            <div class="weather">
                <div class="info_type">
                    <span class="iconfont">{{wea}}</span>
                </div>
                <div class="info_temp">
                    <p v-text="tem_day"></p>
                    <p v-text="tem_night"></p> 
                </div>
                <div class="info_date">
                    <span>{{date}}</span>
                </div>
            </div>


        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    	var app = new Vue({
	    el:"#app",
	    data:{
	        city:'',
	        userObj:{
	            id:72679889,
	            appsecret:"J4UdzBFn",
	            version:"v61"
	        },
	        wea:'',
	        tem_day:'',
	        tem_night:'',
	        date:''
	    },
	    methods:{
	        searchWeather:function(){
	            var that = this;
	            // console.log('天气查询');
	            // console.log(this.city);
	            // http://wthrcdn.etouch.cn/weather_mini?city=
	            axios.get('https://www.yiketianqi.com/free/day?appid='
	            +this.userObj.id+'&appsecret='+this.userObj.appsecret+'&version='+this.userObj.version+'&city='+this.city)
	            .then(function(response){
	                // console.log(response.data.wea);
	                // console.log(response.data.tem_day);
	                // console.log(response.data.tem_night);
	                // console.log(response.data.date);
	                response.data.tem_day ="白天温度："+response.data.tem_day+"℃";
	                response.data.tem_night ="夜间温度："+response.data.tem_night+"℃";
	                that.wea = response.data.wea;
	                that.tem_day = response.data.tem_day;
	                that.tem_night = response.data.tem_night;
	                that.date = response.data.date;
	            })
	            .catch(function(err){})
	        },
	        changeCity:function(city){
	            this.city=city;
	            this.searchWeather();
	        }
	
	    }
	})
    </script>
</body>
</html>

悦听

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悦听player</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .wrap{
            height: 100%;
            width: 100%;
            position:fixed;
            background: url("./images/bg.jpg");
            background-size:100% 100%;
        }
        .play_wrap{
            width:800px;
            height: 544px;
            position:fixed;
            left:50%;
            top:50%;
            margin-left:-400px;
            margin-top:-272px;
        }
        .search_bar{
            height: 60px;
            background-color: #1eacda;
            border-top-left-radius:4px;
            border-top-left-radius:4px;
            display:flex;
            align-items:center;
            justify-content: space-between;
            position:relative;
            z-index:11;
        }
        .search_bar img{
            margin-left:23px;
        }
        .search_bar input{
            margin-right:23px;
            width:296px;
            height: 34px;
            border-radius:17px;
            border:0px;
            background:url("./images/zoom.png") 265px center no-repeat rgba(255,255,255,0.45);
            text-indent:15px;
            outline:none;
        }
        .center_con{
            height: 435px;
            background-color:rgba(255,255,255,0.5);
            display:flex;
            position:relative;

        }
        .song_wrapper{
            width: 200px;
            box-sizing:border-box;
            padding:10px;
            list-style:none;
            position:absolute;
            z-index:1;
            height: 100%;

        }
        .song_stretch{
            width: 600px;
        }
        .song_list{
            width: 100%;
            overflow-y:auto;
            overflow-x:hidden;
            height: 100%;
        }
        .song_list::-webkit-scrollbar{
            display:none;
        }
        .song_list li{
            font-size: 12px;
            color: #333;
            height: 40px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width: 580px;
            padding-left: 10px;
        }
        .song_list li a{
            display:block;
            width: 17px;
            height: 17px;
            background-image: url(images/play.png);
            background-size: 100%;
            margin-right:5px;
            box-sizing:border-box;
        }
        .song_list li b{
            font-weight: normal;
            width: 122px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .song_stretch .song_list li b {
            width: 200px;
        }

        .song_stretch .song_list li em {
            width: 150px;
        }

        .song_list li span {
            width: 23px;
            height: 17px;
            margin-right: 50px;
        }
        .song_list li span i {
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
            background: url("./images/table.png") left -48px no-repeat;
        }

        .song_list li em,
        .song_list li i {
            font-style: normal;
            width: 100px;
        }

        .player_con {
            width: 400px;
            height: 435px;
            position: absolute;
            left: 200px;
            top: 0px;
        }

        .player_con2 {
            width: 400px;
            height: 435px;
            position: absolute;
            left: 200px;
            top: 0px;
        }

        .player_con2 video {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 355px;
            height: 265px;
        }

        .disc {
            position: absolute;
            left: 73px;
            top: 60px;
            z-index: 9;
        }
        .cover {
            position: absolute;
            left: 125px;
            top: 112px;
            width: 150px;
            height: 150px;
            border-radius: 75px;
            z-index: 8;
        }
        .comment_wrapper {
            width: 180px;
            height: 435px;
            list-style: none;
            position: absolute;
            left: 600px;
            top: 0px;
            padding: 25px 10px;
        }
        .comment_wrapper .title {
            position: absolute;
            top: 0;
            margin-top: 10px;
        }
        .comment_wrapper .comment_list {
            overflow: auto;
            height: 410px;
        }
        .comment_wrapper .comment_list::-webkit-scrollbar {
            display: none;
        }
        .comment_wrapper dl {
            padding-top: 10px;
            padding-left: 55px;
            position: relative;
            margin-bottom: 20px;
        }

        .comment_wrapper dt {
            position: absolute;
            left: 4px;
            top: 10px;
        }

        .comment_wrapper dt img {
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }

        .comment_wrapper dd {
            font-size: 12px;
        }

        .comment_wrapper .name {
            font-weight: bold;
            color: #333;
            padding-top: 5px;
        }

        .comment_wrapper .detail {
            color: #666;
            margin-top: 5px;
            line-height: 18px;
        }
        .audio_con {
            height: 50px;
            background-color: #f1f3f4;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        .myaudio {
            width: 800px;
            height: 40px;
            margin-top: 5px;
            outline: none;
            background-color: #f1f3f4;
        }

        @keyframes Rotate {
            from {
                transform: rotateZ(0);
            }
            to {
                transform: rotateZ(360deg);
            }
        }

        .autoRotate {
            animation-name: Rotate;
            animation-iteration-count: infinite;
            animation-play-state: paused;
            animation-timing-function: linear;
            animation-duration: 5s;
        }

            .player_con.playing .disc,
            .player_con.playing .cover {
            animation-play-state: running;
        }

        .play_bar {
            position: absolute;
            left: 200px;
            top: -10px;
            z-index: 10;
            transform: rotate(-25deg);
            transform-origin: 12px 12px;
            transition: 1s;
        }
        .player_con.playing .play_bar {
            transform: rotate(0);
        }
        .search_history {
            position: absolute;
            width: 296px;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.3);
            list-style: none;
            right: 23px;
            top: 50px;
            box-sizing: border-box;
            padding: 10px 20px;
            border-radius: 17px;
        }
        .search_history li {
            line-height: 24px;
            font-size: 12px;
            cursor: pointer;
        }
        .switch_btn {
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
        }
        .right_line {
            position: absolute;
            left: 0;
            top: 0;
        }
        .video_con video {
            position: fixed;
            width: 800px;
            height: 546px;
            left: 50%;
            top: 50%;
            margin-top: -273px;
            transform: translateX(-50%);
            z-index: 990;
        }
        .video_con .mask {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 980;
            background-color: rgba(0, 0, 0, 0.8);
        }
        .video_con .shutoff {
            position: fixed;
            width: 40px;
            height: 40px;
            background: url("./images/shutoff.png") no-repeat;
            left: 50%;
            margin-left: 400px;
            margin-top: -273px;
            top: 50%;
            z-index: 995;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <div class="play_wrap" id="player">
            <div class="search_bar">
                <img src="images/player_title.png" alt="">
                <input type="text" @keyup.enter="searchMusic" v-model="query" class="player_search">
            </div> 
            <div class="center_con">
                <!-- 搜索歌曲列表 -->
                <div class="song_wrapper">
                    <ul class="song_list">
                        <li v-for="item in musicList">
                            <a href="javascript:;" @click="playMusic(item.id)"></a>
                            <b>{{item.name}}</b>
                            <span v-if="item.mvid!=0" @click="playMv(item.mvid)"><i></i></span>
                        </li>
                    </ul>
                    <img src="images/line.png" class="switch_btn" alt="">
                </div>
                <!-- 歌曲信息容器 -->
                <div class="player_con" :class="{playing:isPlaying}">
                    <img src="images/player_bar.png" class="play_bar" alt="">

                    <img src="images/disc.png" class="disc autoRotate" alt="">
                    <img :src="musicPic" class="cover autoRotate" alt="">
    
                </div>
                <!-- 评论容器 -->
                <div class="comment_wrapper">
                    <h4 class="title">热门留言</h4>
                    <div class="comment_list">
                        <dl v-for="item in hotComments">
                            <dt><img :src="item.user.avatarUrl" alt=""></dt>
                            <dd class="name" v-text="item.user.nickname"></dd>
                            <dd class="detail" v-text="item.content"></dd>
                        </dl>
                    </div>
                    <img src="images/line.png" class="right_line" alt="">
                </div>
            </div>
            <div class="audio_con">
                <audio ref="audio" @play="play" @pause="pause" v-bind:src="musicUrl" controls autoplay loop class="myaudio"></audio>
            </div>
            <div class="video_con" v-show="isShow" style="display:none;">
                <video :src="mvUrl" controls="controls"></video>
                <div class="mask" @click="hide"></div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
	    var app = new Vue({
	    el:"#player",
	    data:{
	        query:"",
	        musicList:[],
	        musicUrl:"",
	        musicPic:"",
	        hotComments:[],
	        isPlaying:false,
	        mvUrl:"",
	        //遮罩层的显示状态
	        isShow:false,
	    },
	    methods:{
	        searchMusic:function(){
	            var that = this;
	            axios.get("https://autumnfish.cn/search?keywords="+this.query)
	            .then(function(response){
	                console.log(response);
	                that.musicList = response.data.result.songs;
	                console.log(response.data.result.songs)
	            },function(err){}
	            );
	        },
	        playMusic:function(musicId){
	            var that = this;
	            // console.log(musicId);
	            axios.get("https://autumnfish.cn/song/url?id="+musicId)
	            .then(function(response){
	                // console.log(response);
	                // console.log(response.data.data[0].url);
	                that.musicUrl = response.data.data[0].url;
	            },function(err){})
	            //歌曲详情获取封面
	            axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
	            .then(function(response){
	                // console.log(response.data.songs[0].al.picUrl);
	                that.musicPic=response.data.songs[0].al.picUrl;
	            },function(err){})
	            //因为播放，换封面，评论同时发生，所以都写在一个里面
	            axios.get("https://autumnfish.cn/comment/hot?type="+0+"&id="+musicId)
	            .then(function(response){
	                // console.log(response);
	                // console.log(response.data.hotComments);
	                that.hotComments=response.data.hotComments;
	            },function(err){})
	        },
	        //歌曲开始播放
	        play:function(){
	            console.log("play");
	            this.isPlaying=true;
	        },
	        //歌曲暂停
	        pause:function(){
	            console.log("pause");
	            this.isPlaying=false;
	        },
	        playMv:function(mvid){
	            var that=this;
	            axios.get("https://autumnfish.cn/mv/url?id="+mvid)
	            .then(function(response){
	                // console.log(response);
	                //vedio播放mv
	                that.isShow=true;
	                that.mvUrl=response.data.data.url;
	            },function(err){})
	        },
	        //隐藏
	        hide:function(){
	            this.isShow=false;
	        }
	    },
	})
    </script>
</body>
</html>

_NULLo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue学习

一、vue基础el:挂载点vue实例作用范围是什么vue会管理el选项命中的元素及其内部的后代元素是否可以使用其他选择器可以，但建议使用id选择器是否可以设置其他的dom元素可以使用其他双标签，但不能使用HTML和BODYdata：数据对象 <div id="app"> {{ message }} {{school}} {{school.name}}{{campus[2]}} <h2>
复制链接

扫一扫