Vue

1、第一个Vue程序

1.1、导入开发版本的Vue.js

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

1.2、创建Vue实例对象，设置el属性和data属性

<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello Vue!"
        }
    })
</script>

1.3、使用简洁的模板语法把数据渲染到页面上

2、el挂载点

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

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

可以看到，实例的作用范围是选择器下面的所有的子元素

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

可以使用其他的选择器，但是建议使用id选择器

• id选择器
• class选择器
• 标签选择器

…

一般建议使用id选择器（唯一）

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

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

可以看到使用p标签和h1标签都是可行的，单标签不支持。

Vue不支持html和body标签上

3、data数据对象

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

4、本地应用

4.1、本地应用_介绍

Vue指令：以v-开头的一组特殊语法

• v-text
• v-html
• v-on
• v-show
• v-if
• v-bind
• v-for
• v-model

4.2、本地应用_v_text指令

设置标签的文本值

• v-text指令的作用是：设置标签的内容（textContent）
• 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
• 内部支持写表达式

<div id="app">
  <h2 v-text="message+'!'">gaozhong</h2>
  <h2 v-text="info+'!'">gaozhong</h2>
  <h2>{{message+"!"}}gaozhong</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  var app = new Vue({
    el:"#app",
    data:{
      message:"qyk",
      info:"hhr"
    }
  })
</script>

4.3、本地应用_v_html指令

设置标签的innerHTML

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

<div id="app">
  <p v-html="content"></p>
  <p v-text="content"></p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  //创建Vue实例
  var app = new Vue({
    el:"#app",
    data:{
      // content:"黑马程序员"
      content:"<a href='http://www.itheima.com'>黑马程序员</a>"
    }
  })
</script>

4.4、本地应用_v_on指令基础

为元素绑定事件

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

<div id="app">
  <input type="button" value="v-on指令" v-on:click="doIt">
  <input type="button" value="v-on简写" @click="doIt">
  <input type="button" value="双击事件" @dblclick="doIt"><!--双击事件，需要点击两次-->
  <h2 @click="changeFood">{{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);
        this.food += "好好吃！";
      }
    }
  })
</script>

4.5、本地应用_计数器

• 创建Vue实例时：el(挂载点)，data(数据)，methods(方法)
• v-on指令的作用是绑定事件，简写为@
• 方法中通过this，关键字获取data中的数据
• v-text指令的作用是：设置元素的文本值，简写为{{}}
• v-html指令的作用是：设置元素的innerHTML

<div id="app">
  <button @click="sub">
    -
  </button>
  <span>{{num}}</span>
  <button @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:1
    },
    methods:{
      add:function () {
        if(this.num < 10)
          this.num++;
        else
          alert("别点了，最大啦！");
      },
      sub:function () {
        if(this.num > 0)
          this.num--;
        else
          alert("别点啦，最小啦！")
      }
    }
  })
</script>

4.6、本地应用_v_show指令

根据表达值得真假，切换元素的显示和隐藏

• v-show指令的作用是：根据真假切换元素的显示状态
• 原理是修改元素的display，实现显示隐藏
• 指令后面的内容，最终都会解析为布尔值
• 值为true元素显示，值为false元素隐藏

<div id="app">
  <input type="button" value="切换显示" @click="changeIsShow">
  <input type="button" value="累加年龄" @click="addAge">
  <img v-show="isShow" src="./a.jpg" style="width: 300px;height: 500px"/>
  <img v-show="age>20" src="./a.jpg" style="width: 300px;height: 500px"/>
</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 () {
        this.isShow = !this.isShow;
      },
      addAge:function () {
        this.age++;
      }
    }
  })
</script>

4.6、本地应用_v_if指令

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

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

<div id="app">
  <input type="button" value="切换显示" @click="toggleIsShow">
  <p v-if="isShow">qykhhr</p>
  <p v-show="isShow">qykhhr- v-show修饰</p>
  <h2 v-if="temperature>35">热死了</h2>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el:"#app",
    data:{
      isShow:false,
      temperature:40,
    },
    methods:{
      toggleIsShow:function () {
        this.isShow = !this.isShow;
      }
    }
  })
</script>

4.6、本地应用_v_bind指令

设置元素的属性（比如：src，title，class）

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

<style>
  .active{
    border: 1px solid red;
  }
</style>
<body>
  <div id="app">
    <img v-bind:src="imgSrc" v-bind:title="imgTitle"><!--title属性就是鼠标悬停后显示的提示-->
    <br>
    <img :src="imgSrc" :title="imgTitle+'!!!'"
         :class="isActive?'active':''" @click="toggleActive">
    <br>
    <img :src="imgSrc" :title="imgTitle+'!!!'"
         :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:"https://cn.vuejs.org/images/logo.png",
        imgTitle:"Vue学习",
        isActive:false,
      },
      methods:{
        toggleActive:function () {
          this.isActive = !this.isActive;
        }
      }
    })
  </script>

