Vue 学习笔记

目录

1、vue 基础

1.1、第一个 vue 程序

1.1.1、导入 vue 依赖

1.1.2、编写代码

1.2、el 挂载点

1.3、data 数据对象

2、vue 常用指令

2.1、v-text

2.2、v-html

2.3、v-on

2.4、案例 —— 计数器

2.5、v-show

2.6、v-if

2.7、v-bind

2.8、案例 —— 图片切换

2.9、v-for

2.10、v-model

2.11、案例 —— 记事本

3、Vue 生命周期

4、网络应用

4.1、axios

4.1.1、axios 基本使用 

4.1.2、axios + vue

4.2、案例 —— 天气预报

5、综合案例 —— 音乐播放器

---

学习黑马 vue 教程的笔记，视频传送门：黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibili

开发环境：idea2021

官方帮助文档：Vue.js 

若 IDEA 没有 vue 的提示，可以下载 vue.js 插件

1、vue 基础

1.1、第一个 vue 程序

1.1.1、导入 vue 依赖

根据官方文档，有两种导入依赖的方式

1.1.2、编写代码

    
    


    

        {{ message }}
    
    
    
    

页面输出：你好，vue

1.2、el 挂载点

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

Vue实例的作用范围：Vue会管理 el 选项命中的元素及其内部的后代元素

是否可以使用其他的选择器？ 可以使用其他的选择器,但是建议使用ID选择器 

是否可以设置其他的dom元素呢？ 可以使用其他的双标签，不能使用HTML和BODY

    
    


    {{ message }}  
    

        {{ message }}
         {{ message }}   
    

    
    

    

1.3、data 数据对象

Vue 中用到的数据定义在 data 中

data 中可以写复杂类型的数据

渲染复杂类型数据时,遵守 js 的语法即可

    
    


    

        {{ message }}
        
 {{ school.name }}  {{ school.mobile }} 
        
  
            
 {{ campus[0] }} 
  
            
 {{ campus[1] }} 
            
 {{ campus[2] }} 
        
    

    
    

    

2、vue 常用指令

2.1、v-text

设置标签的文本值(textContent)

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

内部支持写表达式

    
    


    

        
哈哈
  
        
哈哈
  
        
 {{ message + '!' }} 哈哈
  
    

    
    

    

2.2、v-html

v-html 指令的作用是：设置元素的 innerHTML

若内容为普通文本，v-html 与 v-text 的作用没有区别，内容不为普通文本，区别如下： 

        内容中有 html 结构会被解析为标签

        v-text 指令无论内容是什么，只会解析为文本

总结：解析文本使用 v-text ，需要解析 html 结构使用 v-html

2.3、v-on

官方介绍：API — Vue.js 

v-on 指令的作用是:为元素绑定事件

事件名不需要写 on

指令可以简写为 @

绑定的方法定义在 methods 属性中

方法内部通过 this 关键字可以访问定义在 data 中数据

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上 .修饰符 可以对事件进行限制

.enter 可以限制触发的按键为回车

事件修饰符有多种

基本使用： 

    
    


    

        
        
        
        
{{ food }}
    

    
    

    

补充使用：

2.4、案例 —— 计数器

    
    


    

        
        

             - 
            {{ num }}
             + 
        
    

    
    

    

2.5、v-show

v-show 指令的作用是：根据真假切换元素的显示状

原理是修改元素的 display，实现显示隐藏

指令后面的内容，最终都会解析为布尔值

值为 true 的元素显示,值为 false 的元素隐藏

数据改变之后，对应元素的显示状态会同步更新

2.6、v-if

v-if 指令的作用是：根据表达式的真假切换元素的显示状态

本质是通过操纵 dom 元素来切换显示状态

表达式的值为 true，元素存在于 dom 树中,为 false，从 dom 树中移除

频繁的切换 v-show，反之使用v-if，前者的切换消耗小

    
    


    

        
你好 v-if
 

        
你好 v-show
 

         

        
热成狗
    

    
    

    

2.7、v-bind

v-bind 指令的作用是:为元素绑定属性

完整写法是 v-bind：属性名

简写的话可以直接省略v-bind，只保留：属性名

 需要动态的增删 class 建议使用对象的方式

2.8、案例 —— 图片切换

    
    


    

        
        
        

        
        上一张
        下一张
    

    
    

    

2.9、v-for

