Vue 入门简单示例

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

Vue

一、第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app", //绑定元素的id
        data:{
            message:'tjx'
        }
    });
</script>

</body>
</html>

二、基础语法指令

1、v-bind

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app", //绑定元素的id
        data:{
            message: '页面加载于' +new Date().toLocaleString()
        }
    });

</script>

</body>
</html>

在这里插入图片描述

2、v-if， v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>狂神说Java</p>

<!--view层 模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>
</body>

<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: "A"
        }
    })
</script>
</html>

在console里输出vm.type=‘B’,网页输出B

3、v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}-----{{index}}
    </li>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            items:[
                {message:'tjx'},
                {message:'abc'},
                {message: 'edf'}
            ]
        }
    });
</script>
</body>
</html>

输出
tjx-----0
abc-----1
edf-----2
测试：在控制台输入vm.items.push({message:‘dddd’})，尝试追加一条数据，你会发现浏览器中显示的内容会增加:
dddd-----3

4、v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">

    <button v-on:click="myname">click</button>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message: "tjx"
        },
        methods:{
            myname:function(){
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>

三、表单双绑、组件

6.1、什么是双向数据绑定

Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
  值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。

（1）为什么要实现数据的双向绑定

在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

6.2、在表单中使用双向数据绑定

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
  注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

（1）单行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    输入的文本：<input type="text" v-model="message" value="hello">{{message}}
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>
</body>
</html>

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。
故只显示键入的值，不显示hello。

（2）多行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    多行文本：<textarea v-model="pan"></textarea>&nbsp;&nbsp;多行文本是：{{pan}}
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            pan:"Hello hello!"
        }
    });
</script>
</body>
</html>

（3）单复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">
    &nbsp;&nbsp;
    <label for="checkbox">{{checked}}</label>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checked:false
        }
    });
</script>
</body>
</html>

（4）多复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="jack">Jack</label>
    <input type="checkbox" id="join" value="Join" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="join">Jack</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="mike">Mike</label>
    <span>选中的值：{{checkedNames}}</span>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checkedNames:[]
        }
    });
</script>
</body>
</html>

（5）单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    单选框按钮
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>选中的值：{{picked}}</span>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            picked:''
        }
    });
</script>
</body>
</html>

（6）下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--    性别：
        <input type="radio" name="sex" value="男" v-model="pan">男
        <input type="radio" name="sex" value="女" v-model="pan">女
        <p>选中了：{{pan}}</p>-->

    下拉框:
    <select v-model="pan">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <span>value:{{pan}}</span>



</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            pan:"A"
        }
    });
