![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
杨蛋蛋~R
花自向阳开放 我自向前成长
展开
-
vue 综合案例 - 音乐播放器
综合案例-音乐播放器 功能: 歌曲搜索:搜索歌曲,会出现相应歌曲 1.按下回车(v-on.enter) 2.查询数据(axios接口、v-model) 3.渲染数据(v-for 结合数组) 歌曲播放:点击播放按钮,歌曲会开始播放 歌曲封面:播放歌曲同时,中间的封面会同步改变 歌曲评论:点击歌曲,在右侧会出现对应歌曲的评论 播放动画:歌曲播放时,中间的动画会和歌曲的播放同步 mv播放:点击mv按钮,会出现一个遮罩层,中间可以看mv ...原创 2020-10-31 10:21:32 · 774 阅读 · 0 评论 -
Vue学习笔记6-axios + vue / 案例:查询天气
axios 结合 vue 开发网络应用 例: <div id="app"> <input type="button" value="获取" @click="getJoke"> <p>{{ joke }}</p> </div> <!-- vue开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/原创 2020-10-29 15:57:12 · 280 阅读 · 0 评论 -
Vue笔记5-网络应用之axios简介
网络应用 Vue 结合网络数据开发应用 axios 功能强大的网络请求库 引入这个链接即可 <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script> axios.get(地址?查询字符串).then (function(response){ },function(err){ }) 第一个响应函数会在响应完成时触发,第二个响应函数会在请求失败时触发,它们的形参可以用于获取信息,一原创 2020-10-29 10:27:43 · 112 阅读 · 0 评论 -
Vue学习笔记4-vue指令for/model /案例:小黑记事本
vue指令 v-for 根据数据生成列表结构,数组经常和 v-for 结合使用 语法:v-for="item in arr" arr 是数组名(自定义的),in 是关键字,不可更改,item 是遍历的每一项,可以更改 item 和 index 可以结合其他指令一起使用 数组长度的更新会同步到页面上,是响应式的 <div id="app"> <input type="button" value="添加数据" @click="add"> <in原创 2020-10-29 09:44:38 · 247 阅读 · 0 评论 -
Vue笔记3 --vue指令:显示切换、属性绑定 / 案例:图片切换
vue指令:显示切换、属性绑定 v-show 根据表达式真假,切换元素的显示和隐藏 v-if v-bind原创 2020-10-28 17:28:12 · 294 阅读 · 0 评论 -
Vue 学习笔记2-本地应用- vue 指令:内容/事件的绑定 / 案例:计数器
本地应用 通过Vue实现常见的网页效果 vue 指令-内容/事件的绑定 vue 指令 指的是:以 v- 开头的一组特殊语法 v-text : 设置标签的文本值 默认写法会替换全部内容,使用差值表达式{{ }} 可以替换指定内容 每部支持写表达式 <body> <div id="app"> <h2 v-text="message+'!'">好的</h2> <!--结果为:yangdandan!--> <原创 2020-10-27 22:13:32 · 136 阅读 · 0 评论 -
VUE学习笔记1-- MVVM设计思想 / Vue 基础
Vue 基础 简介 是一种javascript 框架 简化DOM操作 响应式数据驱动(页面是由数据生成的,当数据改变以后,页面会同步更新) 第一个Vue程序 官方文档:http://cn.vuejs.org 导入开发版本的Vue.js <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 或者: <!-- 生产环境版原创 2020-10-27 20:35:23 · 173 阅读 · 0 评论