Vue全掌握——指令、axios

vue官网

Vue介绍：

是一套用于构建用户界面的渐进式框架

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用

只关注视图层，因此它非常容易学习，非常容易与其它库或已有项目整合

“渐进式框架”：我的理解是，需要什么往里面加，不需要多余的部分！有多少东西，干多少活！显得简洁，主张最少

“自底向上逐层应用”：由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。

兼容性

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 

Vue优点

---

本地应用

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.

 

 命令式与声明式

命令式：一步一步告诉程序如何去做，能否达成结果取决于开发者的设计。
声明式：只告诉程序想要什么结果，如何达成由程序保证，开发者不用关心。

声明式渲染的理解?
　　1.DOM状态只是数据状态的一个映射
　　2.所有的逻辑尽可能在状态的层面去进行
　　3.当状态改变了，view会被框架自动更新到合理的状态

模板

给一张图来帮助更好的理解模板的作用（Vue的模板编译成虚拟的DOM树（VNode），然后生成真实的DOM树）

 模板的三种书写方式：

1. 普通模板

2. template 字符串模板(es6)属性

3.render配置函数创建（这个有时间单独再说）

{ { vulue }}  差值表达式

文本值

el挂载点

问题：

1. Vue实例的作用范围

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

2. el是否可以使用其他选择器

可以，建议使用ID选择器

3. 在html和body标签上支持Vue的 el 吗

不支持，不能使用HTML和body

el挂载点的另外一种方式：app.$mount(“#app”);------------前一个app为上面案例实例对象的引用

data数据对象

可以写数值类型、布尔类型、字符串类型、数组、复杂类型（字面量对象......）

            data: {
                mess: '人物介绍',
                person: {
                    name: 'Tom',
                    sex: 'M',
                    description: '来自美国加州...',
                    subjects: ['高数', '英语', '毛概', 'android']
                }
            }

computed计算属性

方法函数名作为属性来使用

    

        {
    {firstName}}
        {
    {lastName}}
        {
    {fullName}}
    

computed属性和methods属性区别：

1.computed属性的方法可以作为属性变量，methods属性的方法只能被调用

2.computed属性的方法计算值有缓存作用，再次使用不会被计算（直接使用）

Vue指令

文本指令：v-text、v-html

v-text文本指令

作用和差值表达式类似

姓名：

v-text指令会将标签内文本覆盖 

v-text指令可以采用+拼接的方式达到差值表达式的效果

v-html指令

data: {
    mess: '百度'
}

 

 

v-on事件绑定指令

两种写法：

点我1
点我2

methods: {
     doIt: function() {
         console.log('点击了！')
     }
}

 

页面显示是跟随数据变化的，比如

点我1
点我2
{
    { say }}

data: {
    say: 'hello，小黑！'
},
methods: {
    doIt: function() {
        this.say += '好！'
    }
}

那如果传传参数呢？这样：

点我2

methods: {
     doIt: function(p) {
         console.log(p)
     }
}

 

v-show显示/隐藏指令

该指令实际修改的是display

显示
隐藏

data: {
    hidden: true,
    none: false
}

 

v-if条件判断指令

该指令实际是对DOM元素的添加和移除

显示
隐藏

data: {
    hidden: true,
    none: false
}

        
优秀
        
良
        
差

指令布尔值简单判断方式v-if="{hidden: true}"、v-show="{hidden: true}"

（--------------v-show更适合频繁操作显示和隐藏---------------------------------）

 

v-bind设置属性指令

data: {
    imgSrc: 'images/offline.gif',
    title: '这是一张图片....',
    width: 300
}

 

如果一个属性有多个值，使用json格式！比如：

:class="{myclass1: show1, myclass2: show2}"       （其中show1、show2的值为true/false）

 

v-for迭代指令

作用对象：作用于被迭代的元素标签

    {
    { item }}

data: {
    subjects: ['数学', '英语', '地理']
}

添加数组下标（注意：下标参数在后）

    {
    { index }} {
    { item }}

如果被迭代的是对象的属性，则是键值对的方式：

            

                值：{
    {v}},键：{
    {k}},索引：{
    {i}}
            

 

v-model获取和设置表单数据（数据双向绑定）

{
    { mess }}

data: {
    mess: '你好啊！'
}

div文本和表单输入的值是一样的 ！

 JavaScript代码可以嵌入Vue，非常灵活！

data数据对象中：

  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }

methods中就不必说了！ 

基础综合演练（小黑记事本）