</script>
</body>
</html>
每天进步一点点呐
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目demo汇总
前端视听
09-09 1万+
vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。 如果在平时的工作里，有些公司用不到这两项技能，那你也要在业余的时间里面，找一些教程和练手的vue小项目。以下是今年的一些可以练笔的项目，这些源码稍微学习其中的几个，基础能力都能够有所进步。 1:Vue2.0入门项目 https://github.com/SD-Gaming/Vue2.
Vue简单入门及案例
qq_54605990的博客
04-27 1788
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
VUE前端小例子
03-25
VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。
Vue小案例（一）
SAKURAjinx的博客
10-18 667
那么就需要v-if 来进行条件渲染，注意这里不用v-show，因为v-show只是控制元素的显示隐藏，而不会真正控制元素节点的创建删除。创建图示这么个成绩表，包含三个科目及其编号成绩，显示总分和平均分，并可以进行添加成绩和删除成绩的操作(删除所有数据后显示暂无数据)。删除就是将bookList对应的数组元素删除，那么del方法需要接收参数来确定删除哪一项。现在有5张图片，我想通过点击上一张 / 下一张的按钮来进行图片切换。当上一张到第1张位置时，再点上一张会出错，同样的下一张也是。6、计算总分、平均分。
2024年最全Vue学习之增删改查小案例，微信web开发
最新发布
2401_84619145的博客
05-07 1066
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》Name:2.添加记录通过点击‘添加按钮’将数据添加到table中通过v-model指令将id和name输入框的信息和vm中的id和name绑定，给"添加按钮"绑定点击事件。
vue入门小例子
07-08
学习vue.js官网时,写的几个小例子.
VUE入门+5个小案例
热门推荐
Beyondczn的博客
02-23 3万+
本文是我心血来潮学习Vue框架所做的笔记，也供童鞋们学习参考。作为后端的开发人员，学习前端的Vue框架只是单纯地去了解下前端框架的内容，所以并没有深入地去学习，因此本文只适合Vue入门的童鞋哦。由于我的能力有限，所写的内容可能有错误，小伙伴们可以在评论区中进行讨论。这篇笔记是根据哔哩哔哩大学中黑马程序员up主的视频内容进行记录的。视频地址：前端基础必会教程-4个小时带你快速入门vue，欢迎童鞋们去三连哦。 一、Vue基础 1.第一个Vue程序 步骤： 引入vue开发环境 <script sr.
Vue前端案例
idpangpengcheng的博客
03-22 2262
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学员.
vue简单实例
Dust的博客
01-27 129
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.4.1.js"></script> <script type="text/javascript" src="
vue基础入门及示例
08-22
Vue.js 是一款非常流行的前端...这些示例可能涵盖简单的数据绑定、组件创建、事件处理等，可以帮助初学者快速理解Vue的工作原理和使用方法。为了深入学习，建议动手运行这些示例，观察其效果，逐步熟悉并掌握Vue.js。
vue入门学习示例.zip
05-04
根据网上手工编写练习，供需要的用户快速浏览学习，index.html简单学习，super.html for学习，super two.html 自定义事件https://blog.csdn.net/maomaoqiukqq/article/details/99967143
Vue快速入门使用示例附录
03-10
"Vue快速入门使用示例附录"这个压缩包可能是为了帮助初学者快速理解并掌握Vue的基础操作和常见应用场景。让我们通过以下几个关键知识点来深入探讨Vue.js。 1. **安装Vue**: Vue可以通过CDN链接直接在HTML中引入，也...
vue简单示例.zip
03-25
vuejs的一些简单的入门demo案列,便于vue的入门学习 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API ...
vue入门vue入门vue入门
05-14
"Vue入门"意味着我们将探讨如何开始学习和掌握这个强大的技术。 Vue.js 的核心理念是通过声明式的数据绑定和组件化来构建用户界面。它的设计目标是使开发过程更加直观和可维护，使得开发者可以专注于应用的业务逻辑...
Vue简单练手案例
A_Common_Man的博客
05-05 4394
适合vue初学者的3个练手小案例，加深对数据驱动视图的理解，体会到与原生js直接操纵Dom节点的区别
vue3项目实例 --- 个人博客demo
a23452的博客
03-24 1万+
Vue框架 内容管理博客demo展示博客总览页面添加博客页面博客预览博客编辑删除demo中遇到的问题Component "default" in record with path "/blog/:id" is not a valid component下拉列表没有显示所有的数据自定义指令v-color测试不成功demo部分源码 Vue小案例 ---- 简单的个人博客【好看的样式可以再完善，主要是思路】 前面分享了vue3的大部分的知识，所以专门出一篇小小的文章实操一下；后面博主会基于vue + spr
vue快速入门的三个小实例,vue从入门到精通教程
chatgpt001的博客
10-16 1951
使用v-bind指令∶作用：动态绑定属性预期：any (with argument) | Object (without argument)参数：attrOrProp (optional)v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)在开发中，有很多属性需要动态进行绑定，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等。作用:绑定事件监听器缩写:@
Web前端开发经典案例之vue框架开发电商项目百草味案例（一）
05-21
此课程为第一课，学完第一课可以继续学习第二节课的内容 对要完成的案例的分析 通过脚手架创建Vue框架项目以及模块的划分 搭建python语言的Django框架的项目为前端传递所需要的数据 创建好首页，商品模块，购物车模块，订单模块，个人中心模块 创建各个模块的路由，让各个模块可以正常的运行起来 开发首页模块，导入触摸滑动的组件 开发商品分类模块，通过axios组件进行前后端的数据通信 首页导入触摸滑块插件 python端书写要返回前端的商品分类的数据 axios通过get请求从后端获取数据 通过axios把商品分类的数据从后端获取，并且渲染 书写python端返回前端数据的业务代码 商品列表部分的数据从后端获取再渲染 布局商品列表的组件以及购物车的组件
基于Vue+Nodejs实现宿舍管理系统
软件开发实战项目分享
01-05 3万+
考虑到实用性，该系统需要拆分为两大子系统，一个是学生端系统，一个是后台管理端系统。学生端系统主要提供给学生使用，负责一些宿舍记录及个人信息记录的基本操作；后台管理模块则是主要负责对所有学生信息的整理，提供宿舍管理、楼层管理、数据查看等权限，提供给宿舍管理员使用的。
Vue入门：MVVM模式与首个示例
Vue.js第一部分：基础知识入门 本资源深入介绍了Vue.js的基础知识，这是一个流行的JavaScript框架，专门用于构建用户界面。Vue的核心概念在于MVVM（Model-View-ViewModel）模式，它解决了前端开发中的关键问题——...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值