0
点赞
收藏
分享

微信扫一扫

快速入门Vue

钵仔糕的波波仔 2022-04-04 阅读 105
vue.js

文章目录

Vue基础

Vue简介

  1. JavaScript框架
  2. 简化DOM操作
  3. 响应式的数据驱动

第一个Vue程序

Vue文档官网地址

  1. 导入开发版本的Vue.js
  2. 创建Vue实例对象，设置el属性和data属性
  3. 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue基础</title>
</head>
<body>
  <div id="app">
    {{message}}
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
  </script>
</body>
</html>

在这里插入图片描述

el:挂载点

el使用来设置Vue实例挂载（管理）的元素

Vue实例的作用范围是什么呢？

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

是否可以使用其他的选择器？

可以使用其他的，但是建议使用id选择器，一般只有一个

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

可以使用其他的双标签，不能使用HTML和body，建议使用div来挂载

data:数据对象

  1. Vue中用到的数据定义在data中
  2. data中可以写复杂类型的数据
  3. 渲染复杂类型数据时，遵守js的语法即可
<body>
  <div id="app">
    {{message}}
    <p>{{ star.name}} <span>{{star.phone}}</span></p>
    <ul>
      <li>address[0]</li>
    </ul>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!',
          star : {
            name : 'zhangsan',
            phone : 177777777
          },
          address: ['北京','上海','深圳']
        }
      })
  </script>
</body>

在这里插入图片描述

本地应用

  1. 通过Vue实现常见的网页效果
  2. 学习Vue指令，以案例巩固知识点
  3. Vue指令指的是 以v-开头的一组特殊语法

内容绑定、事件绑定

v-text

设置标签的文本值，内部也支持写表达式
在这里插入图片描述

v-html

设置标签的innderHTML
在这里插入图片描述v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

v-on基础

为元素绑定事件
可以使用v-on:或者@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

<body>
  <div id="app">
    <input type="button" @click="doStudy" value="v-on">
    <input type="button" value="双击事件" @dblclick="doStudy">

    <h2 @click="changeFood">{{food}}</h2>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue({
        el: '#app',
        data: {
          food:'西蓝花'
        },
        methods: {
          doStudy() {
            alert('STUDY')
          },
          changeFood() {
            this.food += 'just so so'
          }
        },
      })
  </script>
</body>

计数器

  1. data中定义数据：比如num
  2. methods中添加两个方法：add()递增、sub()递减
  3. 使用v-text将num设置给span标签
  4. 使用v-on将add，sub分别绑定给+、-两个按钮
  5. 累加的逻辑：小于10累加，否则提示
  6. 递减的逻辑：大于0递减，否则提示
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #app {
        width: 480px;
        height: 100px;
        margin: 200px auto;
      }
      .input-num {
        margin-top: 20px;
        height: 100%;
        display: flex;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 4px black;
      }
      .input-num button {
        width: 150px;
        height: 100%;
        font-size: 40px;
        color: gray;
        cursor: pointer;
        border: none;
        outline: none;
      }
      .input-num span {
        height: 100%;
        font-size: 40px;
        flex: 1;
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 计数器 -->
      <div class="input-num">
        <button @click="sub">-</button>
        <span v-text="num"></span>
        <button @click="add">+</button>
      </div>
    </div>
  </body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
  // 创建Vue实例
  var app = new Vue({
    el: "#app",
    data: {
      num: 1
    },
    methods: {
      add: function() {
        if(this.num < 10) {
          this.num++
        }else {
          alert('别点了，最大了')
        }
      },
      sub: function() {
        if(this.num > 0) {
          this.num--;
        }else {
          alert('最小啦')
        }
      }
    }
  });
</script>

显示切换、属性绑定

v-show

根据表达式的真假，切换元素的显示与隐藏
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true显示，false隐藏
数据改变之后，对应元素的显示状态会同步更新

<body>
    <div id="app">
      <input type="button" value="切换显示状态" @click="changeIsShow">
      <input type="button" value="累加年龄" @click="addAge">
      <img v-show="isShow" src="./img/monkey.gif" alt="">
      <img v-show="age>=18" src="./img/monkey.gif" alt="">
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <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(){
            this.isShow = !this.isShow;
          },
          addAge:function(){
            this.age++;
          }
        },
      })
    </script>
  </body>

v-if

根据表达式的真假切换元素的显示状态
本质是通过操作dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
频繁的切换v-show，反之使用v-if，前者的切换消耗小

v-bind

设置元素的属性比如src、title、class
v-bind指令的作用是：为元素绑定属性
完整写法：v-bind:属性名
简写的话可以直接省略v-bind,只保留:属性名
需要动态的增删class建议使用对象的方式

