黑马VUE学习笔记（附带项目天气预报和音乐播放器所有源码）

文章目录

• 黑马VUE学习笔记—后端小白入门（附带项目天气预报和音乐播放器所有源码）
• • 感谢黑马！
  • 01第一个vue程序
  • 02el挂载点
  • • el是用来设置Vue实例挂载（管理）的元素
    • 1.vue的作用范围
    • • 在el命中的元素内部可以被渲染
      • Vue会管理el选项命中的元素及其内部的后代元素
    • 2.是否可以选用其他的选择器
    • 3.是否可以设置其他的dom元素
  • 03data 数据对象
  • • 1.Vue中用到的数据定义在data中
    • 2.data中可以写复杂类型的数据
    • 3.渲染复杂类型数据时，遵循js的语法即可 .语法，数组的索引语法
  • 04本地应用-介绍
  • • 1.通过Vue实现常见的网页效果
    • 2.学习Vue指令，以案例巩固知识点
    • 3.Vue指令指的是，以v-开头的一组特殊语法
  • 05本地应用-v-text
  • • 1.v-text指令的作用：设置标签的内容（textContent）
    • 2.默认写法会替换全部内容，使用差值表达式{undefined{}}可以替换指定内容。（如本例中”深圳的显示”）
    • 3.内部支持写表达式（如字符串拼接）
  • 06.本地应用-v-html指令
  • • 1.v-html指令的作用是:设置元素的innerHTML
    • 2内容中有html结构会被解析为标签
    • 3.v-text指令无论内容是什么,只会解析为文本
    • 4.解析文本使用v-text,需要解析html结构使用v-html
  • 07.本地应用-v-on指令基础
  • • 1.v-on指令的作用是:为元素绑定事件
    • 2.事件名不需要写on
    • 3.指令可以简写为@
    • 4.绑定的方法定义在methods属性中
    • 5.方法内部通过this关键字可以访问定义在data中数据
  • 08-本地应用-计数器
  • • 1.思路
    • 2.总结
  • 09本地应用-v-show指令
  • • 1.show指令的作用
    • 2.后面的内容,最终都会解析为布尔值
    • 3.true元素显示，值为false元素隐藏
    • 4.改变之后，对应元素的显示状态会同步更新
  • 10本地应用-v-if指令
  • • 1.v-if指令的作用是:根据表达式的真假切换元素的显示状态
    • 2.本质是通过操纵dom元素来切换显示状态
    • 3.表达式的值为true,元素存在于dom树中,为false,从dom树中移除
    • 4.频繁的切换v-show,反之使用v-if,前者的切换消耗小
  • 12-本地应用-v-bind指令
  • • 1.v-bind：属性名=表达式
    • 2.v-bind指令的作用是:为元素绑定属性
    • 3.完整写法是v-bind:属性名
    • 4.简写的话可以直接省略v-bind,只保留:属性名
    • 5.需要动态的增删class建议使用对象的方式
  • 13-本地应用-v-for
  • • 1.v-for指令的作用是:根据数据生成列表结构
    • 2.数组经常和v-for结合使用
    • 3.语法是( item,index ) in数据
    • 4.item和index可以结合其他指令- -起使用
    • 5.数组长度的更新会同步到页面上，是响应式的
  • 14-本地应用-v-on补充
  • • 1.事件绑定的方法写成函数调用的形式，可以传入自定义参数
    • 2.定义方法时需要定义形参来接收传入的实参
    • 3.事件的后面跟上.修饰符可以对事件进行限制
    • 4. .enter可以限制触发的按键为回车
    • 模板
  • 15-本地应用-v-model
  • 16本地应用-小黑记事本
  • • 1.新增
    • • 1. 生成列表结构(v-for和数组)
      • 2. 获取用户输入(v-model)
      • 3. 回车,新增数据(v-on .enter 添加数据)
      • 4.总结
    • 2.删除
    • • 1.数据改变，和数据绑定的元素同步改变
      • 2.事件可以接收自定义的参数
      • 3.splice的作用：根据索引删除对应元素
    • 3.统计
    • • 1.基于数据的开发方式
      • 2.v-text指令是设置文本，也可以用插值表达式{undefined{}}
    • 4.清空
    • • 1.基于数据的开发方式-清空数组即可
    • 5.隐藏
    • 没有数据时，隐藏元素（数组非空时v-if v-show ）
    • 6.总结
    • • 1. 列表结构可以通过v-for指令结合数据生成
      • 2. v-on结合事件修饰符可以对事件进行限制,比如.enter
      • 3. v-on在绑定事件时可以传递自定义参数
      • 4. 通过v-model可以快速的设置和获取表单元素的值
      • 5. 基于数据的开发方式
  • 17-网络应用-介绍
  • • 1.Vue结合网络数据开发应用
    • 2.axios-网络请求库
    • 3.axios+vue-结合Vue一起
    • 4.天气预报案例
  • 18-网络应用- axios基本使用
  • • 要点
  • 19-网络应用- axios与vue结合使用
  • • 1.axios回调函数中的this已经改变,无法访问到data中数据
    • 2.把this保存起来,回调函数中直接使用保存的this即可
    • 3.和本地应用的最大区别就是改变了数据来源
  • 20-网络应用-天知道-回车查询(项目地址在文章结尾)
  • • 1. 按下回车(v-on .enter)
    • 2. 查询数据(axios 接口 v-model )
    • 3. 渲染数据(v-for 数组 that)
    • • 应用的逻辑代码建议和页面分离，使用单独的js文件编写
      • axios回调函数中this指向改变了，需要额外的保存一份
      • 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
  • 21-综合应用（音乐播放器）-介绍
  • • **注：**
    • 介绍
  • 22-综合应用-歌曲搜索
  • • 1. 按下回车(v-on .enter)
    • 2. 查询数据(axios 接口 v-model )
    • 3. 渲染数据(v-for 数组 that)
  • 23-综合应用-歌曲播放
  • • 1. 点击播放(v-on 自定义参数)
    • 2. 歌曲地址获取：
    • 3. 歌曲地址设置(v-bind)
  • 24-综合应用-歌曲封面
  • 25-综合应用-播放动画
  • • 1. 监听音乐播放(v-on play)
    • 2. 监听音乐暂停(v-on pause)
    • 3. 操纵类名(v-bind 对象)
  • 26-综合应用-播放mv
  • • 1. mv图标显示(v-if)
    • 2. mv地址获取
    • 3. 遮罩层
    • 4. mv地址设置
  • 2