Vue案例

最新推荐文章于 2022-04-21 17:15:37 发布
最新推荐文章于 2022-04-21 17:15:37 发布
阅读量158 收藏 1
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Free_time_/article/details/107896996
版权

一、计数器

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>计数器</title>
</head>

<body>
    <div id="app">
        <button @click="sub">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++
                    }
                    else{
                        alert("别点啦，最大值！")
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num--
                    }
                    else{
                        alert("别点啦，到底啦！")
                    }
                }
            },
        })
    </script>
</body>
</html>

二、图片切换

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>V-show</title>
</head>

<body>
    <div id="mask">
        <h2>乐山师范学院</h2>
        <img width="1000" :src="imgArr[index]">
        <br>
        <br>
        <input type="button" value="上一张" @click="prev" v-show="index>0"> 
        <input type="button" value="下一张" @click="next" v-show="index<imgArr.length-1">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#mask",
            data: {
                imgArr: [
                    "./image/ls-1.jpg",
                    "./image/ls-2.jpg",
                    "./image/ls-3.jpg",
                    "./image/ls-4.jpg",
                    "./image/ls-5.jpg",
                    "./image/ls-6.jpg",
                    "./image/ls-7.jpg"
                ],
                index: 0,
                previsShow: false
            },
            methods: {
                prev:function(){
                    this.index--
                },
                next:function(){
                    this.index++
                }
            }
        })
    </script>
</body>
</html>

三、小红记事本

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>小红记事本</title>
    <style>
        ul,li{
            list-style-type: none；
        }
    </style>
</head>

<body>
    <div id="note">
        <h2>欢迎使用小红记事本</h2>
        <input type="text" v-model="inputValue" @keyup.enter="add">
        <ul v-for="iterm,index in list">
            <li>{{ index+1 }}. {{ iterm }}   <input type="button" value="delete" @click="del(index)"></li>
        </ul>
        <br>
        <span v-show="list.length > 0"><i>{{ list.length }} 项事宜未完成！</i><input type="button" value="clear" @click="clear"></span>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#note",
            data: {
                list: [
                    "吃饭",
                    "睡觉",
                    "打豆豆"
                ],
                inputValue: "请输入后按回撤..."
            },
            methods: {
                add:function(){
                    this.list.push(this.inputValue);
                },
                del:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list = [];
                }
            }
        })
    </script>
</body>
</html>

四、天气早知道

在这里插入图片描述

main.js

/*
    接口：http://wthrcdn.etouch.cn/weather_mini
    方法：get
    参数：city（城市）
    返回：该城市一周的天气状况
*/

var app = new Vue({
    el: "#app",
    data: {
        city: "深圳",
        weatherList: []
    },
    methods: {
        searchWeather:function(){
            var that = this;
            console.log(this.city);
            url = "http://wthrcdn.etouch.cn/weather_mini?city=" + this.city;
            axios.get(url).then(function(response){
                that.weatherList = response.data.data.forecast;
                console.log(that.weatherList)
            }, function(err){
                console.log(err)
            })
        },
        changeCity:function(city){
            this.city = city;
            this.searchWeather();
        }
    }
})

index.html

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>天气早知道</title>
</head>

<body>
    <div id="app">
        <h2>天气早知道</h2>
        <input type="text" value="请输入城市名称" v-model="city" @keyup.enter="searchWeather"> <button id="input_sub" @click="searchWeather">搜索</button>

        <br>

        <a href="javascript:;" @click="changeCity('北京')">北京</a>
        <a href="javascript:;" @click="changeCity('上海')">上海</a>
        <a href="javascript:;" @click="changeCity('广州')">广州</a>
        <a href="javascript:;" @click="changeCity('深圳')">深圳</a>

        <ul>
            <li v-for="item in weatherList">
               {{ city }}天气： {{ item.date }}  {{ item.type }}  {{ item.low }}~{{ item.high }}  {{ item.fengli }} {{  item.fengxiang }} <hr>
            </li>
        </ul>
    </div>

    <!--官网提供的 axios cdn地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/main.js">
        /*
            接口：http://wthrcdn.etouch.cn/weather_mini
            方法：get
            参数：city（城市）
            返回：该城市一周的天气状况
        */
    </script>
</body>
</html>

五、邂听音乐

在这里插入图片描述

main.js

