Vue入门小练习

最新推荐文章于 2024-08-26 08:30:34 发布
最新推荐文章于 2024-08-26 08:30:34 发布
阅读量439 收藏
点赞数
分类专栏： 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mfysss/article/details/129223974
版权

文章目录

使用一些简单的小案例来熟悉Vue的基本使用方法

Hello Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloVue</title>
</head>
<body>
    <!--
    Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
    unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js。
    cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
    -->
    <div>
      <h1>{{info}}</h1>
    </div>
    <!--引入Vue框架文件-->
    <!--
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    -->
    <script src="vue.min.js"></script>
    <script>
        let v = new Vue({
            el:"div",
            data:{
                info:"Hello VUE!"
            }

        });
        setTimeout(function (){
            v.info="值改变了";
        }, 3000)
    </script>
</body>
</html>

Vue文本指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE指令</title>
</head>
<body>
    <div>
        <!--插值, 不依赖于标签,即使没有标签也能和变量进行绑定-->
        {{info}}

        <p>{{info}}</p>

        <!--让元素的文本内容和变量进行绑定-->
        <p v-text="info"></p>

        <!--让元素的标签内容和变量进行绑定-->
        <p v-html="info"></p>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <script>
        let v = new Vue({
            el:"div",
            data:{
                info:"文本相关<b>加粗</b>"
            }
        })
    </script>
</body>
</html>

Vue属性绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定</title>
</head>
<body>
    <div>
        <a v-bind:href="url">超链接1</a>
        <!--省略v-bind是简写-->
        <a :href="url">超链接2</a>

        <img :src="imgUrl" alt="" width="150px">
        <input type="text" :value="info">
    </div>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <script>
        let v = new Vue({
            el:"div",
            data:{
                url:"http://www.baidu.com",
                imgUrl:"../touxiang.png",
                info:"测试文本内容"
            }
        })

        setTimeout(function (){
            v.url = "http://www.youku.com";
            v.imgUrl = "b.jpg";
            v.info = "值改变了";
        }, 3000);


    </script>
</body>
</html>

Vue双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
</head>
<body>

    <div>
        <input type="text" v-model="info">
    </div>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <script>
        let v = new Vue({
            el:"div",
            data:{
                info:"双向绑定"
            }
        })

        setTimeout(function () {
            alert("用户输入的是:"+v.info)
        },3000);
    </script>
</body>
</html>

Vue事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
    <div>
        <input type="text" v-model="info">
        <!--v-on:事件名="方法名" 事件绑定-->
        <input type="button" value="按钮1" v-on:click="f">
        <!--简写-->
        <input type="button" value="按钮2" @click="f()">
    </div>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        let v = new Vue({
            el:"div",
            data:{
                info:""
            },

            methods:{
                f(){
                    alert(v.info)
                }
            }
        })
    </script>
</body>
</html>

Vue猜数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue猜数字</title>
</head>
<body>
    <div>
        <input type="text" v-model="num"  placeholder="请输入1-100之间的整数">
        <input type="button" value="猜一猜" @click="diy()">
        <div>
            结果: {{result}}
        </div>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>

        //生成1-100的整数
        let x = parseInt(Math.random()*100)+1;

        let v = new Vue({
            el:"body>div",
            data:{
                result:"还未点击",
                num:""
            },

            methods:{
                diy(){
                    //判断用户输入的值和x的关系
                    if (v.num > x){
                        v.result="猜大了";
                    }else if (v.num < x){
                        v.result = "猜小了";
                    }else{
                        v.result="恭喜你猜对了!"
                    }
                }
            }
        })


    </script>
</body>
</html>

