Vue学习

Vue、Axios学习

前言

测试代码地址：点击下载

第一章 Vue基础

1.1 特点

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

1.2 第一个vue程序

（1）导入开发版本的Vue.js
（2）创建Vue实例对象，设置el属性和data属性
（3）使用简洁的模板语法把数据渲染到页面上

1.3 el挂载点

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

（1）Vue实例的作用范围
    Vue会管理el选项命中元素及其内部的后代元素
（2）是否可以使用其他选择器
    可以，建议使用id选择器
（3）是否可以设置其他的dom元素呢？
    双标签，除了HTML、body标签

1.4 data 数据对象

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

测试代码：firstVue.html

第二章 本地应用

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

测试代码：本地应用.html

2.1 内容绑定、事件绑定

• v-text ----代码见app

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

• v-html ----代码见app2

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

• v-on ----代码见app3、app9

  v-on指令的作用：为元素绑定事件
     事件名不需要写on
     指令可以简写为@
     绑定的方法定义在methods属性中
    *方法内部通过this关键字可以访问定义在data中数据
     事件绑定的方法写成函数调用的形式，可以传递自定义参数
     定义方法时需要定义形参来接收传入的实参
     事件的后面跟上 .修饰符 可以对事件进行限制 @keyup.enter
     .enter可以限制触发的按键为回车
     事件修饰符有多种
  

案例一：实现计数器—app4

2.2 显示切换、属性绑定

• v-show ----代码见app5

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

• v-if ----代码见app6

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

• v-bind ----代码见app7

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

案例二：图片切换 ----lunbo.html

2.3 列表循环、表单元素绑定

• v-for ----代码见app8

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

• v-model ----代码见app10

  v-model指令的作用是便捷的设置和获取表单元素的值
  绑定数据<-->表单元素 双向绑定
  

案例三：记事本----代码测试：memory.html

功能：
    新增、删除、统计、清空、隐藏
总结：
    列表结构可以通过v-for指令结合数据生成
    v-on结合事件修饰符可以对事件进行限制，比如.enter；在绑定事件时，可以传递自定义参数
    v-model可以快速的设置和获取自定义参数
    基于数据的开发方式
tips：通过浏览器审查元素快速定位

第三章 网络应用

Vue结合网络数据（第三方API）开发应用

3.1 axios基本使用

网络请求库，基于ajax
    axios必须先导入再使用
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    使用get或post方法即可发送对应请求
      axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
      axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
    then方法中的回调函数会在请求成功或失败时触发
    通过回调函数的形参可以获取响应的内容或错误信息
文档传送门：https://github.com/axios/axios

测试代码：axiosTest.html

3.2 axios+vue

axios如何结合vue开发网络应用?
     axios回调函数中的this已经改变，无法访问到data中的数据
     把this保存起来，回调函数中直接使用保存的this即可
     和本地应用的最大区别就是改变了数据来源

测试代码：vue-axios.html

3.3 案例–天气预报

功能：回车查询、点击查询
接口文档：
    请求地址：http://wthrcdn.etouch.cn/weather_mini
    请求方法：get
    请求参数：city
    响应内容：天气信息
总结：
    应用的逻辑代码建议与页面分离，使用单独的js文件编写
    axios回调函数中的this指向改变了，需要额外的保存一份
    服务器返回的数据比较复杂时，获取的时候需要注意层级结构
    自定义参数可以让代码的复用性很高
    methods中定义的方法内部，可以通过this关键字点出其他的方法

测试代码：weather.html

第四章 综合应用

悦听player
功能：歌曲搜索、歌曲播放、歌曲封面、歌曲评论、播放动画、mv播放
测试代码：day03_综合应用

接口文档：
/*
  1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果
  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址
*/

4.1 歌曲搜索

实现步骤
   按下回车---v-on   @keyup.enter
   查询数据---axios 接口、v-model
   渲染数据---v-for、数组、that

4.2 歌曲播放

实现步骤
    点击播放     v-on
    歌曲地址获取 接口 歌曲id(依赖于歌曲搜索的结果）
    歌曲地址设置  ：src

4.3 歌曲封面

实现步骤
    点击播放      增加逻辑
    歌曲封面获取   接口 接口id
    歌曲封面设置   v-bind

4.4 歌曲评论获取

实现步骤
    点击播放
    歌曲评论获取
    歌曲评论渲染

4.5 播放动画

实现步骤
    监听音乐播放  v-on play
    监听音乐暂停  v-on pause
    操作类名      v-bind 对象

4.6 播放mv

实现步骤
    mv图标显示  v-if
    mv地址获取  接口 mvid
    遮罩层      v-show v-on
    mv地址设置  v-bind

---

最后说明，本篇博客只适用于快速上手的编程人员，如需更深一步学习请参照vue官网......