/*
    接口1：https://autumnfish.cn/search
    方法：get
    参数：keywords（关键字）
    返回：与该关键字相关的歌曲列表

    接口2：https://autumnfish.cn/song/url
    方法：get
    参数：id（歌曲id）
    返回：返回该歌曲在线播放地址

    接口3：https://autumnfish.cn/comment/hot?type=0
    方法：get
    参数：id（歌曲id）
    返回：返回该歌曲热门评论
*/

var app = new Vue({
    el: "#music",
    data: {
        query: "周杰伦",
        musicList: [],
        musicUrl: "",
        comments: []
    },
    methods: {
        searchMusic:function(){
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function(response){
                console.log(response.data.result.songs);
                that.musicList = response.data.result.songs;
            }, function(err){
                console.log(err);
            })  
        },
        getMusicUrl:function(id){
            var that = this;
            axios.get("https://autumnfish.cn/song/url?id=" + id).then(function(response){
                console.log(response.data.data[0].url);
                that.musicUrl = response.data.data[0].url;
            }, function(err){
                console.log(err)
            }),

            axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + id).then(function(response){
                console.log(response.data.hotComments);
                that.comments = response.data.hotComments;
            }, function(err){
                console.log(err);
            })
        }
    }
})

index.html

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>邂听音乐</title>
</head>

<body>
    <div id="music">
        <h2>欢迎使用邂听</h2>
        <input type="text" v-model="query" @keyup.enter="searchMusic"> <input type="button" value="搜索" @click="searchMusic">
        
        <audio ref="audio" :src="musicUrl" controls autoplay loop></audio>

        <ul v-for="item,index in musicList">
            <li><input type="button" value="播放" @click="getMusicUrl(item.id)"> {{ index+1 }}. {{ item.name }}</li>
        </ul>

        <h3>热门评论</h3>
        <ul v-for="item in comments">
            <li>{{ item.user.nickname }} - {{ item.content}}</li>
        </ul>

    </div>

    <!--官网提供的 axios cdn地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/5-main.js">
     
    </script>
</body>
</html>
xianyuLuo.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【第七篇】Vue实战综合案例
波波烤鸭的博客
07-12 8万+
  本文我们通过一个小案例来巩固下前面讲的内容，具体案例效果如下: 其实也就是实现对表单数据的添加，删除和关键字查询的操作。 综合案例 1.页面布局   页面布局我们通过bootstrap来快速实现，具体步骤如下 1.1 基础页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
