Vue入门小案例

最新推荐文章于 2024-05-07 09:17:29 发布
最新推荐文章于 2024-05-07 09:17:29 发布
阅读量2k 收藏 10
点赞数 1
分类专栏： Vue 文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46066741/article/details/105672060
版权

**

VUE入门

**
vue入门案例01

入门案例-01代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="cq">
    <!--在页面中显示变量值-->
    <h1 id>你好啊{{name}}</h1>
    <!--双向数据绑定-->
    <!--让变量跟页面进行绑定,任意改变其中一方,另一方随之改变-->
    <input type="text" v-model="name"><br><br><br>
    <input type="button" value="点击设置name属性" v-on:click="setName"><br><br><br>
    <input type="button" value="点击获取name属性" v-on:click="getName"><br>
</div>
<script>
    //创建Vue实例对象
    new Vue({
        el:"#cq",        //指定托管元素,基于这一部分进行数据渲染
        data:{           //数据模型,定义数据,渲染页面时根据数据进行填充
            name:"麻纸"
        },
        methods:{         //方法区域,可以定义一些方法,这些方法可以在Vue托管区域中调用
            setName:function () {
               var newName = prompt("请输入姓名");
               this.name=newName;
            },
            getName:function () {
                alert(this.name)
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述
案例-01 页面展示在这里插入图片描述
入门案例-02钩子函数代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="cq">
    <!--在页面中显示变量值-->
    <h1 id>你好啊{{name}}</h1>
    <!--双向数据绑定-->
    <!--让变量跟页面进行绑定,任意改变其中一方,另一方随之改变-->
    <input type="text" v-model="name"><br><br><br>
    <input type="button" value="点击设置name属性" v-on:click="setName"><br><br><br>
    <input type="button" value="点击获取name属性" v-on:click="getName"><br>
</div>
<script>
    //创建Vue实例对象
    new Vue({
        el:"#cq",        //指定托管元素,基于这一部分进行数据渲染
        data:{           //数据模型,定义数据,渲染页面时根据数据进行填充
            name:"麻纸"
        },
        methods: {         //方法区域,可以定义一些方法,这些方法可以在Vue托管区域中调用
            setName: function () {
                var newName = prompt("请输入姓名");
                this.name = newName;
            },
            getName: function () {
                alert(this.name)
            }
        },
        //在vue对象创建成功后执行一段代码
            created: function () {
                alert("vue对象创成功......")
            },
        //数据挂载成功后执行
        mounted:function () {
            alert("数据挂载成功......")
        },
        //数据更新成功后执行
        updated:function () {
            alert("数据更新成功......")
        }

    })
</script>
</body>
</html>

入门案例-03 插值表达式代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="cq">
    <!--作用在标签的内容体当中-->
    <h1 >你好啊: {{name}}</h1><br>
    <h1 >你好: {{1+8}}</h1><br>
    <h1 >你好: {{1+3>2}}</h1><br>
    <h1>年龄 : {{getAge()}}</h1>
    
</div>
<script>
    //创建Vue实例对象
    new Vue({
        el:"#cq",        //指定托管元素,基于这一部分进行数据渲染
        data:{           //数据模型,定义数据,渲染页面时根据数据进行填充
            name:"麻纸",
            age:25
        },
        methods:{
            getAge:function () {
                return this.age;
            }
        }
    })
</script>
</body>
</html>

入门案例-03 页面展示

在这里插入图片描述
入门案例-04 v-text指令代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="cq">
    <!--作用在标签的内容体当中-->
    <h1 >你好啊:<span v-text="name"></span> </h1><br>

</div>
<script>
    //创建Vue实例对象
    new Vue({
        el:"#cq",        //指定托管元素,基于这一部分进行数据渲染
        data:{           //数据模型,定义数据,渲染页面时根据数据进行填充
            name:"<font color='red'>麻纸</font>",
            age:25
        },
        methods:{
            getAge:function () {
                return this.age;
            }
        }
    })
</script>
</body>
</html>

入门案例-04 v-text页面展示
在这里插入图片描述
入门案例-05 v-html指令代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="cq">
    <!--作用在标签的内容体当中-->
    <h1 >你好啊:<span v-html="name"></span> </h1><br>
    <h1 >年龄:<span v-text="getAge()"></span> </h1><br>

</div>
<script>
    //创建Vue实例对象
    new Vue({
        el:"#cq",        //指定托管元素,基于这一部分进行数据渲染
        data:{           //数据模型,定义数据,渲染页面时根据数据进行填充
            name:"<font color='red'>麻纸</font>",
            age:25
        },
        methods:{
            getAge:function () {
                return this.age;
            }
        }
    })
</script>
</body>
</html>

入门案例-05 v-html页面展示
在这里插入图片描述
v-text与v-html的区别就在于能否解析html标签

入门案例-06 v-model指令代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="cq">
    <input type="checkbox" value="JAVA" v-model="language">JAVA<br>
    <input type="checkbox" value="PYTHON" v-model="language">PYTHON<br>
    <input type="checkbox" value="IOS" v-model="language">IOS<br>
    <input type="checkbox" value="ANDROID" v-model="language">ANDROID<br>

    <h1>{{language.join(",")}}</h1>

    <input type="button" value="重置" v-on:click="reset">

</div>
<script>
    //创建Vue实例对象
    new Vue({
        el:"#cq",        //指定托管元素,基于这一部分进行数据渲染
        data: {           //数据模型,定义数据,渲染页面时根据数据进行填充
            language:[]
        },
        methods:{
            reset:function () {
                this.language=[];
            }
        }
    })
</script>
</body>
</html>

入门案例-06 v-model页面展示
在这里插入图片描述
入门案例-07 v-on指令代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="cq">
  用户名:<input type="text" v-model="username" v-on:blur="checkUsername"><br>
  密码:<input type="text" v-model="password" v-on:blur="checkPassword"><br>

    <input type="submit" value="提交" v-on:click="submit">
</div>
<script>
    //创建Vue实例对象
    new Vue({
        el:"#cq",        //指定托管元素,基于这一部分进行数据渲染
        data: {           //数据模型,定义数据,渲染页面时根据数据进行填充
            username:"",
            password:""
        },
        methods: {
            checkUsername: function () {
                if (this.username == null || this.username == '') {
                    alert("请输入用户名");
                    return false;
                }
                return true;
            },
            checkPassword: function () {
                if (this.password == null || this.password == '') {
                    alert("请输入密码");
                    return false
                }
                return true;
            },
            submit:function () {
                if(this.checkUsername()==true&&this.checkPassword()==true){
                    alert("提交数据:"+this.username+":"+this.password)
                }
            }
        }
    })
</script>
</body>
</html>

入门案例-07 v-on页面展示
在这里插入图片描述
入门案例-08 v-for指令代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例</title>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <h1>遍历数组</h1>

    <table border="1px" >
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr v-for="(user,index) in users">
            <td>{{index+1}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.gender}}</td>
            <td><a href="">修改</a>&nbsp;&nbsp;<a href="">删除</a></td>
        </tr>
    </table>

    <h1>遍历对象键和值</h1>
    <ul>
        <li  v-for="(value,name) in admin"> {{name}} : {{value}}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            users:[
                {"name":"科比","age":8,"gender":"男"},
                {"name":"詹姆斯","age":12,"gender":"女"},
                {"name":"杜兰特","age":4,"gender":"男"}
            ],
            admin:{
                name:"yangguo",
                password:"123456",
                role:"admin",
                roledesc:"系统管理员"
            }
        }
    })