Vue简单计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue计算器</title>
</head>
<body>
    <div>
        <input type="text" v-model="n1">
        <input type="text" v-model="n2">
        <input type="button" value="加" @click="f(1)">
        <input type="button" value="减" @click="f(2)">
        <input type="button" value="乘" @click="f(3)">
        <input type="button" value="除" @click="f(4)">
        <div>结果: {{result}}</div>
    </div>

    <!--引入Vue框架-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        let v = new Vue({
            el:"body>div",
            data:{
                result:"",
                n1:"",
                n2:""
            },
            methods:{
                f(x){
                    switch (x){
                        case 1://加
                            v.result = v.n1*1 + v.n2*1;
                            break;
                        case 2://减
                            v.result = v.n1*1 - v.n2*1;
                            break;
                        case 3://乘
                            v.result = (v.n1*1) * (v.n2*1);
                            break;
                        case 4://除
                            v.result = (v.n1*1) / (v.n2*1);
                            break;
                    }
                }
            }
        })
    </script>
</body>
</html>

Vue简单计算器升级版

<head>
    <meta charset="UTF-8">
    <title>Vue计算器升级版</title>
</head>
<body>
    <div>
        <input type="text" v-model="n1">
        <input type="text" v-model="n2">
        <input type="button" value="加" @click="f('+')">
        <input type="button" value="减" @click="f('-')">
        <input type="button" value="乘" @click="f('*')">
        <input type="button" value="除" @click="f('/')">
        <div>结果: {{result}}</div>
    </div>

    <!--引入Vue框架-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        let v = new Vue({
            el:"body>div",
            data:{
                result:"",
                n1:"",
                n2:""
            },
            methods:{
                f(x){
                    //eval("5-2")  此方法可以将字符串以JS代码的形式执行
                    v.result = eval(v.n1 + x + v.n2);
                }
            }
        })
    </script>
</body>
</html>

Vue循环遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue循环遍历</title>
</head>
<body>
    <div>
        <ul>
            <!--v-for循环遍历指令,遍历的过程中生成当前元素-->
            <li v-for="name in arr">{{name}}</li>
        </ul>
        <p v-for="name in arr">{{name}}</p>
        <h1 v-for="name in arr">{{name}}</h1>

        <p v-for="p in persons">名字:{{p.name}}, 年龄:{{p.age}}, 类型:{{p.type}}</p>

        <table border="1">
            <caption>英雄列表</caption>
            <tr>
                <th>名字</th>
                <th>年龄</th>
                <th>类型</th>
            </tr>
            <tr v-for="p in persons">
                <td>{{p.name}}</td>
                <td>{{p.age}}</td>
                <td>{{p.type}}</td>
            </tr>
        </table>
    </div>


    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        let v = new Vue({
            el:"div",
            data:{
                arr:["刘备","关羽","诸葛亮","孙尚香","刘禅"],
                persons:[{name:"刘备", age:"50", type:"战士"},
                    {name:"孙尚香", age:"20", type:"射手"},
                    {name:"诸葛亮", age:"30", type:"法师"}]
            },

            methods:{

            }
        })

    </script>
</body>
</html>

Vue员工列表练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表练习</title>
</head>
<body>

    <div>
        <input type="text" placeholder="姓名" v-model="emp.name">
        <input type="text" placeholder="工资" v-model="emp.salary">
        <input type="text" placeholder="工作" v-model="emp.job">
        <input type="button" value="添加" @click="f()">

        <table border="1">
            <caption>员工列表</caption>
            <tr>
                <th>姓名</th>
                <th>工资</th>
                <th>工作</th>
            </tr>
            <tr v-for="p in arr">
                <td>{{p.name}}</td>
                <td>{{p.salary}}</td>
                <td>{{p.job}}</td>
            </tr>
        </table>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        let v = new Vue({
            el:"div",
            data:{
                arr:[{name:"张三",salary:3000,job:"销售"},
                    {name:"李四",salary:4000,job:"人事"},
                    {name:"王五",salary:10000,job:"程序员"}],
                emp:{
                    name:"",
                    salary:"",
                    job:""
                }
            },

            methods:{
                f(){
                    //push()是JavaScript中数组里面的添加方法
                    // v.arr.push(v.emp); //用这种方式是对原对象的引用,值会随着文本框的内容改变

                    /*
                    v.arr.push({name:"赵六",salary:10000,job:"程序员"})
                    JSON.parse(JSON.stringify(v.emp))创建了一个新的对象添加到数组中
                    此时emp对象的值发生改变和数组中的新对象是无关的,
                    这种复制出来的和原对象无关的方式称为深拷贝(有引用关系的是浅拷贝)
                    */
                    v.arr.push(JSON.parse(JSON.stringify(v.emp)));
                }
            }
        })
    </script>

