vue练习

最新推荐文章于 2023-07-22 20:43:31 发布
最新推荐文章于 2023-07-22 20:43:31 发布
阅读量137 收藏
点赞数
分类专栏： 学习总结 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_XiangShuai/article/details/113271344
版权
1、计数器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="sub">-</button>
    <span>{{ num }}</span>
    <button @click="add">+</button>
</div>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            add:function (){
                if(this.num<10){
                    this.num++
                }else {
                    alert("别点啦，最大啦！")
                }
            },
            sub:function (){
                if(this.num>0){
                    this.num--
                }else {
                    alert("别点啦，最小啦")
                }
            }
        }
    })
</script>
</body>
</html>
2、图片切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="photo">
    <div class="center">
        <h2 class="title">
            请输入英雄：
        </h2>
        <img :src="imgArr[index]" alt="" class="content">
        <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
            <img src="./img/左箭头.png" alt="">
        </a>
        <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
            <img src="./img/右箭头.png" alt="">
        </a>
    </div>
</div>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el:"#photo",
        data:{
            imgArr:[
                "./img/猴子.png",
                "./img/赵云.png",
                "./img/公孙离.png",
            ],
            index:0
        },
        methods:{
            prev:function (){
                if(this.index>0){
                    this.index--;
                }
            },
            next:function (){
                if(this.index<2){
                    this.index++;
                }
            },
        }
    })
</script>
</body>
</html>
3、记事本
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section id="todoapp">
<!--输入框区域-->
    <header class="header">
        <h1>记事本</h1>
        <input class="new-todo" placeholder="请输入任务" autofocus="autofocus" @keyup.enter="add" v-model="inputValue">
    </header>

<!--列表区域-->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list">
                <div class="view">
                    <span class="index">{{index+1}}.</span>
                    <label>{{item}}</label>
                    <button class="destroy" @click="remove(index)">X</button>
                </div>
            </li>
        </ul>
    </section>

<!--统计区域-->
    <footer class="footer" v-show="list.length!=0">
        <span class="toCount">
            <strong>{{list.length}}</strong>
             items left
        </span>
        <button class="clear" @click="clear">clear</button>
    </footer>
</section>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el:"#todoapp",
        data:{
            list:["写代码","吃饭饭","睡觉觉"],
            inputValue:"好好学习"
        },
        methods:{
            add:function (){
                this.list.push(this.inputValue)
            },
            remove:function (index){
                this.list.splice(index,1)
                //剪切列表数据（从index开始，剪1个）
            },
            clear:function (){
                this.list=[]
            }
        }
    })
</script>
</body>
</html>
4、axios基本使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input class="get" value="getRequest" type="button">
    <input class="post" value="postRequest" type="button">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // 接口1：随机笑话
        // 请求地址：https://autumnfish.cn/api/joke/list
        // 请求方法：get
        // 请求参数：num(笑话条数，数字)
        // 响应内容：随机笑话
        document.querySelector(".get").onclick=function (){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
                .then(function (response){
                    console.log(response)
                },function (err){
                    console.log(err)
                })
            //then后面是回调函数，返回成功或错误信息
        }

        // 接口2：用户注册
        // 请求地址：https://autumnfish.cn/api/user/reg
        // 请求方法：post
        // 请求参数：username(用户名，字符串)
        // 响应内容：注册成功或失败
        document.querySelector(".post").onclick=function (){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"})
            .then(function (response){
                console.log(response)
            },function (err){
                console.log(err)
            })
        }
    </script>
</body>
</html>
5、axios+vue
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function (){
                    //axios回调函数中的this已经改变，无法访问到data中数据，需要提前将this保存起来
                    var that = this
                    axios.get("https://autumnfish.cn/api/joke").then(function (response){
                        that.joke=response.data
                    },function (err){
                        console.log(err)
                    })
                }
            }
        })
    </script>
</body>
</html>
6、网络应用-城市天气查询
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" autofocus="autofocus" @keyup.enter="searchWeather" v-model="city">
        <input type="button" value="搜索" @click="searchWeather">
        <div class="hotkey">
            <a href="javascript:void(0)" @click="changeCity('北京')">北京</a>
            <a href="javascript:void(0)" @click="changeCity('上海')">上海</a>
            <a href="javascript:void(0)" @click="changeCity('广州')">广州</a>
            <a href="javascript:void(0)" @click="changeCity('深圳')">深圳</a>
        </div>
        <ul class="weather_list">
            <li v-for="item in weatherList">
                <div class="info_type"><span class="iconfont">{{item.type}}</span></div>
                <div class="info_temp">
                    <b>{{item.low}}</b>
                    ~
                    <b>{{item.high}}</b>
                </div>
                <div class="info_date"><span>{{item.date}}</span></div>
            </li>
        </ul>
    </div>


    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <script>
    //  请求地址：http://wthrcdn.etouch.cn/weather_mini
    //  请求方法：get
    //  请求参数：city（城市名）
    //  响应内容：天气信息
        var app = new Vue({
            el:"#app",
            data:{
                city:"城市",
                weatherList: []
            },
            methods:{
                searchWeather:function (){
                    var that = this
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                        .then(function (response){
                            that.weatherList=response.data.data.forecast
                        })
                        .catch(function (err){})
                },
                changeCity:function (city){
                    this.city=city
                    this.searchWeather()
                }
            }
        })
    </script>