</script>
</body>
</html>

入门案例-08 v-for页面展示
在这里插入图片描述
入门案例-09 v-if指令代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例</title>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">

    <div v-if="flag">  <!--将v-if改成v-show同样可以-->
        Hello VueJS
    </div>

    <input type="button" value="点击切换" @click="change">

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            change:function () {
                this.flag = !this.flag ;
            }
        }
    })
</script>
</body>
</html>

入门案例-10 v-if2指令代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例</title>
    <style>
        .c1{
            background-color: skyblue;
        }
        .c2{
            background-color: yellowgreen;
        }
    </style>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <h1>遍历数组</h1>
    <table border="1px" >
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr v-for="(user,index) in users" class="c1" v-if="index%2==0">
            <td>{{index}}</td>
            <td>{{user.name}}</td>
            <td>{{user.name}}</td>
            <td>{{user.name}}</td>
            <td><a href="">修改</a>&nbsp;&nbsp;<a href="">删除</a></td>
        </tr>
        <tr class="c2" v-else>
            <td>{{index}}</td>
            <td>{{user.name}}</td>
            <td>{{user.name}}</td>
            <td>{{user.name}}</td>
            <td><a href="">修改</a>&nbsp;&nbsp;<a href="">删除</a></td>
        </tr>

    </table>

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            users:[
                {"name":"科比","age":8,"gender":"男"},
                {"name":"詹姆斯","age":12,"gender":"女"},
                {"name":"杜兰特","age":4,"gender":"男"},
                {"name":"安东尼","age":4,"gender":"男"},
                {"name":"加索尔","age":4,"gender":"男"},
                {"name":"麦迪","age":4,"gender":"男"}
            ]
        }
    })