</body>
</html>

Vue小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习</title>
</head>
<body>
    <div>
      <table border="1">
          <caption>个人信息</caption>
          <tr>
              <td>照片</td>
              <td><img :src="person.url" width="150" alt=""></td>
          </tr>
          <tr>
              <td>名字</td>
              <td>{{person.name}}</td>
          </tr>
          <tr>
              <td>年龄</td>
              <td>{{person.age}}</td>
          </tr>
          <tr>
              <td>好友</td>
              <td>
                  <ul>
                      <li v-for="name in person.friend">{{name}}</li>
                  </ul>
              </td>
          </tr>
          <tr>
              <td colspan="2" style="text-align: center">
                  <input type="button" value="请求数据" @click="f()">
              </td>
          </tr>
      </table>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        let v = new Vue({
            el:"table",
            data:{
                person:{
                    name:"xxx",age:"xxx",
                    url:"../touxiang.png",
                    friend:[]
                }
            },

            methods:{
                f(){
                    v.person = {
                        name:"女生",age:"18",
                        url:"../touxiang2.png",
                        friend: ["Lucy","Mike","John"]
                    }
                }
            }
        })
    </script>
</body>
</html>

Vue显示隐藏相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏相关</title>
</head>
<body>
    <div>
      <!--v-if让元素是否显示和变量建立关系,如果变量值为false 则删除元素-->
      <h1 v-if="isVisible">刘德华</h1>
      <!--和上面v-if的显示状态取反-->
      <h1 v-else>张三</h1>

      <!--v-show让元素是否显示和变量建立关系,如果变量值为false 则隐藏元素(如果需要频繁切换显示状态)-->
      <h1 v-show="isVisible">张学友</h1>
      <h1>郭富城</h1>
    </div>
    <!--引入Vue框架-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
      let v = new Vue({
        el:"body>div",
        data:{
          isVisible:true
            // isVisible:true
        },
        methods:{

        }
      })
    </script>
