这篇博客是关于Vue.js的基础学习笔记，涵盖了从安装到使用的关键概念，包括数据绑定、事件处理、条件渲染、列表渲染、表单绑定以及axios的简单应用。文章通过实例讲解了v-text、v-html、v-on、v-if/v-show、v-bind、v-for、v-model等指令，并通过一个记事本案例和音乐播放器案例加深理解。
学习视频
vue学习视频
此视频相对较基础，对框架0基础可以观看，若有一定的框架基础建议查看API或更加有深度的视频。
源码放在gitee里了
第一个和第二个是用idea写的 看L_V_01和L_V_02的HTML就可以后面就很清晰了
友情提示：源码里的是没有css样式的，仅仅实现了基本的功能。
随看随记
- el和data之间使用，连接的
- 双击@dblclick
- html中的title是设置鼠标悬停的属性
- 对HTML中的双标签都有效，但是对body和head无效
- vue中v-if等属性名不能取名为if 会报错
- vue数组的操作
- audio标签的使用
vue L_V_01
- el 挂载点
- 输出Hello World 和C++
- el锁定后面data要作用的选择器与jQuery中的$(seletor)作用相似
- vue会对el标签中的{{“message”}}文字，在框架中进行修改
- vue会管理el选项命中的元素以及内部的后代元素
- 对HTML中的元素都可以使用，但是建议使用ID选择器
- data
- vue中需要的数据被定义到data中
- data中的数据可以是任意类型的数据如图是字符串和数组等，调用数据时遵守js语法即可
- 输出Hello World 和C++
内容绑定，事件绑定 L_V_02
v-text
- 书写结构和上图类似将v-text当成该选择器的一个属性，在data中将该v-text的内容替换掉
- 如果在innerHTML有内容不要使用v-text 会把其覆盖掉 直接使用{{}}即可
- 在进行字符串拼接的时候直接用+就可以，和常规的字符串拼接是一样的
v-html
- 与jqury中的.text和.html两个属性一样
- 其与t-text的区别是当替换内容中存在HTML标签内容时v-html会将其识别出来，而v-text则不会
v-on (简写为@)
- 书写结构中的data被替换成methods 同时增加了标签属性@click等对methods的方法进行绑定 表示当鼠标进行点击时 触发绑定事件
- 当Vue想要对元素进行修改时 通过this指针 对其中的内容进行修改 其中this指向了fruit即{{}}中的元素
*
*
计数器 L_V_03
- 注意的点
- 在js的vue框架中 sub和add后直接加function
- sub和add后不要用{}包裹function 会使function失效
- data 和 methods 中不同的属性值是用 , 隔开的
- 其中number可以定义在任何标签中，建议在span中因为没有特殊形式
显示切换，属性绑定 L_V_04
v-show (其属性值为布尔变量)
- 将该标签的style的display设置为none
- 可以输入v-show=“age>=18” 其中age不要加’ ‘ 加了就表示字符串文字了 不加表示要被替换的变量（我是这么理解的）
- v-show=“true” true也必须要加""
（虽然我感觉也没人这么做）
v-if (操纵DOM)
- 直接对该标签进行删除
- 对元素操作频繁用show，需要彻底删除标签用if
v-bind 简写(：属性=表达式)
- 当绑定:value等需要输入字符串的内容时不要忘记添加“HelloWorld”
- :class="{newClassName:ifActive}" 对于class属性进行绑定判断是否需要添加newClassName时不要忘记 {}
小结图片切换练习 L_V_05
- 可以在:src中定义数组，vue会自动识别数组名和数组索引。
- 在script中引用“”的内容时，必须使用this关键字。
- 注释的方法和视频中的图片的隐藏和显示实现的方法不同，也可以实现，可以酌情参考。
列表循环，表单绑定
v-for L_V_06
- 对于一个对象数组来说，对象内的每个属性都是用**，**来进行隔断的
- index是从0开始的
- 当需要使用{{}}来进行数组输出时，不要忘记对字符串加双引号“”
V-on L_V_07
v-model
- 便捷的设置和获取表单元素的值，绑定的数据和表单元素的值是双向绑定的关系，从外部修改的value可以被vue察觉到，vue修改的数值也可以直接对外展示出来
- 只针对表单元素
记事本案例 L_V_08 （打开时有error，但是可以运行，后续在查找问题）
新增功能
- 利用v-for对数组的内容进行显示
- 通过@keyup.enter实现text的输入
- 通过v-model实现输入框的属性捕捉
- 通过allTesk.push来实现增添数组
- 添加了输入数据后，清空输入框的功能
删除功能
- 通过this和splice实现对应元素的删除
统计功能
- 通过allTask.length实现总数统计
清空功能
- 通过对数组赋值为空实现清空
隐藏功能
- 针对数组长度 判断是都隐藏统计和清空信息
axios
- 语法 key和value可以有多个 注意两个语法中“”的范围以及传递key的写法
- get语法：axios.get(“地址?key=value&key2=value2”).then(function(response){},function(err){})
- post语法：axios.post(“地址”,{key=value,key2=value2}).then(function(response){},function(err){})
- axios.get测试网址：https://autumnfish.cn/api/joke/list
- axios.post测试网址：https://autumnfish.cn/api/user/reg
axios+vue L_V_09
- 当使用axios进行通信并得到结果时，this指针不会再指向data的内容，如果仍需要对HTML的内容进行处理，则需要在this改变之前先进行存储，再获取axios的响应值。
天气查询插件 L_V_10
- 自行添加了增加默认城市的功能（单纯为了好玩）
- 天气接口
- 请求地址:http://wthrcdn.etouch.cn/weather_mini
- 请求方法: get 请求参数: city 响应内容:天气信息
- 输入城市回车查询(@keyup.enter,v-model,v-for)
- 点击城市按钮查询(@click)
- 踩过的坑
- v-for中 oneCont in allCont 中数组的单个元素再HTML中用oneCont ，allCont在JS中必须被初始化
- methods中函数a调用函数b只需要this.functionb();即可
- 能够传递自定义参数的函数需要多加练习
综合案例-音乐播放器 L_V_11
- API接口：
- 音乐信息接口
- 接口地址:https://autumnfish.cn/search
- 请求方法: get 请求参数: keywords 响应内容:搜索信息
- 歌曲播放接口 （不可用，我也没找到可用的）
- 接口地址:https://autumfish.cn/song/url
- 请求方法: get 请求参数: id 响应内容:歌曲url
- 歌曲详情信息接口
- 接口地址https:/autumnfish.cn/song/detail
- 请求方法: get 请求参数: ids 响应内容:歌曲详情
- 歌曲评论信息接口
- 接口地址:https://autumnfish.cn/comment/hot?type=0（type也为其中的一个属性值因此用&相链接）
- 请求方法: get 请求参数: id 响应内容:歌曲评论详情
- 音乐视频信息接口
- 接口地址:https://autumnfish.cn/mv/url
- 请求方法: get 请求参数: id 响应内容:mv的url
- 音乐信息接口
- 歌曲搜索(@keyup.enter,v-model,v-for,axiox)
- 歌曲播放, 歌曲封面,歌曲评论,播放动画,播放MV(@click,axiox)
- 和之前做的东西差不多 也没踩什么坑 前面扎实了这里问题不大
- 对于播放旋转动画应该用到了一些组件，通过设置有无类名，来实现图片的旋转
- 旋转和mv我没有去做，只做了mv图标的显示的相关部分，其他部分和上述其实差不太多，音乐因为没找到api所以就找了个本地音乐
希望找到可用音乐url服务器的铁汁分享一下哈
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