4.6、本地应用_图片切换指令

• 列表数据使用数组保存
• v-bind指令可以设置元素属性，比如src
• v-show和v-if都可以切换元素的显示状态，频繁切换使用v-show

<div id="mask">
  <a href="javascript:void(0)">
    <input type="button" value="<<" v-show="index!=0" @click="prev"></input>
  </a>
<img :src="imgArr[index]" style="width: 300px;height: 500px;margin: auto">
<a href="javascript:void(0)">
  <input type="button" value=">>" v-show="index<imgArr.length-1" @click="next"></button>
</a>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  var app = new Vue({
    el:"#mask",
    data:{
      imgArr:[
        "./images/a.jpg" ,
        "./images/b.jpg" ,
        "./images/c.jpg" ,
        "./images/d.jpg" ,
        "./images/e.jpg" ,
        "./images/f.jpg" ,
        "./images/g.jpg" ,
        "./images/h.jpg" ,
        "./images/i.jpg" ,
        "./images/j.jpg"
      ],
      index:0,
    },
    methods:{
      prev:function () {
        this.index--;
      },
      next:function () {
        this.index++;
      }
    }

  })
</script>

4.6、本地应用_v_for指令

根据数据生成列表结构

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

<div id="app">
  <input type="button" value="添加数据" @click="add">
  <input type="button" value="移除数据" @click="remove">
  <ul>
    <li v-for="(item,index) in arr">{{index+1+"、"}}中国一线城市：{{item}}</li>
  </ul>
  <h2 v-for="item in vegetables" v-bind:title="item.name">
    {{item}}
    {{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:["北京","上海","广州","深圳"],
      vegetables:[
        {name:"西兰花炒蛋"},
        {name:"蛋炒西兰花"},
      ]
    },
    methods:{
      add:function () {
        this.vegetables.push({name: "花菜炒蛋"})
      },
      remove:function () {
        this.vegetables.shift();//移除最最左边的
      }
    }
  })
</script>

4.6、本地应用_v_on补充指令

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

• 事件绑定的方法写成函数调用的形势，可以传入自定义参数
• 定义方法是需要定义形参来接收传入的实参
• 事件的后面跟上.修饰符可以对事件进行限制
• .enter可以限制触发的按键为回车
• 事件修饰符有多种

<div id="app">
  <input type="button" value="点击1" @click="doIt">
  <input type="button" value="点击2" @click="doIt('老铁',666)">

  <input type="text" @keyup="sayHi"><!--每次输入框中改变都会调用sayHi方法，十分烦人-->
  <input type="text" @keyup.enter="sayHi"><!--监控，当按下回车的时候才会调用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) {
        console.log("做IT");
        console.log(p1);
        console.log(p2)
      },
      sayHi:function () {
        alert("吃了没？")
      }
    }
  })
</script>

4.8、本地应用_v_model指令

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

• v-model指令的作用是便捷的设置和获取表单元素的值
• 绑定的数据会和表单元素值相关联
• 绑定的数据<----->表单元素的值
  

5、本地应用_小黑记事本

5.1、本地应用_小黑记事本介绍

5.2、本地应用_小黑记事本新增

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

<!-- 主体区域 -->
<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>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer" >
  </footer>
</section>
<!-- 底部 -->
<footer class="info">
</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);
      }
    }
  })
</script>

5.2、本地应用_小黑记事本删除

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

<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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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("删除");
        this.list.splice(index,1);//从哪删，删几个
      }
    }
  })
</script>

5.2、本地应用_小黑记事本统计

统计信息个数（-text length）

<footer class="footer" >
  <span class="todo-count">
    <strong>{{list.length}}</strong>
    items left
  </span>
  <button class="clear-completed">
    Clear
  </button>
</footer>

5.2、本地应用_小黑记事本清空

5.2、本地应用_小黑记事本隐藏

• 列表结构可以通过v-for指令结合数据生成
• v-on结合事件修饰符可以对事件进行限制，比如：.enter
• v-on在绑定事件时可以传递自定义参数
• 通过v-model可以快速的设置和获取表单元素的值
• 基于数据的开发方式

<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" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </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 class="clear-completed" @click="clear" v-show="list.length!=0">
          Clear
        </button>
      </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
    </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("删除");
            this.list.splice(index,1);//从哪删，删几个
          },
          clear:function () {
            this.list = [];
          }
        }
      })
    </script>
  </body>

</html>

6、网络应用

6.1、网络应用_axios基本使用

功能强大的网络请求库

//需要引用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios.get(地址?查询字符串).then(function(response){},function(err){})
axios.get(地址?key=value&key2=value).then(function(response){},function(err){})

axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

随机获取笑话的接口

• 请求地址：https://autumnfish.cn/api/joke/list
• 请求方法：get
• 请求参数：num

参数名	参数说明	备注
num	笑话条数	类型为数字

用户注册接口1