</script>
</body>
</html>

入门案例-10 v-if2页面展示
在这里插入图片描述
入门案例-11 v-bind指令代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例</title>
    <style>
        #d1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }

        .c1{
            background-color: skyblue;
        }

        .c2{
            background-color: yellowgreen;
        }
    </style>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">


    <div id="d1" v-bind:class="color">

    </div>


    <br>
    <input type="button" value="天蓝色" @click="changeColor('c1')"> &nbsp;
    <input type="button" value="黄绿色" @click="changeColor('c2')">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            color:""
        },
        methods:{
            changeColor:function (color) {
                this.color=color;
            }
        }
    })
</script>
</body>
</html>

入门案例-11 v-bind页面展示
在这里插入图片描述

麻纸
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
VUE前端小例子
03-25
VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。
Vue简单练手案例
A_Common_Man的博客
05-05 4394
适合vue初学者的3个练手小案例，加深对数据驱动视图的理解，体会到与原生js直接操纵Dom节点的区别
2024年最全Vue学习之增删改查小案例，微信web开发
2401_84619145的博客
05-07 1054
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》Name:2.添加记录通过点击‘添加按钮’将数据添加到table中通过v-model指令将id和name输入框的信息和vm中的id和name绑定，给"添加按钮"绑定点击事件。
VUE入门+5个小案例
热门推荐
Beyondczn的博客
02-23 3万+
本文是我心血来潮学习Vue框架所做的笔记，也供童鞋们学习参考。作为后端的开发人员，学习前端的Vue框架只是单纯地去了解下前端框架的内容，所以并没有深入地去学习，因此本文只适合Vue入门的童鞋哦。由于我的能力有限，所写的内容可能有错误，小伙伴们可以在评论区中进行讨论。这篇笔记是根据哔哩哔哩大学中黑马程序员up主的视频内容进行记录的。视频地址：前端基础必会教程-4个小时带你快速入门vue，欢迎童鞋们去三连哦。 一、Vue基础 1.第一个Vue程序 步骤： 引入vue开发环境 <script sr.
Vue简单入门及案例
qq_54605990的博客
04-27 1787
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
初学者Vue超简单入门小例子
10-23 1935
Vue小实例 这是转载一个大大的，跟着敲了以后顿觉清明，于是记录下来 这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。 #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # # #之后会有如下询问 ? Proj
毫无废话，四个小案例手把手教你Vue2基础轻松入门_学习笔记
张晨曦 的 博客
04-14 904
本笔记将通过四个小案例介绍Vue2学习。教程通俗易懂，毫无废话。源自教程，但不局限于教程。有笔者自己的想法和思考。希望能对你有所帮助。
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue入门级案例
06-12
这个入门级案例通过创建一个购物车应用来教授Vue的基本概念和实际应用。 1. **Vue核心概念**： - **模板语法**：Vue使用双大括号`{{ }}`进行数据绑定，支持条件语句（v-if/v-else）、循环（v-for）、事件处理（v-...
vue入门小例子
07-08
在“vue入门小例子”这个项目中，我们可以看到作者通过实践Vue.js的基本特性来学习和理解这个框架。这里我们将深入探讨Vue.js的核心概念和在`TestVUE.html`和`vue.js`这两个文件中可能涉及的知识点。 首先，Vue.js...
vue简单入门小案例，vue简单入门小案例
11-30
Vue.js 是一款非常流行的前端JavaScript框架，...通过这个简单的Vue入门案例，你可以实践基本的Vue.js特性，并对Vue的开发流程有一个直观的认识。随着对Vue的深入学习，你会逐渐掌握如何利用它构建更复杂的前端应用。
VUE入门教程及案例.zip
最新发布
06-23
组件化：Vue的组件化设计使得开发人员可以将应用程序拆分为多个小组件，每个组件都具有独立的逻辑和样式。这不仅提高了代码的复用性和可维护性，还有利于团队协作开发。 易于集成：Vue可以轻松地与其他库和框架（如...
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 1万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Js全栈开发之Vue入门基础
Dahlin哥's 博客
07-19 278
前几天自学完了koa2的后端，并写了几篇学习博客，今天得闲继续总结下Vue的简单基础入门，koa2加上vue基本上就可以自己玩Js全栈了。本篇只是总结一下Vue入门的使用和基础用法实例，因为很简单，就没有具体的过程，下一篇再写综合的组件应用。
07-Vue基础之综合案例——小黑记事本
weixin_46625500的博客
08-23 3013
案例 小黑记事本
【学习笔记】5个小案例快速入门VUE（含axios）
weixin_45305844的博客
07-06 467
文章目录VUE基础VUE简介第一个VUE程序el:挂载点data:数据对象本地应用v-textv-htmlv-onv-on补充v-showv-ifv-bindv-for简单数组类型复杂数组类型v-model网络应用axios引入axios使用axiosGET请求POST请求axios + Vue VUE基础 VUE简介 JavaScript框架 简化Dom操作 响应式数据驱动 第一个VUE程序 导入开发版本的VUE.JS（代码提示比较全） 创建VUE实例对象，设置el属性和data属性 使用简洁的模板
Vue的简单使用及小案例
DangR_Jisoo的博客
02-28 183
Vue的简介 Vue的安装 在官网上下载源码Vue.js，直接在代码中引用 <script src="./js/vue.js"></script> Vue的初体验 <body> <div id="app"> <h1>{{message}}</h1> <h2>{{name}}</h2> </div> <!-- 引入Vue.js --
VUE简介及简单应用案例
言兼小师傅的博客
08-08 1365
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。后端的框架Mybatis，Mybatis是用来简化jdbc代码编写的；而VUE是前端的框架，是用来简化JavaScript代码编写的。
Vue简单实例——动态组件
hssjsh的博客
10-21 609
Vue简单实例——动态组件的基本使用和简单案例
vue入门到精通 pdf
11-23
《Vue入门到精通》是一本关于Vue.js前端框架的学习指南。本书分为入门、进阶和精通三个部分，帮助读者从零基础开始学习，并逐步掌握Vue.js的核心概念和应用技巧。 在入门部分，书中首先介绍了Vue.js的基本概念，如...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值