</body>
</html>
7、网络应用-音乐播放器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="player">
        <!--搜索歌曲-->
        <div class="search_bar">
            <input autofocus="autofocus" v-model="query" @keyup.enter="searchMusic">
            <button @click="searchMusic">搜索</button>
        </div>

        <div class="center_con">
            <!--搜索歌曲列表-->
            <div>
                <ul>
                    <li v-for="item in musicList">
                        <a href="javascipt:;" @click="playMusic(item.id)">X</a>
                        <b>{{item.name}}</b>
                        <span v-show="item.mvid!=0" @click="playMV(item.mvid)"><i>MV</i></span>
                    </li>
                </ul>
            </div>

            <!--歌曲信息容器-->
            <div class="player_con" :class="{playing:isplaying}">
            <!--class=playing用于图片旋转，暂未实现-->
                <img :src="musicCover" class="musicCover">
            </div>

            <!--评论容器-->
            <div class="comment_wrapper">
                <h5>热门评论</h5>
                <dl v-for="item in commentList">
                    <dt>{{item.user.nickname}}:</dt>
                    <dd>{{item.content}}</dd>
                </dl>
            </div>

            <!--播放器-->
            <div class="audio_con">
                <audio ref='audio' :src="musicURL" controls autoplay class="myaudio"
                       @play="play" @pause="pause"></audio>
                <!--controls:带有浏览器默认控件,autoplay:自动播放-->
            </div>

            <!--mv播放器-->
            <div class="video_con" v-show="isShow" style="display: none">
                <video controls :src="mvURL" autoplay></video>
            </div>
        </div>
    </div>

    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <script>
        //1歌曲搜索接口
        // 请求地址：https://autumnfish.cn/search
        // 请求方法：get
        // 请求参数：keywords(查询关键字)
        // 响应内容：歌曲搜索结果

        //2歌曲url获取接口
        // 请求地址：https://autumnfish.cn/song/url
        // 请求方法；get
        // 请求参数：id(查询关键字)
        // 响应内容：歌曲url地址

        // 3歌曲详情获取
        // 请求地址：https://autumnfish.cn/song/detail
        // 请求方法：get
        // 请求参数：ids(歌曲id)
        // 响应内容：歌曲详情（包括封面信息）

        // 4热门评论获取
        // 请求地址：https://autumnfish.cn/comment/hot?type=0
        // 请求方法：get
        // 请求参数：id(歌曲id,地址中的type固定为0)
        // 响应内容：歌曲的热门评论

        // 5MV地址获取
        // 请求地址：https://autumnfish.cn/mv/url
        // 请求方法：get
        // 请求参数：id(mvid,为0表示没有mv)
        // 响应内容：mv的地址

        var app = new Vue({
            el:"#player",
            data:{
                query:"周杰伦",
                musicList:[],
                musicURL:"",
                musicCover:"",
                commentList:[],
                isplaying:false,
                mvURL:"",
                isShow:false,
            },
            methods:{
                searchMusic:function (){
                    var that = this
                    axios.get("https://autumnfish.cn/search?keywords="+this.query)
                        .then(function (response){
                            that.musicList=response.data.result.songs
                        },function (err){
                            console.log(err)
                        })
                },
                playMusic:function (musicId){
                    var that = this
                    axios.get("https://autumnfish.cn/song/url?id="+musicId)
                        .then(function (response){
                            that.musicURL=response.data.data[0].url
                        },function (err){
                            console.log(err)
                        })
                    axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
                        .then(function (response){
                            that.musicCover=response.data.songs[0].al.picUrl
                        },function (err){
                            console.log(err)
                        })
                    axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId)
                        .then(function (response){
                            that.commentList=response.data.hotComments
                        },function (err){
                            console.log(err)
                        })
                },
                play:function (){
                    this.isplaying=true
                    console.log(this.isplaying)
                },
                pause:function (){
                    this.isplaying=false
                    // console.log(this.isplaying)
                },
                playMV:function (mvid){
                    var that = this
                    axios.get("https://autumnfish.cn/mv/url?id="+mvid)
                        .then(function (response){
                            that.mvURL=response.data.data.url
                            console.log(that.mvURL)
                            that.isShow=true
                        },function (err){
                            console.log(err)
                        })
                }
            }
        })
    </script>