图片切换

  1. 定义图片数组
  2. 添加图片索引
  3. 绑定src属性 v-bind
  4. 图片切换逻辑 v-on
  5. 显示状态切换 v-show

html部分：

<body>
  <div id="mask">
    <div class="center">
      <h2 class="title">
        图片切换
      </h2>
      <!-- 图片 -->
      <img :src="imgArr[index]" alt="" />
      <!-- 左箭头 -->
      <!-- <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
        <img src="./img/prev.png" alt="" />
      </a> -->
      <a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left">
        <img src="./img/prev.png" alt="" />
      </a>
      <!-- 右箭头 -->
      <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
        <img src="./img/next.png" alt="" />
      </a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: "#mask",
      data: {
        imgArr: [
          "./img/00.png",
          "./img/01.png",
          "./img/02.jpg",
          "./img/03.png",
          "./img/04.png",
          "./img/05.png",
          "./img/06.png",
          "./img/07.png",
          "./img/08.png",

        ],
        index: 0
      },
      methods: {
        prev: function () {
          this.index--;
        },
        next: function () {
          this.index++;
        }
      },
    })
  </script>
</body>

style部分

* {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    #mask {
      width: 100%;
      height: 100%;
    }

    #mask {
      background-color: #c9c9c9;
      position: relative;
    }

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

    #mask .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;
    }

    #mask .center .title img {
      height: 40px;
      margin-right: 10px;
    }

    #mask .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;
    }

    #mask .center>img {
      display: block;
      width: 700px;
      height: 458px;
    }

    #mask .center a {
      text-decoration: none;
      width: 45px;
      height: 100px;
      position: absolute;
      top: 179px;
      vertical-align: middle;
      opacity: 0.5;
    }

    #mask .center a :hover {
      opacity: 0.8;
    }

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

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

实现效果

列表循环、表单元素绑定

v-for

根据数据生成列表结构
数组经常和v-for结合使用
语法是{item，index}in 数据
item和index可以结合其他指令使用

 <div id="app">
    <input type="button" @click="add" value="添加">
    <input type="button" @click="remove" value="移除">
    <ul>
      <li v-for="(item, index) in arr">{{index+1}}-{{item}}</li>
    </ul>
  </div>
  
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el:'#app',
      data: {
        arr:[1,2,3,4,5]
      },
      methods:{
        add() {
          this.arr.push('STUDY')
        },
        remove() {
          this.arr.pop()
        }
      }
    })
  </script>

v-on补充

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

<div id="app">
    <input type="button" @click="doIt('keep','study')" value="按钮">
    <input type="text" @keyup.enter="sayHi">
  </div>
  
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el:'#app',
      methods:{
        doIt(p1,p2) {
          alert(p1+p2)
        },
        sayHi() {
          alert('你好呀')
        }
      }
    })
  </script>

v-model

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

<div id="app">
    <input type="button" @click="updateMsg" value="修改">
    <input type="text" v-model="message" @keyup.enter="doIt" size="30">
    <h3>{{message}}</h3>
  </div>
  
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el:'#app',
      data:{
        message:'选择一条路，然后就这样走下去'
      },
      methods:{
       doIt()  {
         alert('按下enter')
       },
       updateMsg() {
         this.message = 'keep doing'
         alert('修改了message')
       }
      }
    })
  </script>

记事本

新增

  1. 生成列表结构 v-for 数组
  2. 获取用户输入 v-model
  3. 回车，新增数据 v-on .enter添加数据

删除

点击删除指定内容 v-on splice 索引

数据改变和数据绑定的元素通过改变
事件的自定义参数
splice方法的作用

统计

统计信息的个数 数组的长度 list.length

清空

点击清除所有信息 v-on 清空数组

隐藏

没有数据时，隐藏元素 v-show v-if 数组非空

实现代码
<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" v-show="list.length">
      <span class="todo-count" >
        <strong>{{list.length}}</strong> items left
      </span>
      <button class="clear-completed" @click="clear">
        Clear
      </button>
    </footer>
  </section>
  
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <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);
          this.inputValue = ''
        },
        remove: function (index) {
          this.list.splice(index, 1);
        },

        clear() {
          this.list = []
        }
      },
    })
  </script>
</body>

css

<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;
      /* Mobile Safari */
      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;
      /* auto, since non-WebKit browsers doesn't support input styling */
      height: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      border: none;
      /* Mobile Safari */
      -webkit-appearance: none;
      appearance: none;
    }

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

    .todo-list li .toggle+label {
      /*
		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
      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;
    }

    /*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox
*/
    @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>
演示

网络应用

axios的基本使用

在这里插入图片描述在这里插入图片描述

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
            .then(function (response) {
                console.log(response);
              },function(err){
                  console.log(err);
              })
        }
        /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg",{username:"zhangsan"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
              })
          }

    </script>