vue自定义指令v-loading
前端阿玉博客
07-14 2万+
1. 创建文件 1.在 src目录下创建一个directiveLoading文件夹，然后这个文件夹下创建1个loading文件夹和index.js文件，loading文件夹下分别创建Loading.vue和index.js文件。 directiveLoading的index.js文件用来暴露安装插件接口。如下所示
vue案例实战
m0_51134729的博客
04-21 6116
案例实战 1. 创建项目 npm create vite@latest 0410-vue3-vuex-project 我们这个项目会用 vite2.8 + Vue3.2 + Router4 + Vuex4 + TypeScript4.6 + Element-Plus + axios 2. 安装依赖 npm install vue-router@4 npm install vuex@next npm install axios npm install element-plus npm install les
Vue项目案例
搬砖中
12-30 2万+
路由：index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import First from '../views/first.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: First }, { path: '/about', ..
Vue常见项目案例
皮皮的博客
10-12 1万+
Vue.js 项目案例（不断收集中…） 应用实例 https://github.com/phanan/koel koel-基于网络的个人音频流媒体服务 https://github.com/pagekit/pa… pagekit-轻量级的CMS建站系统 https://github.com/Vuedo/vuedo vuedo-博客平台 https://github.com/jackhutu/j… ...
vue案例小黑记事本详解
Im_xiaopei的博客
10-04 2293
大家好，今天学的东西不是很多，但遇到了一个特别有趣的vue小案例吧，我觉得可以拿出来给大家伙练练手，虽然案例简单，并不复杂，但也算是涵盖了vue大部分的常用知识点，希望大家可以多练练，有助于vue的学习。 正题开始。。。 案例叫做小黑记事本，大致长这个样子 大致功能是这个样子的， 1.在输入框中输入内容，点击回车，会将输入的内容按顺序放入下面的列表中， 2.再放入的过程中会自动统计记录的数量，显示在左下角 3.当鼠标点击对应的列表...
练习 | vue案例 100
A123ppleQueen的博客
02-22 1202
Backbone.js • TodoMVC
分享几个Vue案例供大家一起学习
WebView
12-23 4530
1、适合学习Vue的同学们的第二个项目，同样来自慕课网，代码同样进行了详细注释。 完成后可以算是Vue学习的初级水平。 (https://github.com/SD-Gaming/Vue2.0-ShoppingCart-MOOC) 2、用了Vue-router，axios 完成后算是初中级水平 (https://github.com/SD-Gaming/Vue2.0_CNode.bbs) 3、 V...
vue项目开发实战案例
热门推荐
代上老码的专栏
07-22 2万+
今天分享一些vue基础实战例子 实例1: 渲染声明 渲染声明是 vue 的最核心模块。 vue 基于传统的 HTML 模板语法，将 DOM 绑定到 vue 实例上，然后 vue 在底层的实现上，将 模板编译成虚拟 DOM 渲染函数(render function)。 <!DOCTYPE html> <html lang="en"> <head> &lt...
SpringBoot + Vue 案例实战完整代码（第一版）
07-01
《SpringBoot + Vue 案例实战完整代码（第一版）》 本案例实战项目结合了SpringBoot和Vue.js两大主流技术，旨在提供一个全面、实际的开发体验，帮助开发者快速掌握这两项技术的整合应用。SpringBoot是Spring框架的...
vue案例代码 vue案例代码
11-22
这个“Vue案例代码”可能包含了一些示例项目或教程，帮助学习者深入理解和掌握Vue.js的核心概念和特性。以下是对Vue.js的一些关键知识点的详细说明： 1. **组件系统**：Vue.js的核心是其强大的组件系统，它允许...
vue案例练习
08-10
在“vue案例练习”这个主题中，我们主要会探讨如何使用Vue.js进行实际项目开发和练习。 1. **基础概念** - **Vue实例**：Vue应用的核心就是Vue实例，它包含了数据、方法、生命周期钩子等属性和方法。 - **模板...
SpringBoot + Vue 案例实战完整代码（第二版）
07-01
在本项目中，"SpringBoot + Vue 案例实战完整代码（第二版）" 提供了一个基于SpringBoot和Vue.js的实际开发案例，旨在帮助开发者深入理解和应用这两个流行的技术栈。项目结合了Spring的多个核心模块，如Spring、...
echart渐变折线图
09-04
echart渐变折线图
Java项目-基于微信小程序的驾校预约管理系统（包括源码，数据库，教程）.zip
09-04
Java毕设，小程序毕业设计，小程序课程设计，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，该项目可以作为毕设、课程设计使用，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！可以放心下载 1. 技术组成 前端： 小程序 后台框架：SSM/SpringBoot（如果有的话） 开发环境：idea，微信开发者工具 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库可视化工具：使用 Navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本），maven
毕业答辩模板极简创意几何风毕业答辩模板毕业答辩模板极简创意几何风毕业答辩模板
09-04
毕业答辩模板极简创意几何风毕业答辩模板毕业答辩模板极简创意几何风毕业答辩模板提取方式是百度网盘分享地址
Python与深度学习基础作业1,利用PyQt5,以桌面GUI为载体,requests库为爬虫手段
最新发布
09-04
Python与深度学习基础作业1,利用PyQt5,以桌面GUI为载体,requests库为爬虫手,_Python_hw1.zip段,_Python_hw1
Axure9实例教程的课件，CSDN专栏文章的附件，RP格式案例源文件
09-04
1.本品是Axure 9 实例教程的课件 (Axure 10 也适用)，是RP格式课件。 2.配套教程是以实战案例的角度，讲解Axure 9 的基础操作，适合1年左右的产品经理、Axure已经入门的同学，不适合零基础者。 3.CSDN配套教程：https://blog.csdn.net/congzi530/category_10655894.html 4.RP课件在线预览：https://u.pmdaniu.com/L8A5p
webRTC vue案例
04-05
下面是一个简单的WebRTC Vue案例： 1. 安装Vue和WebRTC相关的库 ``` npm install vue webrtc-adapter vue-webrtc ``` 2. 在Vue组件中引入WebRTC组件 ```html <video ref="localVideo" autoplay muted></...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值