</body>
</html>
不是大雄也可以有哆啦a梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-examples:vue练习
04-01
例子 vue练习
vue项目练习大全
m0_61348045的博客
02-06 1465
vue项目大全
Vue练习题（带解析）
qq_60245590的博客
06-11 7090
在目标页面中获取 query 参数的正确方式是使用 $route.query.参数名，而不是 this.route.query.参数名。但是它并不包含父作用域中的属性。C. 通过 npx vue-cli-service helps 命令是错误的，正确的命令是 npx vue-cli-service help，用于查看可用命令的帮助信息。要访问父作用域中的属性，可以使用 Vue 提供的 props 选项来声明父组件向子组件传递的属性，然后在子组件内部使用 this.$props 来访问这些属性。
【Vue】入门练习
清风微醺的博客
07-06 547
在new Vue中定义一个数据msg,在body模块显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head&g
VUE练习
AimerDaniel的博客
08-02 174
1、VUE练习 2、VUE组件化的思想 3、VUE路由机制 4、京淘后台管理搭建 5、前后端分离思想MP
Vue练习
鹿蹊zz的博客
07-30 730
如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）。v-for的优先级比v-if高，每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。.
vue练习项目1111111111111111111111111
04-23
1111111111111111111111111111111111111
vue知乎项目vue练习
06-06
适合初步学习vue的技术里面有代码包括路由ajax还有vuex
vue练习.zip
08-06
该压缩文档内容为一个普通的vue练习，附答案，内容涉及简单的排序，增删改查一些简单的功能
前端工程师--vue练习小项目
09-25
vue初级小项目,有网页记事本，网页天气预报，意在巩固vue基础，暂时还没涉及到脚手架，后续会逐步更新大型项目哈哈~~
Vuejs项目练习
虎康的博客
10-07 682
练习一： 作业需求：点击列表中的哪一项，那么该项文字变为红色（结合v-for和v-bind来实现 实现效果： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业</title> <style> .active{ color: red; } </style> &
VUE 超级详细教程
热门推荐
weixin_42371679的博客
06-06 5万+
一、安装 二、基础练习 1）引入vue.js 解释： 注意：被挂载的div要放在vue的上面，否则vue管不到 2）v-for 3）做一个计数器(v-on:click) 方法一：直接在标签里实现 <div id="app"> <h2>当前计数: {{count}}</h2> <button v-on:click="count++">+</button> <button v-on:cl
vue习题
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
VUE的基本使用。
qq_61576523的博客
04-06 8461
要想使用vue，你要先安装一个名字叫：Vscode这个软件，这个软件的安装，在这就不说了。在这里直接进行演示。 1，首先你要先创建一个文件夹， 把vue的jar包和jquery的jar包都放进去，然后再在里面创建一个文件，名字可以自定义，一开始创建好是一个空白，你输入！号后点击回车后会呈现出这个界面。 2.写导入jar包的代码。 我在这里有新建了一个文件夹js放，把这两个jar包都放到了js里面所以他的导入jar包的代码是这样的： <script src="js/vue.js" ty
vue实例练习和vue样式练习
qq_53366282的博客
03-18 1280
目录 vue实例练习和vue样式练习 1.vue实例练习 2.vue样式练习 vue实例练习和vue样式练习 1.vue实例练习 <head> <title>vue实例演示</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <!-- 过滤器的两种写法 -
【Vue】项目练习
清风微醺的博客
08-10 1497
Vue 实战快速上手
Vue面试题：30道含答案和代码示例的练习题
三拾的博客
05-05 1471
这里使用v-model指令将用户输入的内容绑定到Vue实例的message属性上，然后使用v-on指令监听键盘输入事件，当用户按下“Enter”键时调用Vue实例的sendMessage方法。v-model指令会在表单元素上创建一个监听器，在用户输入时实时更新Vue实例的数据，并且在Vue实例数据变化时更新表单元素的值。Vue组件是可复用的Vue实例，具有自己的模板、状态和行为。mixins可以将多个组件之间的共享功能抽离出来，形成一个混入对象，在组件中引入该混入对象即可获得该对象的所有属性和方法。
2023年最新50道Vue全套vue2+vue3面试题带答案汇总
最新发布
tangdou369098655的博客
07-22 9982
• M - Model 数据：数据实体,用来保存页面要展示的数据。比如ajax获取的数据。• V - View 视图，显示数据的页面，一般为html。• C - Controller 控制器： 控制整个业务逻辑,负责处理数据,比如数据的获取,以及数据的过滤，进而影响数据在视图上的展示。MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。
vue案例练习
weixin_43526403的博客
01-29 603
vue案例练习（Vue2版本）
vue练习简单学生信息
05-26
以下是一个简单的学生信息管理系统的 Vue 练习示例： 1. 在 HTML 中定义一个表格，用于展示学生信息。 ```html 姓名 年龄 性别 成绩 (student, index) in students" :key="index"> <td>{{ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值