</body>

在这里插入图片描述
文档传送门

axios+vue

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p> {{ joke }}</p>
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods: {
                getJoke:function(){
                    // console.log(this.joke);
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        // console.log(response)
                        console.log(response.data);
                        // console.log(this.joke);
                        that.joke = response.data;
                    },function (err) {  })
                }
            },
        })

    </script>
</body>

天知道

查询天气的应用
功能：回车查询、点击查询
回车查询
在这里插入图片描述在这里插入图片描述

演示

代码

<body>
  <div class="wrap" id="app">
    <div class="search_form">
      <div class="logo"><img src="img/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" @click="searchWeather">
          搜 索
        </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>
    <ul class="weather_list">
      <li v-for="item in weatherList">
        <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
        <div class="info_temp">
          <b>{{ item.low }}</b>
          ~
          <b>{{ item.high }}</b>
        </div>
        <div class="info_date"><span>{{ item.date }}</span></div>
      </li>
    </ul>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 自己的js -->
  <script>
    /*
  请求地址:http://wthrcdn.etouch.cn/weather_mini
  请求方法:get
  请求参数:city(城市名)
  响应内容:天气信息

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
    var app = new Vue({
      el: "#app",
      data: {
        city: '',
        weatherList: []
      },
      methods: {
        searchWeather: function () {
          //  console.log('天气查询');
          //  console.log(this.city);
          // 调用接口
          // 保存this
          var that = this;
          axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
            .then(function (response) {
              // console.log(response);
              console.log(response.data.data.forecast);
              that.weatherList = response.data.data.forecast
            })
            .catch(function (err) { 
              console.log(err)
            })
        },
        changeCity(city) {
          this.city = city
          this.searchWeather()
        }
      },
    })
  </script>
</body>

  <style>
    body,
    ul,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
      padding: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 100%;
      font-weight: normal;
    }

    a {
      text-decoration: none;
    }

    ul {
      list-style: none;
    }

    img {
      border: 0px;
    }

    /* 清除浮动，解决margin-top塌陷 */
    .clearfix:before,
    .clearfix:after {
      content: '';
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      zoom: 1;
    }

    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    body {
      font-family: 'Microsoft YaHei';
    }

    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
      /* background:#8fd5f4; */
      /* background: linear-gradient(#6bc6ee, #fff); */
      background: #fff;

    }

    .search_form {
      width: 640px;
      margin: 100px auto 0;
    }

    .logo img {
      display: block;
      margin: 0 auto;
    }

    .form_group {
      width: 640px;
      height: 40px;
      margin-top: 45px;
    }

    .input_txt {
      width: 538px;
      height: 38px;
      padding: 0px;
      float: left;
      border: 1px solid #41a1cb;
      outline: none;
      text-indent: 10px;
    }

    .input_sub {
      width: 100px;
      height: 40px;
      border: 0px;
      float: left;
      background-color: #41a1cb;
      color: #fff;
      font-size: 16px;
      outline: none;
      cursor: pointer;
      position: relative;
    }

    .input_sub.loading::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('../img/loading.gif');
    }

    .hotkey {
      margin: 3px 0 0 2px;
    }

    .hotkey a {
      font-size: 14px;
      color: #666;
      padding-right: 15px;
    }

    .weather_list {
      height: 200px;
      text-align: center;
      margin-top: 50px;
      font-size: 0px;
    }

    .weather_list li {
      display: inline-block;
      width: 140px;
      height: 200px;
      padding: 0 10px;
      overflow: hidden;
      position: relative;
      background: url('../img/line.png') right center no-repeat;
      background-size: 1px 130px;
    }

    .weather_list li:last-child {
      background: none;
    }

    /* .weather_list .col02{
    background-color: rgba(65, 165, 158, 0.8);
}
.weather_list .col03{
    background-color: rgba(94, 194, 237, 0.8);
}
.weather_list .col04{
    background-color: rgba(69, 137, 176, 0.8);
}
.weather_list .col05{
    background-color: rgba(118, 113, 223, 0.8);
} */


    .info_date {
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #999;
      font-size: 14px;
      left: 0px;
      bottom: 0px;
      margin-top: 15px;
    }

    .info_date b {
      float: left;
      margin-left: 15px;
    }

    .info_type span {
      color: #fda252;
      font-size: 30px;
      line-height: 80px;
    }

    .info_temp {
      font-size: 14px;
      color: #fda252;
    }

    .info_temp b {
      font-size: 13px;
    }

    .tem .iconfont {
      font-size: 50px;
    }
  </style>