• 请求地址：https://autumnfish.cn/api/user/reg
• 请求方法：post
• 请求参数：username
• 响应内容：注册成功或失败

参数名	参数说明	备注
username	用户名	不能为空

• axios必须先导入才可以使用
• 使用get或post方法即可发送对应的请求
• then方法中的回调函数会在请求成功或失败时触发
• 通过回调函数的形参可以获取响应内容，或错误信息
• 更多参考：https://github.com/axios/axios
  

<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>
  /*
        随机获取笑话的接口
        • 请求地址：https://autumnfish.cn/api/joke/list
        • 请求方法：get
        • 请求参数：num
        * */
  document.querySelector(".get").onclick = function () {
    axios.get("https://autumnfish.cn/api/joke/list?num=3")
      .then(function (response) { //处理请求成功后的数据
      console.log(response);
    },function (err) { //处理请求异常
      console.log(err);
    })
  }

  /*
        * 用户注册接口1
        • 请求地址：https://autumnfish.cn/api/user/reg
        • 请求方法：post
        • 请求参数：username
        • 响应内容：注册成功或失败
        * */
  document.querySelector(".post").onclick = function () {
    axios.post("https://autumnfish.cn/api/user/reg",{username:"qykhhr"})
      .then(function (response) {
      console.log(response);
    },function (err) {
      console.log(err);
    })
  }
</script>

6.2、网络应用_axios加vue

• axios回调函数中的this已经改变，无法访问到data中数据
• 把this保存起来，回调函数中直接使用保存的this即可
• 和本地应用的最大区别就是改变了数据来源
  

<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>

<!--使用vue和axios的JavaScript代码必须在引用它们后面-->
<script>
  /*
          接口：随机获取一条笑话
          请求地址：https://autumnfish.cn/api/joke
          请求方法：get
          请求参数：无
          响应内容：随机笑话
        */
  var app = new Vue({
    el:"#app",
    data:{
      joke:"很好笑的笑话"
    },
    methods:{
      getJoke:function () {
        console.log("this.joke = "+this.joke);
        var that = this;
        axios.get("https://autumnfish.cn/api/joke")
          .then(function (response) {
          console.log(response.data);
          console.log("this.joke = "+this.joke);//this对象发生了变化
          that.joke = response.data;
        },function (err) {
          console.log(err);
        })
      }
    }
  })
</script>

7、网络应用_天知道_介绍

天气接口

• 请求地址：http://wthrcdn.etouch.cn/weather_mini
• 请求方法：get
• 请求参数：city
• 响应内容：天气信息

7.1、网络应用_天知道_回车查询

1. 按下回车（v-on .enter）
2. 查询数据（axios 接口 v-model）
3. 渲染数据（v-for 数组 that）

• 应用的逻辑代码建议和页面分离，使用单独的js文件编写
• axios回调函数中this执向改变了，需要额外保存一份
• 服务器返回的数据比较复杂时，获取的时候需要注意层级结构

<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">
          搜 索
        </button>
      </div>
      <div class="hotkey">
        <a href="javascript:;">北京</a>
        <a href="javascript:;">上海</a>
        <a href="javascript:;">广州</a>
        <a href="javascript:;">深圳</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 src="./js/main.js"></script>
</body>
/*
  请求地址: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){})
         }
     },
 })

7.1、网络应用_天知道_点击查询

• 自定义参数可以让代码的复用性更高
• methods中定义方法内部，可以通过this关键字点出其他的方法

<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>
/*
  请求地址: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){})
         },
         changeCity:function (city) {
             this.city = city;
             this.searchWeather();
         }
     },
 })

8、综合应用

8.1、综合介绍

8.2、综合应用_歌曲查询

歌曲搜索接口

• 请求地址：http://musicapi.leanapp.cn/search
• 请求方法：get
• 请求参数：keywords（查询的关键字）
• 响应内容：歌曲搜索结果

1. 按下回车（v-on .enter）
2. 查询数据（axios 接口 v-model）
3. 渲染数据（v-for 数组 that）

8.3、综合应用_歌曲播放

8.3、综合应用_歌曲封面

8.3、综合应用_歌曲评论

8.3、综合应用_播放动画

8.3、综合应用_播放MV

    //  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){})
         },
         changeCity:function (city) {
             this.city = city;
             this.searchWeather();
         }
     },
 })

8、综合应用

8.1、综合介绍

8.2、综合应用_歌曲查询

歌曲搜索接口

• 请求地址：http://musicapi.leanapp.cn/search
• 请求方法：get
• 请求参数：keywords（查询的关键字）
• 响应内容：歌曲搜索结果

1. 按下回车（v-on .enter）
2. 查询数据（axios 接口 v-model）
3. 渲染数据（v-for 数组 that）

8.3、综合应用_歌曲播放

8.3、综合应用_歌曲封面

8.3、综合应用_歌曲评论

8.3、综合应用_播放动画

8.3、综合应用_播放MV

9、总结