Vue
杨蛋蛋~R
花自向阳开放 我自向前成长
展开
-
vue 综合案例 - 音乐播放器
综合案例-音乐播放器功能:歌曲搜索:搜索歌曲,会出现相应歌曲1.按下回车(v-on.enter)2.查询数据(axios接口、v-model)3.渲染数据(v-for 结合数组)歌曲播放:点击播放按钮,歌曲会开始播放歌曲封面:播放歌曲同时,中间的封面会同步改变歌曲评论:点击歌曲,在右侧会出现对应歌曲的评论播放动画:歌曲播放时,中间的动画会和歌曲的播放同步mv播放:点击mv按钮,会出现一个遮罩层,中间可以看mv...原创 2020-10-31 10:21:32 · 791 阅读 · 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 · 301 阅读 · 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 · 141 阅读 · 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 · 280 阅读 · 0 评论 -
Vue笔记3 --vue指令:显示切换、属性绑定 / 案例:图片切换
vue指令:显示切换、属性绑定v-show根据表达式真假,切换元素的显示和隐藏v-ifv-bind原创 2020-10-28 17:28:12 · 308 阅读 · 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 · 164 阅读 · 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 · 187 阅读 · 0 评论