任务需求：对已有HTML结构和css元素的记事本，需要完成新增、删除、统计、清空、隐藏五个功能。

分析：显示列表实际是以数组存储的，那么实现增删改查都是对数组进行操作。

代码：

 

网络应用

上面的知识点只是针对本地的应用，没有涉及到网络数据的交互，这里讲网络请求库axios

 axios内部使用的是原生JavaScript的ajax，完成异步请求。

axios

axios掌握重点：（导入axios的js库文件、会使用axios的get和post请求方法，以及回调函数）

（学过Vue-CLI的可以使用npm i axios命令安装！）

案例：

axios+Vue完成第三方接口返回的数据处理：

            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话

            接口2:用户注册 
            请求地址:https://autumnfish.cn/api/user/reg
            请求方法:post
            请求参数:username(用户名,字符串)
            响应内容:注册成功或失败

            接口3:天知道天气预报 
            请求地址:http://wthrcdn.etouch.cn/weather_mini
            请求方法:get
            请求参数:city(城市名,字符串)
            响应内容:城市近几天的详细天气信息

            悦听音乐
            接口4:歌曲搜索 
            请求地址:https://autumnfish.cn/search
            请求方法:get
            请求参数:keywords(查询关键字,字符串)
            响应内容:歌曲搜索结果
            接口5:获取某个歌曲的url
            请求地址:https://autumnfish.cn/song/url
            请求方法:get
            请求参数:id(歌曲id,字符串)
            响应内容:歌曲的url地址
            接口6:获取某个歌曲的详情信息
            请求地址:https://autumnfish.cn/song/detail
            请求方法:get
            请求参数:ids(歌曲id,字符串)
            响应内容:歌曲的详情（包括封面信息）
            接口7:获取某个歌曲的评论
            请求地址:https://autumnfish.cn/comment/hot?type=0
            请求方法:get
            请求参数:id(歌曲id,字符串;type固定为0)
            响应内容:歌曲的热门评论
            接口8:获取某个歌曲的MV
            请求地址:https://autumnfish.cn/mv/url
            请求方法:get
            请求参数:id(歌曲id,字符串)
            响应内容:歌曲的MV

（下面案例代码修正：v-for作用对象应该在被迭代的元素上，比如li；因为发的是截图，代码不好修改，请注意！）

案例1：随机笑话

案例2：用户注册

案例3：天知道天气预报

 案例4：基于歌曲搜索的在线音乐播放网站

    

        
        

          

            
            
            
          
          

            
            

              

               

                  
                 {
    { item.name }}
                 
                
              
              
            
            
            

              
              
              
              
            
            
            

              
热门留言
              

                

                  

                  
{
    { item.user.nickname }}
                  

                    {
    { item.content }}
                  
                
 
              
              
            
          
          

            
          
          

            
            

          
        
      
    

const app = new Vue({
    el: '#player',
    data: {
        query: '',
        lists: [],
        url: '',
        picUrl: '',
        commentsList: [],
        isplay: false,
        mvUrl: '',
        isShow: false
    },
    methods: {
        searchMusic: function() {
            let that = this;
            axios.get('https://autumnfish.cn/search?keywords='+ that.query)
                .then(function(response) {
                    console.log(response);
                    that.lists = response.data.result.songs;
                }, function(err) {
                    console.log(err);
                });
        },
        playMusic: function(id) {
            let that = this;
            axios.get('https://autumnfish.cn/song/url?id='+ id)
                .then(function(response) {
                    console.log(response);
                    that.url = response.data.data[0].url;
                }, function(err) {
                    console.log(err);
                });

                axios.get('https://autumnfish.cn/song/detail?ids='+ id)
                .then(function(response) {
                    console.log(response);
                    that.picUrl = response.data.songs[0].al.picUrl;
                }, function(err) {
                    console.log(err);
                });

                axios.get('https://autumnfish.cn/comment/hot?type=0&id='+ id)
                .then(function(response) {
                    console.log(response);
                    that.commentsList = response.data.hotComments;
                }, function(err) {
                    console.log(err);
                });
        },
        play: function() {
            this.isplay = true;
        },
        pause: function() {
            this.isplay = false;
        },
        playMv: function(mvid) {
            let that = this;
            axios.get('https://autumnfish.cn/mv/url?id='+ mvid)
                .then(function(response) {
                    console.log(response);
                    that.isShow = true;
                    that.mvUrl = response.data.data.url;
                }, function(err) {
                    console.log(err);
                });
        },
        hide: function() {
            this.isShow = false;
        }
    }
});