v-for 指令的作用是:根据数据生成列表结构

数组经常和 v-for 结合使用

语法是 (item,index) in 数据

item 和 index 可以结合其他指令一起使用

数组长度的更新会同步到页面上，是响应式的

    
    


    

        

            
            

                序号{{ index+1 }}：{{ item }}
            
        
        
        
        

            {{ item.name }}
        
    

    
    

    

2.10、v-model

v-model 指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据 ←→ 表单元素的值

    
    


    

        
        
        
{{ message }}
        
    

    
    

    

2.11、案例 —— 记事本

    
    
    
    
    
    
    





    
    

        
记事本
        
        
    

    
    

        

            

                

                    {{ index + 1 }}.
                    {{ item }}
                    
                
            
        
    

    
    

      
        {{ list.length }} items left
      
        
        
            Clear
        
    



    

        
    

3、Vue 生命周期

生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。发送异步请求，加载数据。

4、网络应用

4.1、axios

官方地址：GitHub - axios/axios: Promise based HTTP client for the browser and node.js 

axios 基本格式：

        axios.get(地址?key=value&key2=values).then(function(response){},function(err){})

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

4.1.1、axios 基本使用 

axios 必须先导入才可以使用

使用 get 或 post 方法即可发送对应的请求

then 方法中的回调函数会在请求成功或失败时触发

通过回调函数的形参可以获取响应内容,或错误信息 

① 引入 axios

② 测试

4.1.2、axios + vue

axios 回调函数中的 this 已经改变,无法访问到 data 中数据， 把 this 保存起来,回调函数中直接使用保存的 this 即可

和本地应用的最大区别就是改变了数据来源

    
    


    

        
        
 {{ joke }} 
    

    
    

    
    

    

4.2、案例 —— 天气预报

main.js

/*
  请求地址: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);
             // 调用接口
             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();
         }
     },
 })

天气预报.html

    
    
    
    
    
    



    

        

        

            
            
                搜 索
            
        
        

            
            北京
            上海
            广州
            深圳
        
    
    

        

            
{{ item.type }}
            

                {{ item.low }}
                ~
                {{ item.high }}
            
            
{{ item.date }}
        
    


    
    

    
    

    
    

5、综合案例 —— 音乐播放器

main.js

/*
  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的地址
*/
var app = new Vue({
  el:"#player",
  data:{
    // 查询关键字
    query:"",
    // 歌曲数组
    musicList:[],
    // 歌曲地址
    musicUrl:"",
    // 歌曲封面地址
    musicCover:"",
    // 歌曲评论信息
    hotComments:[],
    // 动画播放状态
    isPlay:false,
    // 遮罩层的显示状态
    isShow:false,
    // mv地址
    mvUrl:""
  },
  methods:{
    searchMusic:function (){
      var that = this;
      axios.get("https://autumnfish.cn/search?keywords=" + this.query)
          .then(function (response){
            console.log(response);
            that.musicList = response.data.result.songs;
          }, function (err){})
    },
    playMusic:function (musicId){
      // console.log(musicId);
      var that = this;
      // 获取歌曲地址
      axios.get("https://autumnfish.cn/song/url?id=" + musicId)
          .then(function (response){
            that.musicUrl = response.data.data[0].url;
          }, function (err){});

      // 获取歌曲详情
      axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
          .then(function (response){
            that.musicCover = response.data.songs[0].al.picUrl;
          }, function (err){});

      // 歌曲评论获取
      axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
          .then(function (response){
            that.hotComments = response.data.hotComments;
          }, function (err){})
    },
    play:function (){
      // console.log("play");
      this.isPlay = true;
    },
    pause:function (){
      // console.log("pause");
      this.isPlay = false;
    },
    playMv:function (mvid){
      var that = this;
      axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
          .then(function (response){
            that.mvUrl = response.data.data.url;
            that.isShow = true;
          }, function (err){})
    },
    // 隐藏遮罩层
    hide:function (){
      this.isShow = false;
    }
  }
})

音乐播放器.html

    
    
    
    
    
    



    
    

        

            
            
            
        
        

            
            

                

                    

                        
                         {{ item.name }} 
                        
                    
                
                
            
            
            

                
                
                
                
            
            
            

                
热门留言
                

                    

                        

                        
{{ item.user.nickname }}
                        

                            {{item.content}}