综合应用

音乐播放器

歌曲搜索

在这里插入图片描述

歌曲播放

在这里插入图片描述

歌曲封面

在这里插入图片描述

歌曲评论

在这里插入图片描述

播放动画

在这里插入图片描述

mv播放

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/index.css">
</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" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" />
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper' ref='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>
                <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i>
              </span>
            </li>

          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlay}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate" />
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper" ref='comment_wrapper'>
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>

            <dl v-for="item in hotComments">
              <dt>
                <img :src="item.user.avatarUrl" alt="" />
              </dt>
              <dd class="name">{{item.user.nickname}}</dd>
              <dd class="detail">
                {{item.content}}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con" v-show="showVideo">
        <video ref='video' :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="closeMv"></div>
      </div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript">
    // 设置axios的基地址
    axios.defaults.baseURL = 'https://autumnfish.cn';
    // axios.defaults.baseURL = 'http://localhost:3000';



    // 实例化vue
    var app = new Vue({
      el: "#player",
      data: {
        // 搜索关键字
        query: '',
        // 歌曲列表
        musicList: [],
        // 歌曲url
        musicUrl: '',
        // 是否正在播放
        isPlay: false,
        // 歌曲热门评论
        hotComments: [],
        // 歌曲封面地址
        coverUrl: '',
        // 显示视频播放
        showVideo: false,
        // mv地址
        mvUrl: ''
      },
      // 方法
      methods: {
        // 搜索歌曲
        searchMusic() {
          if (this.query == 0) {
            return
          }
          axios.get('/search?keywords=' + this.query).then(response => {
            // 保存内容
            this.musicList = response.data.result.songs;

          })

          // 清空搜索
          this.query = ''
        },
        // 播放歌曲
        playMusic(musicId) {
          // 获取歌曲url
          axios.get('/song/url?id=' + musicId).then(response => {
            // 保存歌曲url地址
            this.musicUrl = response.data.data[0].url
          })
          // 获取歌曲热门评论
          axios.get('/comment/hot?type=0&id=' + musicId).then(response => {
            // console.log(response)
            // 保存热门评论
            this.hotComments = response.data.hotComments

          })
          // 获取歌曲封面
          axios.get('/song/detail?ids=' + musicId).then(response => {
            // console.log(response)
            // 设置封面
            this.coverUrl = response.data.songs[0].al.picUrl
          })

        },
        // audio的play事件
        play() {
          this.isPlay = true
          // 清空mv的信息
          this.mvUrl = ''
        },
        // audio的pause事件
        pause() {
          this.isPlay = false
        },
        // 播放mv
        playMv(vid) {
          if (vid) {
            this.showVideo = true;
            // 获取mv信息
            axios.get('/mv/url?id=' + vid).then(response => {
              // console.log(response)
              // 暂停歌曲播放
              this.$refs.audio.pause()
              // 获取mv地址
              this.mvUrl = response.data.data.url
            })
          }
        },
        // 关闭mv界面
        closeMv() {
          this.showVideo = false
          this.$refs.video.pause()
        },
        // 搜索历史记录中的歌曲
        historySearch(history) {
          this.query = history
          this.searchMusic()
          this.showHistory = false;
        }
      },

    })

  </script>
</body>

</html>


body,
ul,
dl,
dd {
  margin: 0px;
  padding: 0px;
}

.wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../images/bg.jpg") no-repeat;
  background-size: 100% 100%;
}

.play_wrap {
  width: 800px;
  height: 544px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -272px;
  /* background-color: #f9f9f9; */
}

.search_bar {
  height: 60px;
  background-color: #1eacda;
  border-top-left-radius: 4px;
  border-top-right-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;
  height: 435px;
  box-sizing: border-box;
  padding: 10px;
  list-style: none;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
}

.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:nth-child(odd) {
  background-color: rgba(240, 240, 240, 0.3);
}

.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;
}

演示

课程：黑马程序员vue前端基础教程-4个小时带你快速入门vue

举报

相关推荐

Vue快速入门

vue.jsjavascript前端

VUE-快速入门

快速入门vue数据vue.jsgithub

Vue-快速入门

web安全安全等保测评

如何快速入门 Vue 3

开发语言qtc++插件开发

Vue3快速入门

java开发语言

Vue.js快速入门

htmlvue.js数据

vue 快速入门 系列 —— 模板

htmljavascript生成器

vue 快速入门 系列 —— 初步认识 vue

htmljquery开发模式

vue 快速入门 系列 —— vue loader 扩展

ioscsshtml

vue 快速入门 系列 —— vue loader 下

css自定义html
0 条评论