Vue初学习
一．介绍
Vue（2.0）是一个帮助快速创建交互式页面的渐进式框架，它提供了数据绑定、组件系统和路由等功能，
使得交互和一些dom元素操作更加容易实现，是一个轻量、简单和高效的JS框架。
二．特点
1.简化dom操作
在vue里面不需要直接直接操作dom元素，而是通过挂载到vue实例上，由vue实例内部自动实现对dom元素的操作。
2.响应式数据驱动
以往的页面中，想要改变一个元素上的值，通常是获取到这个元素，然后去改变的它的value,但是在vue里面，
并不是使用这种方法，更多的是在vue实例对象里面，定义一个属性，然后将这个属性通过 {{msg}} 插值的方法输出到元素标签上，当属性改变，标签上的值也会改变。
3.组件系统和路由
Vue的组件可以扩展html元素，封装可重用的代码，自定义元素。路由是vue官方的路由管理器，配合单文件组件，让构建单文件组件简单快捷。
三．Vue实例
每个vue应用最少有一个根实例.
Vues包含数据、模板、挂载元素、方法、生命周期钩子等选项。
vue组件/应用其实就是扩展的vue实例
示例：
var music =new Vue({
el:"#player",
data:{
query:"你就不要想起我",//vue实例挂载到id为player的元素上（对其和内部的元素起作用）
musicList:[],
audioSrc:"",
hotComments:[],
isPlaying:false,
},
methods:{
searchMusic(){
var that=this;
axios.get("https://autumnfish.cn/search?keywords="+this.query).then(function(response){
that.musicList=response.data.result.songs;
console.log(that.musicList);
},function(err){
});
}
}
});四．Vue指令
1.v-text
2.v-html
3.v-on
4.v-show
5.v-if
6.v-bind
7.v-for
index 是数组下标，不用自己定义。for是用来循环遍历数组的。。
8.v-model
V-model指令的作用是便捷的设置和获取表单元素的值v-model绑定的数据会和表单元素值相关联绑定的数据一表单元素的值
双向绑定，一般和表单控件使用。
在末数组尾加入元素，listTodo.push();
移除指定元素 listTodo.slice();
9.图片切换
10.其它（axios)
axios（网络请求库）
五．组件
组件是可复用的vue实例，每用一次组件，就会有一个它的新实例被创建。
组件中数据属性data必须为一个返回值的函数
// 定义一个名为 button-counter 的新组件 （全局注册）
六．单文件组件
单文件组件，可以扩展名为vue的大型组件，包含了三部分：html，script和css，使用单文件组件比普通组件更加强大，适用范围更广，在应对复杂和大型的项目时，单文件组件更有优势。
七．路由
路由可以看做是负责组件的跳转，管理组件间的切换。
路由可以很方便的构建SPA
1.安装
终端： npm install vue-router 下载
Main.js 中导入、使用和创建路由:
2.配置规则
通过routes 属性配置地址和受路由管理的组件的关系
3.路由出口
路由匹配到的组件所要显示的位置，在哪里加上这个标签，组件就在哪里显示
4.声明式导航（普通切换/跳转）
通过 route-link 标签，设置 to 属性为地址，切换（跳转）到指定的路由
5.编程式导航
编程式导航是写在script里面的,而声明式导航是类似html标签写在html里面的。
6.路由传参
在编程式导航的后面加上 ？分隔符，进行传参
接收使用 this.$route.query.参数名 来接受对应的参数
八．Vue CLI(Vue脚手架)
快速创建项目
整合了常用的功能模块
导入功能模块比较方便
1.安装
npm install -g @vue/cli
2.创建项目
选择好目录
Cmd: vue create 项目名
3.目录结构
九．实例应用-音乐播放器
参考代码
1.播放音乐或者mv
给audio和video动态设置url/src
Mv
2.毫秒数转为分：秒的形式
this.newestSongs=res.data.data;
//处理时长 毫秒 转化为 分：秒 的形式
for(let i=0;i3.切换tab选项卡，然后查询相应的数据
tab与activeIndex绑定，然后监听器watch()监听activeIndex的状态
4实现分页，并且点击页码切换数据
分页组件：element 分页组件，给分页组件设置total(总数),page(当前页),limit(每页显示条数)三个参数
当点击页码的时候，会触发回调函数，将当前页码付给page,然后会根据当前页码自动计算偏移量，然后重新执行getMvList()