</body>
</html>
没反应说说说
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js的入门练习案例
01-02
vue.js的入门练习案例 适用于后端程序员初学vue的练习 具体的文件可以参考博主的文章 博主首页：https://blog.csdn.net/weixin_43333483?spm=1011.2415.3001.5343 上述代码文件包含以下博客的练习代码 【Vue】一、...
Vue小练习-搜索框输入练习
weixin_73368873的博客
11-14 559
这是一个使用vue2的搜索框小练习，实现在搜索框输入内容，敲击回车返回结果的效果。这里调用了 axios库向GitHub发送请求，并返回请求。因为是个小练习，我就往简单的做，就不用脚手架了。
vue2练习五个小例子笔记
打杂人
02-22 6234
https://segmentfault.com/a/1190000008436978 主题 Vue.js vue2练习五个小例子笔记 多练习,多撸代码,多进步. 基于vue2 1.双向数据绑定 div id="main" @click="hideTooltip"> div class="tooltip" v-if="show_tooltip" @c
vue小练习
AndrewNeo
06-29 676
创建一个Vue实例 所有的Vue组件都是Vue实例,并且接受相同的选项对象 (一些根实例特有的选项除外)。 var vm=new Vue({ // 选项 }); 我们的数据对象 var data={a:1}; 该对象被加入到一个Vue实例中 var vm=new Vue({ data:data }); 获得这个实例上的属性,并返回源数据中对应的字段 ...
vue快速入门的三个小实例
qq_40479190的博客
11-27 1万+
1.前言 用vue做项目也有一段时间了。但是关于vue入门基础的文章，我还没有写过，那么今天就写vue入门的三个小实例，这三个小实例是我刚接触vue的时候的练手作品，难度从很简单到简单，都是入门级的。希望能帮到大家更好的学习和了解vue，也是让自己能够复习一下vue。如果发现文章写得有什么不好，写错了，或者有什么建议！欢迎大家指点迷津！ 1.本篇文章使用的vue版本是2.4.2，可能会和新
VueJs入门练习
天马行空的专栏
12-25 3645
开始阅读Vue官方文档，学习Vue开发。Vue可以让前端数据绑定和渲染更为方便，但要做出一套漂亮的界面，还是需要使用CSS相关的框架。 0. 预备，官方建议：刚开始上手不宜直接使用vue-cli工具，还是使用最简单的Vue引入方式： src="https://unpkg.com/vue"> 1. Vue声明式渲染数据 html> lang="en"> chars
vue知乎项目vue练习
06-06
Vue知乎项目是一个基于Vue的实践练习，旨在帮助初学者深入理解和应用Vue的核心概念。在这个项目中，你可以学习到以下关键知识点： 1. **Vue基本结构**：Vue项目通常包含`main.js`作为入口文件，这里会初始化Vue实例...
vue入门学习示例.zip
05-04
根据网上手工编写练习，供需要的用户快速浏览学习，index.html简单学习，super.html for学习，super two.html 自定义事件https://blog.csdn.net/maomaoqiukqq/article/details/99967143
vue学习vue入门
08-12
Vue的学习和入门涉及以下几个核心知识点： 1. **基础概念**： - **虚拟DOM**：Vue使用虚拟DOM来提高性能，它在内存中维护一个轻量级的DOM表示，减少与真实DOM的交互次数。 - **MVVM模式**：Vue采用Model-View-...
springboot+vue练习1
05-07
【描述】"springboot+vue练习1"是一个入门级的开发实例，它涵盖了SpringBoot的基础配置、Vue.js的基本用法以及它们之间的通信机制。这个项目可能包含了创建RESTful API、搭建Vue项目、数据交互等多个环节，是学习...
适合初学者练手的vue小项目（附github源码）
热门推荐
祈澈菇凉
01-22 9万+
vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。 如果在平时的工作里，有些公司用不到这两项技能，那你也要在业余的时间里面，找一些教程和练手的vue小项目。以下是今年的一些可以练笔的...
Ant Design Vue 快速上手指南与常见问题排查
windowshht的博客
08-22 1162
Ant Design Vue 是一款功能强大的 Vue 组件库，能够帮助开发者快速构建高质量的用户界面。通过本文的快速上手指南，您可以轻松地在项目中集成 Ant Design Vue，并解决常见问题。希望这篇文章能为您的开发工作提供帮助，提升您的开发效率。如需深入了解 Ant Design Vue 的更多功能和组件，请参考Ant Design Vue 官方文档。
vue ref和reactive区别
灰海
08-25 538
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
基于vue3和audio封装的简易音频播放器
weixin_43734732的博客
08-23 320
【代码】基于vue3和audio封装的简易音频播放器。
vue export的用法
weixin_41203765的博客
08-23 369
在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。
Vue Styled Components 新版本发布
As的博客
08-22 453
Feature ### 自动添加前缀(Auto Prefixing) vue-styled-components 会在编译 CSS 时自动添加浏览器私有前缀，这可以确保你的 CSS 规则在最常见的浏览器中兼容。
禁止浏览器默认填充密码 vue
weixin_42348009的博客
08-22 405
不能完全阻止浏览器自动填充。你还可以为账号和密码的输入框动态设置。可以防止浏览器自动填充表单中的账号和密码。属性，使浏览器难以识别这些字段。
移动端签名
notagoodwriter的博客
08-23 350
【代码】移动端签名。
Vue：快捷文本
最新发布
MMF博客园
08-26 360
Vue：快捷文本
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 325
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值